• 1075
  • 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 .
Набор опций большой подробней в исходнике и источнике.
Более подробно в исходнике и в источнике.

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

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

TWIG -что это?
Результаты

Облако тегов

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