Анимированная пиксельная обработка картинок через TweenMax

Разместил: Apocalypse
22 июня 2016

Скачать Очень интересный эффект из анимированных пикселей, который можно применить к любой картинке Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

.tiles {
width: 400px;
height: 600px;
margin: auto;
}

.tile {
width: 50px;
height: 50px;
float: left;
}

.tiles {

width: 400px;

height: 600px;

margin: auto;

}

.tile {

width: 50px;

height: 50px;

float: left;

}

2#: HTML и Яваскрипт коды примера:

<div class="tiles"></div>
<script src="/js/TweenMax.min.js"></script>
<script>
var image = '/img/1291154380_001rd08d.jpg';
var tileWrapper = document.querySelector('.tiles');
var rows = 12;
var cols = 8;
var tiles = createTiles(rows, cols, tileWrapper);
var maxOpacities = [
[0.0, 0.2, 0.4, 0.6, 0.6, 0.4, 0.2, 0.0],
[0.2, 0.4, 0.8, 1.0, 1.0, 0.6, 0.4, 0.2],
[0.2, 0.4, 1.0, 1.0, 1.0, 0.8, 0.6, 0.2],
[0.2, 0.6, 1.0, 1.0, 1.0, 1.0, 0.6, 0.2],
[0.2, 0.6, 1.0, 1.0, 1.0, 1.0, 0.6, 0.2],
[0.2, 0.6, 1.0, 1.0, 1.0, 1.0, 0.6, 0.2],
[0.2, 0.4, 0.8, 1.0, 1.0, 0.8, 0.6, 0.2],
[0.2, 0.4, 0.6, 0.8, 0.8, 0.6, 0.4, 0.1],
[0.1, 0.2, 0.4, 0.4, 0.4, 0.4, 0.2, 0.1],
[0.0, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.1],
[0.0, 0.1, 0.1, 0.1, 0.1, 0.1, 0.0, 0.0],
[0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
];
animateTiles(tiles);

function animateTiles(tiles) {
var timelines = [];
for (var i = 0; i < tiles.length; i++) {
var row = Math.floor(i / 8);
var col = i % 8;
var variance = 0.4;
var maxOpacity = maxOpacities[row][col];
var minOpacity = Math.max(0, maxOpacity - variance);
var duration = random(0.75, 1);
if (maxOpacity === 0) {
TweenMax.set(tiles[i], {
opacity: 0
});
continue;
}
var tween = TweenMax.fromTo(tiles[i], duration, {
opacity: minOpacity
}, {
opacity: maxOpacity,
ease: Sine.easeInOut
});
timelines[i] = new TimelineMax({
repeat: -1,
yoyo: true
});
timelines[i].add(tween);
var start = Math.random() * duration;
timelines[i].seek(start);
}
}

function createTiles(rows, cols, tileWrapper) {
var tiles = [];
for (var row = 0; row < rows; row++) {
for (var col = 0; col < cols; col++) {
var tile = document.createElement('div');
tile.className = 'tile';
tile.style.backgroundImage = 'url(' + image + ')';
tile.style.backgroundPosition = (-col * 50) + 'px ' + (-row * 50) + 'px';
tiles.push(tile);
tileWrapper.appendChild(tile);
}
}
return tiles;
}

function random(min, max) {
return Math.random() * (max - min + 1) + min;
}
</script>

var image = '/img/1291154380_001rd08d.jpg';

var tileWrapper = document.querySelector('.tiles');

var rows = 12;

var cols = 8;

var tiles = createTiles(rows, cols, tileWrapper);

var maxOpacities = [

[0.0, 0.2, 0.4, 0.6, 0.6, 0.4, 0.2, 0.0],

[0.2, 0.4, 0.8, 1.0, 1.0, 0.6, 0.4, 0.2],

[0.2, 0.4, 1.0, 1.0, 1.0, 0.8, 0.6, 0.2],

[0.2, 0.6, 1.0, 1.0, 1.0, 1.0, 0.6, 0.2],

[0.2, 0.4, 0.8, 1.0, 1.0, 0.8, 0.6, 0.2],

[0.2, 0.4, 0.6, 0.8, 0.8, 0.6, 0.4, 0.1],

[0.1, 0.2, 0.4, 0.4, 0.4, 0.4, 0.2, 0.1],

[0.0, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.1],

[0.0, 0.1, 0.1, 0.1, 0.1, 0.1, 0.0, 0.0],

[0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]

];

animateTiles(tiles);

function animateTiles(tiles) {

var timelines = [];

for (var i = 0; i < tiles.length; i++) {

var row = Math.floor(i / 8);

var col = i % 8;

var variance = 0.4;

var maxOpacity = maxOpacities[row][col];

var minOpacity = Math.max(0, maxOpacity - variance);

var duration = random(0.75, 1);

if (maxOpacity === 0) {

TweenMax.set(tiles[i], {

opacity: 0

});

continue;

}

var tween = TweenMax.fromTo(tiles[i], duration, {

opacity: minOpacity

}, {

opacity: maxOpacity,

ease: Sine.easeInOut

});

timelines[i] = new TimelineMax({

repeat: -1,

yoyo: true

});

timelines[i].add(tween);

var start = Math.random() * duration;

timelines[i].seek(start);

}

function createTiles(rows, cols, tileWrapper) {

var tiles = [];

for (var row = 0; row < rows; row++) {

for (var col = 0; col < cols; col++) {

var tile = document.createElement('div');

tile.className = 'tile';

tile.style.backgroundImage = 'url(' + image + ')';

tile.style.backgroundPosition = (-col * 50) + 'px ' + (-row * 50) + 'px';

tiles.push(tile);

tileWrapper.appendChild(tile);

}

return tiles;

}

function random(min, max) {

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

}

</script>

Осталось лишь залить JS файл из прикреплённого архива в папку js и картинку в папку img

Автор публикации

не в сети 3 месяца

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1096Регистрация: 27-08-2018

Метки: Javascript TweenMax Анимированная Картинки Обработка Пиксельная

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

Всевидящее око

Новый комментарий от пользователя Эдуард: «Забыл добавить. Снег появляется то в футере (когда ставил перед закрывающим тегом body), то наоборот почему-то в самом верху (причем сам блог сдвигался вниз), когда ставил его после открывающего тега, как было указано в статье.» в материале Приятный Новогодний снежок на HTML5 Canvas

2024-12-29 16:26:03

VVL99

Всех с новым годом!

2025-01-02 17:46:18

Всевидящее око

Новый комментарий от пользователя Acıbadem su kaçak tespiti: «Acıbadem su kaçak tespiti Kadıköy su kaçağı tespiti: Kadıköy’deki su sızıntılarında noktasal tespit için yanınızdayız. https://www.grand-indonesia.com/author/kacak/» в материале Фон из анимированных самолётов на CSS3

2025-01-02 18:25:49

Всевидящее око

Новый комментарий от пользователя elavil for anxiety reviews: «elavil for anxiety reviews

elavil for anxiety reviews» в материале Крутой анимированный индикатор загрузки в виде снежка на CSS3

2025-01-03 19:51:39

Всевидящее око

Новый комментарий от пользователя how long can you take elavil: «how long can you take elavil

how long can you take elavil» в материале След за курсором из частиц на HTML5 Canvas

2025-01-05 15:00:13

stalker1313

Привет. Может кто-нибудь знает почему не получается зайти на сайт playstation через vpn и как это исправить? Без vpn захожу на сайт, но не могу зарегать акк.
Ошибка:
Страница недоступна
Сайт playstation.com не отправил данных.
ERR_EMPTY_RESPONSE

2025-01-08 18:00:15

Al-Sher

@stalker1313, Привет. Возможно впн блочит их сайт. Попробовал со своим личным впном - сайт открывается

2025-01-08 19:56:24

stalker1313

@Al-Sher, бесплатный, хороший vpn посоветуете?

2025-01-08 22:01:35

stalker1313

Можно как-то сохранить все статьи с сайта wp в отдельные вордовские документы?

2025-01-09 19:50:03

Al-Sher

@stalker1313, Увы, я уже давно пользуюсь только личным впн на своей впске)

2025-01-10 20:41:42

......

Для публикации сообщений в чате необходимо авторизоваться