Tilt.js - Лёгкий плагин анимации наклона.

Десятки посетителей сайта спрашивали меня что за анимация картинок в кратких новостях? Как этот плагин называется? Что это такое? и тд и тп.
Скажу честно! Я до последнего держал эту штуку на 'чердаке' и не хотел делится  blush так как скрипт придает хоть какую-то уникальность.
Но количество интересующихся данным скриптом людей достигло критической отметки, я не сдержался и решил выложить.

Плагин называется Tilt.js - Это лёгкий скрипт анимации наклона и 3D эффекта. Такую анимацию вы могли заметить на картинках в краткой новости этого сайта. У плагина куча конфигураций, эффектов и тд. Покажу как устанавливается и настраивается.

Скачиваем архив и распаковываем файл dest tilt.jquery.js в папку с вашими js скриптами (если нет такой, создаем папку js и кидаем файл туда.)
Открываем файл index.html / main.tpl(для DLE шаблона) в самом конце перед </body> дописываем:
<script src="/templates/fd/js/tilt.jquery.js"></script>

Как использовать?
Всё зависит от того как в вашем шаблоне выводятся изображения в новости. Например у меня отдельно выводится текст и картинка тегом
<img src="{image-1}">
Пример анимации как на сайте for-dle.ru:
<img src="{image-1}" alt="{title}" width="100%" data-tilt data-tilt-glare="true" data-tilt-transition="true" data-tilt-perspective="1000"  data-tilt-scale="1">
О настройках я рассказывать не буду, это нудно и долго. Найти все настройки вы можете на странице автора.
Вот как бы и всё!

скачать dle 11.1смотреть фильмы бесплатно
Ripple Эффект для ссылок и кнопок при нажатии
Ripple Эффект для ссылок и кнопок при нажатии
18-05-2017, 12:33, JavaScript
AOS Анимация при прокручивании (скролле) страницы
AOS Анимация при прокручивании (скролле) страницы
26-01-2017, 08:57, Плагины
Movie

Нет комментариев. Гость, не желаешь оставить первый комментарий?

Перед публикацией, советую ознакомится с правилами!

{login}

Твой комментарий..

Имя:*
E-Mail:
Loading...

Настраиваем новый дизайн
Некоторые страницы и функции могут быть недоступны!

Loading...

Настоятельно рекомендуем ознакомиться с информацией по ссылке ниже.

Сайт мошенников

Ваша реклама

fordleru@mail.ru
Loading...

Нашли ошибку?
Вы можете сообщить об этом администрации.
Выделив текст нажмите CTRL+Enter