Сергей Горячев

z-index и position

position: fixed;

www.abcname.ua/scripts/slayder/259.html
www.abcname.ua/scripts-files/jquery.aw-showcase/in...
Нашел. На 6 слайде то, что нужно было.

У тебя же есть примерно такой код:

<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=TL1Ji8PLfzY48FW_T4DsO-Hoel1eWj0T&amp;width=500&amp;height=400&amp;lang=ru_RU&amp;sourceType=constructor&amp;scroll=true"></script>

Сделай height=auto а родительскому блоку, к котором будет лежать карта уже меняй, как надо.

Задайте этот вопрос дизайнеру, который вам прислал этот макет.

Еще можно "ловить" на Хабре подборку фронта, там обычно всё самое крутое в одной статье.
https://habrahabr.ru/company/zfort/blog/313968/
https://habrahabr.ru/company/zfort/blog/312832/
И так далее) Я оттуда уже очень много крутецких штук набрал)))

На айфоне не запустится, как ни старайся. Это особенность айфона, защита траффика.

UPD: Спасибо Anton fon Faust за добавление информации по Айфонам
https://github.com/bfred-it/iphone-inline-video

Рабочее решение для андройда тут https://arm1.ru/blog/html5-video-kak-fon-stranitsy

С Android тяжелее всего. Автопроигрывание не работает. Кнопка Play появляется только если добавить для тэга video аттрибут controls, чтобы появились стандартные контролы управления. Это, увы, не так уже красиво. Но это ещё не всё. Для того, чтобы видео начало играть, нужно ещё добавить дополнительно Javascript-обработчик, который принудительно скажет video, чтобы оно играло:

var video =  document.getElementById(element);
video.addEventListener('click',function(){
	  video.play();
},false);

Для определения Android, чтобы добавить аттрибут controls, я просто использовал Detect.js:

var ua = detect.parse(navigator.userAgent);
if ( ua.os.family === 'Android' ) {
	video.setAttribute( 'controls','controls' );
}

PS: А вообще, я бы рекомендовал на мобильных устройствах не показывать видео.
Просто сделать красивую фоновую картинку, реально, зачем тратить трафик людей.
Не все сидят именно с WI-FI, и важна скорость загрузки сайта с телефона.

Паддинги нужны просто для того, чтобы контент не прилипал к краям экрана.
Это неудобно для просто и чтения, а небольшой паддинг улучшает просмотр.
Особенно остро это ощущается на мобильниках и сайтах в 100% ширины.


Почему именно 15 пикселей, это надо спросить у Бутстрапа.
Я например, всегда делаю контейнер 95%, и ограничиваю 1200 пикселей.
То есть у меня нет четкого паддинга, чем меньше экран, тем меньше паддинг.

style.css

.block { } // правильно
.block .elem { } // правильно

media.css

@media screen and (max-width: 1000px) {
    .elem { } // не правильно
    .block .elem { } // правильно
}

1. flexbox - https://jsfiddle.net/webirus/584uautd/1/

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

2. inlide-block - https://jsfiddle.net/edalis/584uautd/ (взял заготовку Edward )

.parent {
    text-align: center;
}
.child {
    display: inlide-block;
}

JS:
viewportchecker.js или wow.js на выбор
CSS:
animate.css, есть и другие, но эта самая популярная

Я чаще всего использую связку viewportchecker + animate.css.

$('.bxslider').addClass('hidden').viewportChecker({ // добавляем класс hidden
// ждем появления блока в поле зрения, чтобы применить к нему анимацию
    classToAdd: 'visible animated fadeIn', // меняем классы, выполняем анимацию
    offset: '50%', // доп параметры, когда начинать анимацию
    repeat: true, // повторять при возвращении снизу вверх
});

PS: Классы hidden и visible нужно добавить в css.
Если используете Bootstrap, то лучше классы сделать другие, чтобы не было конфликта.

Преимущество подключения именно viewportchecker для меня.
То, что его можно использовать для любых скриптов вообще, не только для анимации.
Запуск видео, инициализация слайдера, "убийство" слайдера, особенно animateNumber.js ( описание ) удобно привязать, чтобы анимация цифр срабатывала не при загрузке, а именно в момент скролла до блока.
И библиотека весит совсем немного.

Ааа, всё, нашел)))

if(canScroll){
                    var averageEnd = getAverage(scrollings, 10);
                    var averageMiddle = getAverage(scrollings, 70);
                    var isAccelerating = averageEnd >= averageMiddle;

                    //to avoid double swipes...
                    if(isAccelerating && isScrollingVertically){
                        //scrolling down?
                        if (delta < 0) {
                            scrolling('up', scrollable);

                        //scrolling up?
                        }else {
                            scrolling('down', scrollable);
                        }
                    }
                }