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

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

Всегда в теме

Статистика

Онлайн всего: 3

Гостей: 3

Пользователей: 0

Свежий софт

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:51

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

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

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

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

Шаг 1. HTML

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

index.html

<html>

<head>

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

</head>

<body>

</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();

}

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

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

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