Эффект бликов с
использованием 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 файлом,
чтобы получить разные результаты эффекта. Удачи!
Ссылка
на источник
| 
