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

hottab_1

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

effrit

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

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

robert

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

effrit

  • Легенда
  • 10098
  • 1112 / 13
  • effrit.com
ну да, CSS анимирует, а скрипт отслеживает момент запуска анимации.
у меня в посте по второй ссылке примеры похожи на те, что в видосе, так что пусть читает )
*

hottab_1

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

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

hottab_1

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

hottab_1

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

hottab_1

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

  • Осваиваюсь на форуме
  • 41
  • 0 / 0
Разобрался.
Надо было использовать класс 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
Теперь все работает.
Большое спасибо, тем кто откликнулся в тему. ^-^
Вопрос можно считать закрытым.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Перезагрузка страницы входа в админку

Автор Zmievtur

Ответов: 19
Просмотров: 2782
Последний ответ 11.11.2021, 02:15:33
от Slava77
Плагин подмены битых картинок

Автор yarek

Ответов: 3
Просмотров: 273
Последний ответ 26.09.2021, 00:51:34
от aressiont70
Как создавать директивы типа: max-image-preview для отдельной страницы?

Автор polezniy

Ответов: 0
Просмотров: 399
Последний ответ 31.08.2021, 00:42:20
от polezniy
Как удалить галерею со страницы?

Автор prioritet

Ответов: 3
Просмотров: 468
Последний ответ 28.08.2021, 22:30:39
от gartes
Страницы на основе файлов

Автор effrit

Ответов: 9
Просмотров: 477
Последний ответ 05.08.2021, 13:25:16
от sivers