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

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

irbees2008 irbees2008 Опубликовано - 7 - сентября Изображения
2494 - 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 .
Набор опций большой подробней в исходнике и источнике.
Более подробно в исходнике и в источнике.

Можешь почитать и вот эту статейку "Установка движка NGCMS"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

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

Теги

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

Статистика

  • Caйту: 4375 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [9]
  • Гости: [9]
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 0.883сек
  • Потребление памяти: 5.317 Mb 
  •   Яндекс.Метрика