Плавное "выпадение" картинок при прокрутке страницы

  • 8 Ответов
  • 268 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

hottab_1

Здравствуйте!
Есть сайт на Joomla 3.
Подскажите, пожалуйста, как реализовать "выпадение" картинок (классов css) при прокрутке страницы. Например, как тут:
http://www.screencast.com/t/BIUzIH8hWb7T
Почему-то не могу найти похожий пример в реализации.
Если дадите ссылки, на статьи, где рассказывается как сделать подобное выпадение, буду очень благодарен.

*

effrit

  • *****
  • 7438
  • [+]822 / [-]7
  • effrit.com
вечер добрый.
как вариант, подключить
https://daneden.github.io/animate.css/
а дальше проверять при скролле зону показа и добавлять анимирующие классы картинкам.

примеров много, на самом деле.
https://www.sitepoint.com/scroll-based-animations-jquery-css3/#scroll-animation-examples

*

robert

Мне кажется, тут не только CSS, но и еще и AJAX Lazy Loading. ТС почему-то потратил время на создание и загрузку видео вместо того, чтобы привести ссылку tempo-bordur точка ru. Там исползуется Parallax, по-моему.
  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.

*

effrit

  • *****
  • 7438
  • [+]822 / [-]7
  • effrit.com
ну да, CSS анимирует, а скрипт отслеживает момент запуска анимации.
у меня в посте по второй ссылке примеры похожи на те, что в видосе, так что пусть читает )

*

hottab_1

вечер добрый.
как вариант, подключить
https://daneden.github.io/animate.css/
а дальше проверять при скролле зону показа и добавлять анимирующие классы картинкам.

примеров много, на самом деле.
https://www.sitepoint.com/scroll-based-animations-jquery-css3/#scroll-animation-examples
Понял, спасибо, посмотрю данный способ

*

hottab_1

Мне кажется, тут не только CSS, но и еще и AJAX Lazy Loading. ТС почему-то потратил время на создание и загрузку видео вместо того, чтобы привести ссылку tempo-bordur точка ru. Там исползуется Parallax, по-моему.
Да, все верно, на этом сайте можно увидеть пример. Записал видео потому что сайт закрытый и для доступа пришлось бы давать логин и пароль.

*

hottab_1

ну да, CSS анимирует, а скрипт отслеживает момент запуска анимации.
у меня в посте по второй ссылке примеры похожи на те, что в видосе, так что пусть читает )
Можно ссылку, пожалуйста?)

*

hottab_1

Я сейчас пробую сделать как описано вот тут:
http://smartlanding.biz/animaciya-pri-prokrutke-stranicy.html
Там подключается Animate.css и wow.js
Анимация получилась при прокрутке, но не та, которая нужна. Не получается почему-то применить класс bouncelnDown, просто ничего не происходит. А например анимация под классом bounce работает.
Вот список всех анимаций: https://daneden.github.io/animate.css/
Вот так подключаю в index.php:
Код
  <script src="/templates/it_blackwhite2/less/wow.min.js"></script>
<script>new WOW().init();</script>
А вот так применяю к картинкам:
Код
<div class="bouncelnDown wow" >

  <img src="/images/staray-mostovay2/kirpich-mokko.png" alt="" width="360" height="166" />

  <img src="/images/staray-mostovay2/seryj-shifer.png" alt="" width="360" height="166" />

  <img src="/images//staray-mostovay2/amoretto.png" alt="" width="360" height="166" />

  <img src="4.jpg" alt="" width="360" height="166" />

  </div>

*

hottab_1

Разобрался.
Надо было использовать класс div "bounceInDown wow". То есть код получается вот такой:
Код
<div class="bounceInDown wow"> 
  Содержание блока
</div>

Описываю как все подключал и сделал, может кому пригодится.
1. Скачал файл вот отсюда (там под выбором анимации есть ссылка "Download Animate.css") https://daneden.github.io/animate.css/. Загрузил файл Animate.css на сервер и подключил к сайту в index.php.
2. Так как wow.js платный, как я понял, а может ступил и не посмотрел внимательно. Вообщем, взял код wow.js вот отсюда: http://smartlanding.biz/js/wow.min.js, то есть просто открыл сайт, где подключен wow.js и открыл файл wow.min.js, который указывался в подключение.
3. Создал файл wow.min.js, скопировал код из файла wow.min.js (http://smartlanding.biz/js/wow.min.js) и вставил в свой файл.
4. Загрузил файл на сервер и подключил его в index.php
5. Вызвал wow.js в index.php:
Код
<script>new WOW().init();</script>
6. Начинаем использовать. Указываем у div или другого элемента класс:
Код
<div class="bounceInDown wow">
bounceInDown - вид анимации, можно прописать любой, который есть на сайте https://daneden.github.io/animate.css/, но обратите внимание, что название некоторых классов на сайте отличается от тех, которые указаны в файле animate.css (именно по этому у меня с первого раза не запустилась нужная анимация), так что проверяйте по файлу animate.css как называется класс с нужной нам анимацией.
wow - использование скрипта wow.js
Теперь все работает.
Большое спасибо, тем кто откликнулся в тему. ^-^
Вопрос можно считать закрытым.