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

Можешь почитать и вот эту статейку "Падающий снег на сайт на css и js"

mistakes

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

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

Ваше мнение

На каком движке ваш сайт?
Результаты

Облако тегов

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