Есть div с классом bg-video и два div'а с классами event_1 и event_2. Видео должно оставаться на фоне пока идет скроллинг содержимого event_1. А потом начинается следующий div с классом event_2 и хотелось бы чтобы фоновое видео уезжало.
Если в стилях прописать для bg-video свойство position: fixed, то с дивом event_1 все хорошо, скролится на фоне видео. Но к сожалению следующего дива event_2 и футера не видно совсем. Обыгрывала разные варианты оберток и классов, видео или уезжает сразу или становится растянутым на всю величину дива event_1.
Буду благодарна за любые ответы, не обязательно давать готовые рецепты, подскажите, пожалуйста, в каком направлении копать.
(Верстаю на бутстрап 4 с jquery-3.3.1)
Верстка, CSS, HTML, SVG
Как сделать чтобы блок с фоновым видео после скроллинга некоторого контента уезжал наверх?
Ну так вроде просто: по условию менять $(window).scrollTop() на верхнюю координату event_2, передав ее аргументом. А если надо плавно перекатываться к блоку, то через .animate().
Условием может быть позиция прокрутки всей страницы, либо контента event_1 - это уж как захочется... сама реализация будет практически одинакова в обоих случаях, только параметры и меняются.
Получение координат элемента блока относительно документа - метод .offset(), событие прокрутки - scroll.
Условием может быть позиция прокрутки всей страницы, либо контента event_1 - это уж как захочется... сама реализация будет практически одинакова в обоих случаях, только параметры и меняются.
Получение координат элемента блока относительно документа - метод .offset(), событие прокрутки - scroll.
Александр Кузнецов
Ярослав, спасибо огромное! Я надеялась обойтись силами css и html, так как с js еще на "вы". Ну значит пора учиться и заполнять пробелы.
Ну так на словах непонятна твоя затея хотя бы показал что уже сделано думаю что что то в стиля перемудрил
⚤
⚤
Александр Кузнецов
Спасибо за Ваше внимание моему вопросу. Действительно я не наглядно объяснила. вот на этом сайте https://x-waters.com видео стоит пока идет блок с анонсами мероприятий. А потом когда идет история заплывов и подвал, видео "уехало". Мне нужен такой же эффект. Надеялась обойтись без плагинов. Силами css и html. Может с z-index поиграться
Scroolly спешит на помощь.
Вся прелесть scroolly заключается в том, что каждая из этих границ областей действия правил задается с помощью вот такого наглядного синтаксиса:
el-top = vp-bottom - 100px (элемент начинает появляться)
el-bottom = vp-bottom - 100px (элемент заканчивает появляться)
el-center = vp-center + 30vp (элемент начинает поворот)
el-center = vp-center - 30vp (элемент заканчивает поворот)
el-top = vp-top + 100px (элемент начинает исчезать)
el-bottom = vp-top + 100px (элемент заканчивает исчезать)
А весь сценарий описывается так:
$('.my-element').scroolly([
{
from: 'el-top = vp-bottom - 100px',
to: 'el-bottom = vp-bottom - 100px',
cssFrom:{opacity:'.0'},
cssTo:{opacity:'1'}
},
{
from: 'el-center = vp-center + 30vp',
to: 'el-center = vp-center - 30vp',
cssFrom:{'transform': 'rotate(0deg)'},
cssTo:{'transform': 'rotate(180deg)'}
},
{
from: 'el-top = vp-top + 100px',
to: 'el-bottom = vp-top + 100px',
cssFrom:{opacity:'1'},
cssTo:{opacity:'.0'}
}
]);
Где vp – viewport, а el – элемент. Также можно пользоваться абстракциями doc для документа и con для контейнера элемента. А теперь об этом подробнее и с картинками…
leading-actors (2)
У каждого из них есть опорные точки, которые можно использовать в синтаксисе scroolly:
viewport: vp-top, vp-center, vp-bottom
элемент: el-top, el-center, el-bottom
контейнер: con-top, con-center, con-bottom
документ: doc-top, doc-center, doc-bottom
anchors (2)
Вот несколько примеров описания областей действия правил c помощью синтаксиса scrolly:
viewport-document
viewport-element (5)
Документация
Если Вас заитересовал плагин scroolly обязательно посмотрите официальную документацию. А она существует, и даже представлена в 2-х вариантах:
Для ленивых и нетерпеливых – github.com/chayka/jQuery.Scroolly/wiki/Short-Story
Для неторопливых и вдумчивых – github.com/chayka/jQuery.Scroolly/wiki/Long-Story
Ну и самое главное: обязательно посмотрите видео с нашей конференции 4front, на котором Борис сам захватывающе рассказал про скролл-эффекты в целом и scroolly в частности.
открыть в новом окне
В заключение
Автор библиотеки открыт для отзывов, предложений и пулл-реквестов. Репортите баги, присоединяйтесь к разработке, а главное – пробуйте использовать scroll-эффекты как в реальных проектах, так и для баловства и саморазвития.
Подробнее: https://html5.by/blog/scroll-effects/
Вся прелесть scroolly заключается в том, что каждая из этих границ областей действия правил задается с помощью вот такого наглядного синтаксиса:
el-top = vp-bottom - 100px (элемент начинает появляться)
el-bottom = vp-bottom - 100px (элемент заканчивает появляться)
el-center = vp-center + 30vp (элемент начинает поворот)
el-center = vp-center - 30vp (элемент заканчивает поворот)
el-top = vp-top + 100px (элемент начинает исчезать)
el-bottom = vp-top + 100px (элемент заканчивает исчезать)
А весь сценарий описывается так:
$('.my-element').scroolly([
{
from: 'el-top = vp-bottom - 100px',
to: 'el-bottom = vp-bottom - 100px',
cssFrom:{opacity:'.0'},
cssTo:{opacity:'1'}
},
{
from: 'el-center = vp-center + 30vp',
to: 'el-center = vp-center - 30vp',
cssFrom:{'transform': 'rotate(0deg)'},
cssTo:{'transform': 'rotate(180deg)'}
},
{
from: 'el-top = vp-top + 100px',
to: 'el-bottom = vp-top + 100px',
cssFrom:{opacity:'1'},
cssTo:{opacity:'.0'}
}
]);
Где vp – viewport, а el – элемент. Также можно пользоваться абстракциями doc для документа и con для контейнера элемента. А теперь об этом подробнее и с картинками…
leading-actors (2)
У каждого из них есть опорные точки, которые можно использовать в синтаксисе scroolly:
viewport: vp-top, vp-center, vp-bottom
элемент: el-top, el-center, el-bottom
контейнер: con-top, con-center, con-bottom
документ: doc-top, doc-center, doc-bottom
anchors (2)
Вот несколько примеров описания областей действия правил c помощью синтаксиса scrolly:
viewport-document
viewport-element (5)
Документация
Если Вас заитересовал плагин scroolly обязательно посмотрите официальную документацию. А она существует, и даже представлена в 2-х вариантах:
Для ленивых и нетерпеливых – github.com/chayka/jQuery.Scroolly/wiki/Short-Story
Для неторопливых и вдумчивых – github.com/chayka/jQuery.Scroolly/wiki/Long-Story
Ну и самое главное: обязательно посмотрите видео с нашей конференции 4front, на котором Борис сам захватывающе рассказал про скролл-эффекты в целом и scroolly в частности.
открыть в новом окне
В заключение
Автор библиотеки открыт для отзывов, предложений и пулл-реквестов. Репортите баги, присоединяйтесь к разработке, а главное – пробуйте использовать scroll-эффекты как в реальных проектах, так и для баловства и саморазвития.
Подробнее: https://html5.by/blog/scroll-effects/
Александр Кузнецов
Алексей, спасибо за информацию. Очень интересный инструмент, похоже мне больше всего подходит Staging. К сожалению, на сайте не работают демки, но попробую покурить в этом направлении.
background: fixed?
Александр Кузнецов
Денис, спасибо что уделили внимание моему вопросу. fixed хорошо решает задачу временно, пока идет первый блок. А вот дальнейший контент уже скрывает. К сожалению, fixed намертво фиксирует видео на экране, а мне нужно чтоб оно потом "уехало".
Похожие вопросы
- Как сделать блок с обрезанными краями под угол, и закруглить углы?
- После верстки и получения сайта, можно ли без знаний css,html и php, самостоятельно отредактировать контент или нет ?
- Как присвоить стили ссылкам одного блока - так что бы они не распространялось на ссылки за пределами блока?
- Вот для чего админы сайтов делают шарину контента очень маленькую ?
- Как сделать рамку вокруг блока в CSS?
- Зачем для разделения в блоках используют margin, а не gap?
- Как реализовать выпуклость у блока?
- В Ютубе есть видео уроки по программированию, например Хауди Хо
- Способ создания страниц сайта ввиде таблицы уже устарел? Какому способу лучше научиться. Вроде еще можно ввиде блоков.
- Блоки не заполняют всё пространство