Анимация фона с помощью изображения на JS

Пример:

Анимация в блоке реагирует на движение курсора.

Для более наглядного рассмотрения эффекта, я сделал несколько вариантов:

HTML:

<canvas id="bg-img"></canvas>

1	<canvas id="bg-img"></canvas>

CSS:

#bg-img {
	background: url(background.jpg);
	background-position: center center;
	background-size: cover;
	width: 100%;
}

#bg-img {

background: url(background.jpg);

background-position: center center;

background-size: cover;

width: 100%;

}

JS:

Подключаем библиотеку TweenMax.min.js и скрипт самой анимации:

var n = 30,
speed = 15,
startSize = rand(200,400),
c = document.getElementById("bg-img"),
ctx = c.getContext("2d"),
mousePos = {x:"", y:""},
img = new Image(),
particles = [],
particleNumber = 0,
Particle = function(index) {
	this.index = index;
	this.dur = (100-rand(9, 90))/speed;
	this.draw = function() {
        ctx.translate( this.x, this.y );
        ctx.globalAlpha = this.alpha;
        ctx.globalCompositeOperation = 'lighter';
        if (index%2==0) ctx.globalCompositeOperation = 'xor';
        ctx.drawImage(img, -this.size/2, -this.size/2, this.size, this.size);
        ctx.translate( -this.x, -this.y );
	}
};
c.onmousemove = function(e){ mousePos = { x:e.clientX - c.getBoundingClientRect().left, y:e.clientY - c.getBoundingClientRect().top }; }
c.onmouseleave = function(e){ mousePos = {x:"", y:""} }
function setParticle(p, firstRun) {
	var _x = cw*rand(0,1), _y = ch*rand(0,1), _s = startSize;
	if (rand(0,1)>0.3 && mousePos.x!=""){
		_x = mousePos.x;
		_y = mousePos.y;
		_s = _s/10;
	}
	var _tl = new TimelineMax()
	.fromTo(p, p.dur, {
		x:_x,
		y:_y,
		size:_s,
		alpha:0
		},{
		size:'+='+String(rand(200,400)),
		bezier:[{alpha:rand(0.15,0.65)},{alpha:0}],
		ease:Power1.easeOut,
		onComplete:function(){ setParticle(p); }
	});
	if (firstRun) _tl.seek(p.dur*rand()); 
}
TweenMax.ticker.addEventListener("tick", function(){
	ctx.clearRect(0, 0, cw, ch);
	for (var i=0; i<n; i++) particles[i].draw();
});
window.addEventListener('resize', doResize)
function doResize() {
	particleNumber = 0;  
	cw = (c.width = c.offsetWidth);
	ch = (c.height = 500);
	for (var i=0; i<n; i++) {
		TweenMax.killTweensOf(particles[i]);
		setParticle(particles[i], true);
	}
	TweenMax.fromTo(c, 0.3, {alpha:0},{alpha:1, ease:Power3.easeInOut});
}
for (var i=0; i<n; i++) particles.push(new Particle(i));
doResize();
function rand(min, max) {
	(min) ? min=min : min=0;
	(max) ? max=max : max=1;
	return min + (max-min)*Math.random();
}
img.src = "image.png";

var n = 30,

speed = 15,

startSize = rand(200,400),

c = document.getElementById("bg-img"),

ctx = c.getContext("2d"),

mousePos = {x:"", y:""},

img = new Image(),

particles = [],

particleNumber = 0,

Particle = function(index) {

this.index = index;

this.dur = (100-rand(9, 90))/speed;

this.draw = function() {

ctx.translate( this.x, this.y );

ctx.globalAlpha = this.alpha;

ctx.globalCompositeOperation = 'lighter';

if (index%2==0) ctx.globalCompositeOperation = 'xor';

ctx.drawImage(img, -this.size/2, -this.size/2, this.size, this.size);

ctx.translate( -this.x, -this.y );

}

};

c.onmousemove = function(e){ mousePos = { x:e.clientX - c.getBoundingClientRect().left, y:e.clientY - c.getBoundingClientRect().top }; }

c.onmouseleave = function(e){ mousePos = {x:"", y:""} }

function setParticle(p, firstRun) {

var _x = cw*rand(0,1), _y = ch*rand(0,1), _s = startSize;

if (rand(0,1)>0.3 && mousePos.x!=""){

_x = mousePos.x;

_y = mousePos.y;

_s = _s/10;

}

var _tl = new TimelineMax()

.fromTo(p, p.dur, {

x:_x,

y:_y,

size:_s,

alpha:0

},{

size:'+='+String(rand(200,400)),

bezier:[{alpha:rand(0.15,0.65)},{alpha:0}],

ease:Power1.easeOut,

onComplete:function(){ setParticle(p); }

});

if (firstRun) _tl.seek(p.dur*rand());

}

TweenMax.ticker.addEventListener("tick", function(){

ctx.clearRect(0, 0, cw, ch);

for (var i=0; i<n; i++) particles[i].draw();

});

window.addEventListener('resize', doResize)

function doResize() {

particleNumber = 0;

cw = (c.width = c.offsetWidth);

ch = (c.height = 500);

for (var i=0; i<n; i++) {

TweenMax.killTweensOf(particles[i]);

setParticle(particles[i], true);

}

TweenMax.fromTo(c, 0.3, {alpha:0},{alpha:1, ease:Power3.easeInOut});

}

for (var i=0; i<n; i++) particles.push(new Particle(i));

doResize();

function rand(min, max) {

(min) ? min=min : min=0;

(max) ? max=max : max=1;

return min + (max-min)*Math.random();

}

img.src = "image.png";

Где:

n - Кол-во графических элементов

speed - Их скорость.

startSize - Их размер от и до.

ch - Высота блока

cw - Ширина блока.

img.src - Изображение, которое используется в анимации

Фон канваса задается через CSS

Найдено на codepen.io у пользователя Tom Miller

Пример:

HTML:

CSS:

JS:

Где:

Смотрите также:

Добавить комментарий: