Главная » Файлы » Скрипты плагины и дополнения » Разное |
Рефокусировка объектов на сайте с помощью JS
Для образца мы взяли за основу постер известной игры battlefield 4, мы разделили его на несколько частей. такой эффект можно использовать для непосредственного выделения информации. Следует отметить, что такой эффект будет работать только в браузерах Webkit. Шаг 1. HTML Код <div id='layers'> <img src='rjDAGHW.jpg' id="bg"> <img src='Kuwy4hu.png' id="dirt"> <img src='JqIXqs2.png' id="runner"> <div id=instructions>передвигайте мышку</div> </div> С разметкой ничего сложно нет, по желанию можно добавить дополнительные слои, кроме этого, как вы заметили, мы добавили подпись на изображения и присвоили ему класс. Шаг 2. CSS Теперь нам необходимо соединить все слоя, для этого мы будем использовать элементы склеивания и позиционирование для контейнера. Код #layers { position:relative; width:1200px; left: 50%; height:600px; margin-left:-600px; overflow:hidden; -webkit-transform-style: preserve-3d; } img { -webkit-transform: translate3d(0, 0, 0); } #layers #runner { position:absolute; top:0px; left:0px; } #layers #dirt { position:absolute; top:0px; left:0px; } #instructions { width:400px; margin-left:400px; height:20px; text-align:center; font-size:12pt; position:absolute; top:10px;; font-family:Helvetica,Arial; left:0; background:rgba(0,0,0,0.6); border-radius:10px; color:white; } Шаг 3. JS Последним шагом будет привязка фокуса к мышке и его активация, для этого нам понадобиться несколько правил JS: Код var mouseY = 0; getBlur = function(depth){ var result = Math.abs(depth-mouseY/50); return result; }; $(document).ready(function() { $(window).mousemove(function(e){ mouseY = e.pageY; $('#bg').attr('style','-webkit-filter:blur('+getBlur(2)+'px);'); $('#dirt').attr('style','-webkit-filter:blur('+getBlur(3)+'px);'); $('#runner').attr('style','-webkit-filter:blur('+getBlur(5)+'px);'); }); }); На это всё! | |
Демо Просмотров: 794
| 17.03.2014, 22:53 |
Просмотров: 794 | Загрузок: 1 | |
Рекомендую к прочтению
Статус пользователя в любом месте д... | Redemption шаблон для Ucoz |
Irene шаблон для Ucoz | Suerte white шаблон для Ucoz |
Мегапак из 920 логотипов с Extended... | Объемный индикатор загрузки для сай... |
Всего комментариев: 0 | |
Disqus comments
comments powered by DisqusHTML | |
BB-Code | |
Ссылка |