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

Всегда в теме

Статистика


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


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

Рекомендуем



Главная » 2013 » Август » 9 » Эффект волн с использованием JavaScript


10:51
Эффект волн с использованием JavaScript

Эффект волн с использованием JavaScript



Сегодняшний урок довольно интересный, мы узнаем, как создавать волновой эффект.Для ясности, мы будем применять этот эффект к изображению.

 

Демо                            Скачать пакет


Шаг 1. HTML

Как обычно, мы начнем с HTML. Это исходный код нашего примера:

index.html

<html>

<head>

    <title>Effect of waves using pure JavaScript</title>

    <link rel="stylesheet" type="text/css" href="css/main.css" />

    <script type="text/javascript" src="js/main.js"></script>

</head>

 <body>

    <div class="example">

        <div id="main_object">

            <img id="source_img" src="image.jpg">

            <div id="wave_zone"></div>

        </div>

    </div>

 </body>

</html>

Шаг 2. CSS

Вот один файл CSS все необходимые стили:

CSS / main.css

body{background:#eee;margin:0;padding:0}

.example{background:#FFF;width:800px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

 

#main_object {

    position: relative;

}

#main_object img {

    display: block;

}

#main_object #wave_zone img {

    position:absolute;

    left:-9999px;

}

#main_object span {

    position:absolute;

    font-size:0px;

}

#main_object #wave_zone {

    position:relative;

    display:block;

    overflow:hidden;

    background-color:#000;

}

 

Шаг 3. JS

Вот наши основные Javascript:

JS / main.js

// wave sub objects

function WSubObj(num, img, object, iwidth, iheight){

    this.S = num;

    var o = document.createElement("span");

    o.style.overflow = "hidden";

    o.style.width = iwidth + "px";

    o.style.height = iheight + "px";

    o.style.top = (num-1) + "px";

    var oI = document.createElement("img");

    oI.src = img.src;

    oI.style.left = "0px";

    oI.style.top = (-iheight + num) + "px";

    oI.style.width = iwidth + "px";

    oI.style.height = iheight + "px";

    o.appendChild(oI);

    document.getElementById("wave_zone").appendChild(o);

    this.spa = o.style;

    this.ddx = 0

    this.PX  = 0

    this.x   = 0

    if (num > 0) this.prev = object[num - 1];

}

 

WSubObj.prototype.main = function(power){

    var x0 = (this.S == 0) ? Math.random() * power : this.prev.x;

    this.x = this.PX += (this.ddx += ( (x0 - this.PX - this.ddx) * 2 ) / 2.8) / 1.4;

    this.spa.left = Math.round(this.x) + "px";

}

 

// wave effect object

var weff = {

    // variables

    power : 2.2,

 

    // inner variables

    object : new Array(),

    simg : null,

    iwidth  : 0,

    iheight  : 0,

 

    // initialization function

    init : function() {

        for (var i = 0; i < this.iheight/4; i++)

            this.object[i] = new WSubObj(i, this.simg, this.object, this.iwidth, this.iheight);

    },

 

    // main loop function of water effect

    run : function() {

        var i = 0, o;

        while (o = weff.object[i++]) o.main(weff.power);

        setTimeout(weff.run, 40);

    }

};

 

// on page load

window.onload = function() {

    weff.simg = document.getElementById("source_img");

    weff.iwidth = weff.simg.width;

    weff.iheight = weff.simg.height;

 

    // set necessary width and height for wave zone element

    var css = document.getElementById("wave_zone").style;

    css.height = (weff.iheight/4 - 1) + "px";

    css.width  = weff.iwidth + "px";

 

    weff.init();

    weff.run();

}

Все достаточно просто. При загрузке страницы - я инициализировал наш главный объект, и создал несколько подизображений (в пролетах) для каждой строки второй половины нашего образца, периодически по немногу увиличивая амплитуду колебаний.Так, в результате - мы можем видеть эффект волн.


Демо                           Скачать пакет


 

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

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

Поиск

Вход

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

    Категории

    Заходи не жди