Анимированная пиксельная обработка картинок через 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

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

не в сети 4 дня

Apocalypse

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

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

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

Apocalypse

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

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

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

Старые

Новые

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

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

topka

Есть скрипт ( денег или баллов ? )
где можно потратить эти баллы или передать и заработать ?

Что-то такое видел на одном сайте ( сталкер сайт на юкозе было)

2024-03-06 21:31:46

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

Новый пост от installusd1 в теме «PPI Pay-Per-Install Best Advertising Network»

2024-03-25 09:45:25

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

Новый комментарий от пользователя паоа: «пкаор» в материале Ajax отправка комментариев в Wordpess без плагинов от Apocalypse

2024-03-27 20:08:09

Apocalypse

Сайт был восстановлен спустя несколько месяцев бездействия

2024-06-27 16:12:56

fapalnaapo

а Шо случилось за что блокировали

2024-06-30 20:46:10

Apocalypse

@fapalnaapo, банально хостинг не был уплачен

2024-07-14 08:27:24

Apocalypse

Всем привет. У кого как жизнь?

2024-07-30 19:50:15

fapalnaapo

давольно таки не плохо, очень приятно, мне очень нравится между прочем

2024-08-13 10:09:49

Apocalypse

Всем доброго дня

2024-11-07 12:00:10

Al-Sher

Всем привет

2024-11-09 17:57:18

......

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