Новости Joomla

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

hottab_1

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

effrit

  • Легенда
  • 10132
  • 1118 / 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

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

Шаблон для данной страницы недоступен. сообщите об этом Администратору сайта

Автор 62411

Ответов: 2
Просмотров: 209
Последний ответ 30.03.2024, 13:15:16
от web1
Как установить header Cache-Control только для одной страницы по URL?

Автор Slava77

Ответов: 0
Просмотров: 149
Последний ответ 23.03.2024, 00:16:36
от Slava77
Как вставить модуль в код нужной страницы php?

Автор zvi

Ответов: 9
Просмотров: 3882
Последний ответ 21.02.2024, 11:03:08
от saynez
Долго грузятся страницы категорий

Автор SuperRomario

Ответов: 4
Просмотров: 1510
Последний ответ 03.07.2023, 17:59:07
от Wood
Получить текущий номер страницы плагина "Разрыв страницы" (pagebreak)

Автор sertlan

Ответов: 1
Просмотров: 452
Последний ответ 12.06.2023, 18:14:09
от sertlan