Автор

29 09.2014
Эффект осколков для изображения с помощью JS

Эффект осколков для изображения с помощью JS


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

 

ДЕМО
ИСХОДНИКИ

 

Эпицентром дробления стекла будет место нажатия кнопкой мыши, именно от этой точки будет происходить процесс разрушения и волна осколков.

Шаг 1. JS

Так как вывод изображения предусматривает только строчку с параметром container, то весь процесс дробления будет реализован с помощью функций js:


const TWO_PI = Math.PI * 2;
var images = [],
imageIndex = 0;
var image,
imageWidth = 768,
imageHeight = 485;
var vertices = [],
indices = [],
fragments = [];
var container = document.getElementById('container');
var clickPosition = [imageWidth * 0.5, imageHeight * 0.5];
window.onload = function() {
TweenMax.set(container, {perspective:500});
// images from reddit/r/wallpapers
var urls = [
'https:175711/crayon.jpg',
'https:175711/spaceship.jpg',
'https:175711/dj.jpg',
'https:175711/chicken.jpg'
],
image,
loaded = 0;
images[0] = image = new Image();
image.onload = function() {
if (++loaded === 1) {
imagesLoaded();
for (var i = 1; i < 4; i++) {
images[i] = image = new Image();
image.src = urls[i];
}
}
};
image.src = urls[0];
};
function imagesLoaded() {
placeImage(false);
triangulate();
shatter();
}
function placeImage(transitionIn) {
image = images[imageIndex];
if (++imageIndex === images.length) imageIndex = 0;
image.addEventListener('click', imageClickHandler);
container.appendChild(image);
if (transitionIn !== false) {
TweenMax.fromTo(image, 0.75, {y:-1000}, {y:0, ease:Back.easeOut});
}
}
function imageClickHandler(event) {
var box = image.getBoundingClientRect(),
top = box.top,
left = box.left;
clickPosition[0] = event.clientX - left;
clickPosition[1] = event.clientY - top;
triangulate();
shatter();
}
function triangulate() {
var rings = [
{r:50, c:12},
{r:150, c:12},
{r:300, c:12},
{r:1200, c:12} // very large in case of corner clicks
],
x,
y,
centerX = clickPosition[0],
centerY = clickPosition[1];
vertices.push([centerX, centerY]);
rings.forEach(function(ring) {
var radius = ring.r,
count = ring.c,
variance = radius * 0.25;
for (var i = 0; i < count; i++) {
x = Math.cos((i / count) * TWO_PI) * radius + centerX + randomRange(-variance, variance);
y = Math.sin((i / count) * TWO_PI) * radius + centerY + randomRange(-variance, variance);
vertices.push([x, y]);
}
});
vertices.forEach(function(v) {
v[0] = clamp(v[0], 0, imageWidth);
v[1] = clamp(v[1], 0, imageHeight);
});
indices = Delaunay.triangulate(vertices);
}
function shatter() {
var p0, p1, p2,
fragment;
var tl0 = new TimelineMax({onComplete:shatterCompleteHandler});
for (var i = 0; i < indices.length; i += 3) {
p0 = vertices[indices[i + 0]];
p1 = vertices[indices[i + 1]];
p2 = vertices[indices[i + 2]];
fragment = new Fragment(p0, p1, p2);
var dx = fragment.centroid[0] - clickPosition[0],
dy = fragment.centroid[1] - clickPosition[1],
d = Math.sqrt(dx * dx + dy * dy),
rx = 30 * sign(dy),
ry = 90 * -sign(dx),
delay = d * 0.003 * randomRange(0.9, 1.1);
fragment.canvas.style.zIndex = Math.floor(d).toString();
var tl1 = new TimelineMax();
tl1.to(fragment.canvas, 1, {
z:-500,
rotationX:rx,
rotationY:ry,
ease:Cubic.easeIn
});
tl1.to(fragment.canvas, 0.4,{alpha:0}, 0.6);
tl0.insert(tl1, delay);
fragments.push(fragment);
container.appendChild(fragment.canvas);
}
container.removeChild(image);
image.removeEventListener('click', imageClickHandler);
}
function shatterCompleteHandler() {
fragments.forEach(function(f) {
container.removeChild(f.canvas);
});
fragments.length = 0;
vertices.length = 0;
indices.length = 0;
placeImage();
}
function randomRange(min, max) {
return min + (max - min) * Math.random();
}
function clamp(x, min, max) {
return x < min ? min : (x > max ? max : x);
}
function sign(x) {
return x < 0 ? -1 : 1;
}
Fragment = function(v0, v1, v2) {
this.v0 = v0;
this.v1 = v1;
this.v2 = v2;
this.computeBoundingBox();
this.computeCentroid();
this.createCanvas();
this.clip();
};
Fragment.prototype = {
computeBoundingBox:function() {
var xMin = Math.min(this.v0[0], this.v1[0], this.v2[0]),
xMax = Math.max(this.v0[0], this.v1[0], this.v2[0]),
yMin = Math.min(this.v0[1], this.v1[1], this.v2[1]),
yMax = Math.max(this.v0[1], this.v1[1], this.v2[1]);
this.box ={
x:xMin,
y:yMin,
w:xMax - xMin,
h:yMax - yMin
};
},
computeCentroid:function() {
var x = (this.v0[0] + this.v1[0] + this.v2[0]) / 3,
y = (this.v0[1] + this.v1[1] + this.v2[1]) / 3;
this.centroid = [x, y];
},
createCanvas:function() {
this.canvas = document.createElement('canvas');
this.canvas.width = this.box.w;
this.canvas.height = this.box.h;
this.canvas.style.width = this.box.w + 'px';
this.canvas.style.height = this.box.h + 'px';
this.canvas.style.left = this.box.x + 'px';
this.canvas.style.top = this.box.y + 'px';
this.ctx = this.canvas.getContext('2d');
},
clip:function() {
this.ctx.translate(-this.box.x, -this.box.y);
this.ctx.beginPath();
this.ctx.moveTo(this.v0[0], this.v0[1]);
this.ctx.lineTo(this.v1[0], this.v1[1]);
this.ctx.lineTo(this.v2[0], this.v2[1]);
this.ctx.closePath();
this.ctx.clip();
this.ctx.drawImage(image, 0, 0);
}
};

Вот и все. Готово!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеJS

10 06.2017
Эффект осколков для изображения с помощью JS

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


30 04.2013
Эффект осколков для изображения с помощью JS

Продолжаем рассматривать интересные галереи для сайта. В сегодняшнем уроке мы рассмотрим весьма интересную вещь, а именно технологию drag-and-drop ("перетащи-и-брось"), добавив к ней плагин fancybox, который позволит открывать изображение в оригинальный размер, в модальном окне. Смотрится достаточно красиво, весьма заинтересовывая пользователей своей оригинальностью и свободой действий, а именно, перетаскивание изображений по холсту. Вот что у нас с этого вышло..


28 04.2013
Эффект осколков для изображения с помощью JS

Ранее я уже писал о подобном скрипте Highlight.js в статье «Подсветка синтаксиса в примерах кода» который я использую на своем сайте, в этой статье речь пойдет о подсветке синтаксиса кода на SyntaxHighlighter, который позволяет реализовать красивую подсветку синтаксиса на любом сайте. Данный скрипт поддерживает множество языков программирования, таких как, например, PHP, C++, JavaScript, C# и многие другие. В рамках данной статьи мы подробно рассмотрим процесс установки SyntaxHighlighter на сайт, а затем перейдем к подробной инструкции по использованию скрипта.


23 04.2013
Эффект осколков для изображения с помощью JS

Технология CSS3 открыла нам бесчисленные возможности, и сегодня мы хотим представить вам руководство по разработке привлекательных страниц, предназначенных для оповещения посетителей о скором открытии веб-сайта, а также о создании заставок на сайт, реализованных посредством анимации в CSS3. Разрабатывая сайт необходимо создать красивую заглушку, чтобы пользователи могли подписаться на новости когда откроется сайт. В данном уроке мы рассмотрим как это креативно осуществить, не затрачивая при этом особых усилий.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close