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

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

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

Можешь почитать и вот эту статейку "Анимированная гирлянда для сайта"

Опрос

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

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

Теги

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

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [7]
  • Гости: [6]
  • Поисковики: [1] Яндекс
  • Были сегодня : [1] Яндекс
  • SQL запросов: 35
  • Генерация страницы: 0.529сек
  • Потребление памяти: 4.943 Mb 
  •   яндекс.ћетрика