Полезное в сети
Всегда в теме
Статистика
Свежий софт
| Wrecker |  |
| Kaspersky Internet Security 2015 | |
| Wrecker |  |
| Virtual DJ | |
| Wrecker |  |
| SoundForge 11 | |
| Wrecker |  |
| Alcohol 120 | |
| Wrecker |  |
| Norton Internet Security 2014 | |
| Iron |  |
| Loaris Trojan Remover | |
Рекомендуем
Главная » 2013 Август 9 » Эффект бликов с использованием JavaScript
10:56 Эффект бликов с использованием JavaScript |
Эффект бликов с
использованием JavaScript 
Этот урок довольно интересный, мы
узнаем, как сделать эффект бликов. Я надеюсь, вы знаете, что это такое, но
если нет - просто посмотрите наш онлайн демо. Для достижения этого
эффекта, нам нужно несколько изображений - линз. Эти линзы будут в 3-х
различных цветах (более хороший результат.) Одина из линз будет имитировать
самый яркий объект нашего состава (звезда). Но это также может быть
солнцем (к примеру). И, для большей интерактивности - мы будем менять объектив
при перемещении мыши. Вот образцы и загружаемый пакет: Шаг 1. HTML Как обычно, мы начнем с HTML. Это исходный код нашего
примера: index.html <html> <head> <title>Flare lens
effect</title> <link rel="stylesheet"
type="text/css" href="css/main.css" /> <script type="text/javascript"
src="js/main.js"></script> </head> <body> <img id="bg"
src="images/background.jpg" /> <div id="main_area"> <img id="l1"
class="transp" src="images/l1.png" /> <img id="l2"
class="transp" src="images/l2.png" /> <img id="l3"
class="transp" src="images/l3.png" /> <img id="l4"
class="transp" src="images/l2.png" /> <img id="l5"
class="transp" src="images/l1.png" /> <img id="l6"
class="transp" src="images/l2.png" /> <img id="l7"
class="transp" src="images/l3.png" /> <img id="l8"
src="images/flare1.png" style="position:absolute" /> </div> </body> </html> Шаг 2. CSS Вот один файл CSS все необходимые стили: CSS /
main.css html {overflow:hidden} body{margin:0;padding:0} #bg{ width:100%; position:absolute; top:0; left:0; } #main_area { position:relative; height:100%; } .transp { filter:alpha(opacity=20); opacity:0.2; left:-1000px; position:absolute; } Шаг 3. JS Вот наш основной Javascript: JS /
main.js var lfeff = {
// variables cx:0, cy:0, lx:0, ly:0, px:0, py:0, mobj:0, max:400,
// initialization init : function() { this.mobj =
document.getElementById('main_area'); this.resize(); this.lx = this.cx / 2; this.ly = this.cy / 2; },
// refreshing mouse positions mousemove : function(e) { if (window.event) e = window.event; this.lx = (e.x || e.clientX); this.ly = (e.y || e.clientY); },
// window resizing resize : function() { lfeff.cx = lfeff.mobj.offsetWidth * 0.5; lfeff.cy = lfeff.mobj.offsetHeight * 0.5; },
// main draw lens function draw : function() { lfeff.px -= (lfeff.px - lfeff.lx) * .1; lfeff.py -= (lfeff.py - lfeff.ly) * .1;
lfeff.drawLens('l1', 0.7, 1, 0, 0); lfeff.drawLens('l2', 0.5, 2, 0, 0); lfeff.drawLens('l3', 0.3, 3, 0, 0); lfeff.drawLens('l4', 0.2, 10, 0, 0); lfeff.drawLens('l5', 0.7, -1, 0, 0); lfeff.drawLens('l6', 0.5, -2, 0, 0); lfeff.drawLens('l7', 0.3, -3, 0, 0); lfeff.drawLens('l8', 1.0, -0.7, 0, 0);
// looping current function setTimeout(lfeff.draw, 24); },
// draw each lens function drawLens : function(id, scale, distance, x,
y) { var vx = (this.cx - this.px) /
distance; var vy = (this.cy - this.py) /
distance; var d = this.max * scale; css =
document.getElementById(id).style; css.top = Math.round(vy - (d * 0.5) +
this.cy + y) + 'px'; css.left = Math.round(vx - (d * 0.5) +
this.cx + x) + 'px' css.width = Math.round(d) + 'px' css.height = Math.round(d) + 'px' } }
window.onload =
function() { // initialization lfeff.init();
// start lfeff.draw();
// binding onmousemove event document.onmousemove = function(e) { if (window.event) e = window.event; //
for IE lfeff.mousemove(e); }
// binding onresize event window.onresize = lfeff.resize(); } Шаг 4. Изображения Изображения вы можете найти в загружаемом пакете Заключение Сегодня я рассказал вам, как создать легкий эффект вспышки к
изображениям. Можно попробовать эксперементировать с нашим JS файлом,
чтобы получить разные результаты эффекта. Удачи! |
|
|
| Всего комментариев: 0 | |
