Форум русской поддержки Joomla!® CMS
06.12.2016, 10:04:26 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 126 раз)
0 Пользователей и 1 Гость смотрят эту тему.
hottab_1
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 46


« : 09.09.2016, 23:07:53 »

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

Репутация: +730/-7
Offline Offline

Пол: Мужской
Сообщений: 6807


effrit.com


« Ответ #1 : 09.09.2016, 23:27:28 »

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

примеров много, на самом деле.
https://www.sitepoint.com/scroll-based-animations-jquery-css3/#scroll-animation-examples
« Последнее редактирование: 09.09.2016, 23:33:29 от effrit » Записан
robert
Профи
********

Репутация: +343/-11
Offline Offline

Пол: Мужской
Сообщений: 3582


« Ответ #2 : 09.09.2016, 23:50:21 »

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

Репутация: +730/-7
Offline Offline

Пол: Мужской
Сообщений: 6807


effrit.com


« Ответ #3 : 09.09.2016, 23:52:53 »

ну да, CSS анимирует, а скрипт отслеживает момент запуска анимации.
у меня в посте по второй ссылке примеры похожи на те, что в видосе, так что пусть читает )
Записан
hottab_1
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 46


« Ответ #4 : 10.09.2016, 00:13:16 »

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

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

Репутация: +0/-0
Offline Offline

Сообщений: 46


« Ответ #5 : 10.09.2016, 00:14:07 »

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

Репутация: +0/-0
Offline Offline

Сообщений: 46


« Ответ #6 : 10.09.2016, 00:14:32 »

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

Репутация: +0/-0
Offline Offline

Сообщений: 46


« Ответ #7 : 10.09.2016, 00:19:32 »

Я сейчас пробую сделать как описано вот тут:
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
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 46


« Ответ #8 : 10.09.2016, 00:36:52 »

Разобрался.
Надо было использовать класс 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
Теперь все работает.
Большое спасибо, тем кто откликнулся в тему. Smiley
Вопрос можно считать закрытым.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet