2723
- 0
Всем привет.Сегодня нашел прикольный эффект для изображений Image Tilt Effect. Эти эффекты хорошо будут смотреться на сайтах с фото ,изображениями.
Итак приступим.
1.Скачиваем исходники Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
,распаковываем .
2.Заливаем скрипт tiltfx.js в папку скриптов вашего шаблона и подключаем перед закрытием тега body в файле main.tpl
Код:
<script src="{{ tpl_url }}/js/tiltfx.js"></script>Код:
<link rel="stylesheet" href="{{ tpl_url }}/css/tilteffect.css" />Код:
<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
Код:
"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" />
.Набор опций большой подробней в исходнике и источнике.
Более подробно в исходнике и в источнике.
Можешь почитать и вот эту статейку "Подключение OpenServer к Visual Studio Code (VSCode)"
Это тоже интересно
24.03.15Интересная анимация в поле input
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.