Хаки и Скрипты Next Generation CMS

Эффект для изображений Image Tilt Effect

irbees2008 irbees2008 Опубликовано - 7 - сентября Изображения
2723 - 0
  • Автор: Mary Lou
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

Всем привет.Сегодня нашел прикольный эффект для изображений Image Tilt Effect. Эти эффекты хорошо будут смотреться на сайтах с фото ,изображениями.
Итак приступим.
1.Скачиваем исходники Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем .
2.Заливаем скрипт tiltfx.js в папку скриптов вашего шаблона и подключаем перед закрытием тега body в файле main.tpl

Код:
	<script src="{{ tpl_url }}/js/tiltfx.js"></script>
3.Заливаем файл стилей tilteffect.css в папку стилей вашего шаблона и подключаем в head в файле main.tpl
Код:
<link rel="stylesheet"  href="{{ tpl_url }}/css/tilteffect.css" />
4.Ну и сами картинки будут по умолчанию выглядеть так
Код:
<img src="{{ tpl_url }}/img/2.jpg" class="tilt-effect" alt="grid01" />
Вот настройки по умолчанию
Код:
"extraImgs" : 2,
"opacity" : 0.7,
"bgfixed" : true,
"movement": {
"perspective" : 1000,
"translateX" : -10,
"translateY" : -10,
"translateZ" : 20,
"rotateX" : 2,
"rotateY" : 2,
"rotateZ" : 2
5.Вот с такими настройками
Код:
"extraImgs" : 4,
"opacity" : 0.5,
"bgfixed" : true,
"movement": {
"perspective" : 500,
"translateX" : -15,
"translateY" : -15,
"translateZ" : 20,
"rotateX" : 15,
"rotateY" : 15
Код изображения будет выглядеть вот так
Код:
<img src="{{ tpl_url }}/img/2.jpg" class="tilt-effect" data-tilt-options='{ "extraImgs" : 4, "opacity" : 0.5, "movement": { "perspective" : 500, "translateX" : -15, "translateY" : -15, "translateZ" : 20, "rotateX" : 15, "rotateY" : 15 } }' alt="grid01" />
Как видите немного похоже на твиг smile .
Набор опций большой подробней в исходнике и источнике.
Более подробно в исходнике и в источнике.

Можешь почитать и вот эту статейку "Подключение OpenServer к Visual Studio Code (VSCode)"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

Последние комментарии

Обновленное

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4802 дня
  • Новостей: 613
  • Комменты: 257
  • Зарегистрированно : 744
  • Онлайн всего: [17]
  • Гости: [17]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.215сек
  • Потребление памяти: 5.235 Mb 
  •   Яндекс.Метрика