Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



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

 

Ссылка на источник

Категория: CSS//HTML//JS | Просмотров: 1240 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди