Пиксельный снег с параллакс эффектом на CSS3 и HTML5 Canvas

Разместил: Apocalypse
19 ноября 2018

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

.snow {
-webkit-animation-name: move;
animation-name: move;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
height: 100vh;
position: absolute;
left: 0;
top: 0;
width: 100vw;
z-index: -1;
}
.snow:nth-of-type(1) {
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
.snow:nth-of-type(2) {
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
.snow:nth-of-type(3) {
-webkit-animation-duration: 9s;
animation-duration: 9s;
}
@-webkit-keyframes move {
from {
background-position: 0 0;
}
to {
background-position: 0 100vh;
}
}
@keyframes move {
from {
background-position: 0 0;
}
to {
background-position: 0 100vh;
}
}

.snow {

-webkit-animation-name: move;

animation-name: move;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

height: 100vh;

position: absolute;

left: 0;

top: 0;

width: 100vw;

z-index: -1;

}

.snow:nth-of-type(1) {

-webkit-animation-duration: 4s;

animation-duration: 4s;

}

.snow:nth-of-type(2) {

-webkit-animation-duration: 4s;

animation-duration: 4s;

}

.snow:nth-of-type(3) {

-webkit-animation-duration: 9s;

animation-duration: 9s;

}

@-webkit-keyframes move {

from {

background-position: 0 0;

}

to {

background-position: 0 100vh;

}

@keyframes move {

from {

background-position: 0 0;

}

to {

background-position: 0 100vh;

}

2#: Следующий код поместите в любое место на странице между тегами body и /body:

<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<script >
var generateCanvasImageUrl = function generateCanvasImageUrl() {
var _window = window,
innerHeight = _window.innerHeight,
innerWidth = _window.innerWidth;
var pixels = innerHeight / 1 * (innerWidth / 1);
var $canvas = document.createElement('canvas');
var context = $canvas.getContext('2d');
$canvas.height = innerHeight / 1;
$canvas.width = innerWidth / 1;
for (var pixel = 0; pixel < pixels; pixel++) {
var x = pixel % innerWidth;
var y = Math.floor(pixel / innerWidth);
var size = Math.floor(Math.random() * 3 + 1);
context.fillStyle = '#fff';
if (Math.random() > 0.9999) context.fillRect(x, y, size, size);
}
return $canvas.toDataURL();
};

var $snowSlides = document.querySelectorAll('.snow');
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = $snowSlides[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var $slide = _step.value;
$slide.style.background = 'url(' + generateCanvasImageUrl() + ')';
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
</script>

var generateCanvasImageUrl = function generateCanvasImageUrl() {

var _window = window,

innerHeight = _window.innerHeight,

innerWidth = _window.innerWidth;

var pixels = innerHeight / 1 * (innerWidth / 1);

var $canvas = document.createElement('canvas');

var context = $canvas.getContext('2d');

$canvas.height = innerHeight / 1;

$canvas.width = innerWidth / 1;

for (var pixel = 0; pixel < pixels; pixel++) {

var x = pixel % innerWidth;

var y = Math.floor(pixel / innerWidth);

var size = Math.floor(Math.random() * 3 + 1);

context.fillStyle = '#fff';

if (Math.random() > 0.9999) context.fillRect(x, y, size, size);

}

return $canvas.toDataURL();

};

var $snowSlides = document.querySelectorAll('.snow');

var _iteratorNormalCompletion = true;

var _didIteratorError = false;

var _iteratorError = undefined;

try {

for (var _iterator = $snowSlides[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {

var $slide = _step.value;

$slide.style.background = 'url(' + generateCanvasImageUrl() + ')';

}

} catch (err) {

_didIteratorError = true;

_iteratorError = err;

} finally {

try {

if (!_iteratorNormalCompletion && _iterator.return) {

_iterator.return();

}

} finally {

if (_didIteratorError) {

throw _iteratorError;

}

</script>

Метки: New Year Parallax Pixel Snow Зима Новый год Параллакс Пиксели Снег

Apocalypse

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

Читайте также:

Вы точно не робот?

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

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

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

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

Новый комментарий от пользователя Apocalypse: «Внёс изменения в скрипт. Теперь сообщения добавляются от группы "Пользователи". Чтобы отправка заработала, изучи новый пункт 5 в описании к материалу. Прикреплённый архив также был перезалит» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-12 14:28:57

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

Новый комментарий от пользователя Apocalypse: «Скрипт доработан. Архив перезалит. В описание внесён новый 5-й пункт, исправляющий проблему с отправкой у группы "Пользователи"» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-12 14:30:05

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

Новый комментарий от пользователя topka: «Ещё заметил что что там кнопка смайлики не реагирует, не открывается модаль окно.😀
Спасибо за исправления.» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-12 15:23:20

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

Новый комментарий от пользователя Apocalypse: «Я щас немного поломал голову с PDA версией. Там хоть и есть оператор, отвечающий за модер панель, но он не работает. Хотел использовать родной скрипт удаления материалов от uCoz, так он работает через ID материала, а в PDA версии даже нет нужного оператора 😐» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-12 18:30:51

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

Новый комментарий от пользователя Apocalypse: «Пожалуйста!» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-12 18:31:02

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

Новый комментарий от пользователя Apocalypse: «Переписал часть скрипта и смог победить. Теперь работает как редактирование, так и удаление материалов как в обычной, так и в PDA версии» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-12 20:27:24

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

Новый комментарий от пользователя topka: «Работает) еще раз спасибо вам =)

А можно ли как-то сделать так чтобы каждый автор своего материала смог удалить свои комментарии или редактировать, а то только админ или модер может) это очень большой минус» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-12 21:52:40

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

Новый комментарий от пользователя Apocalypse: «К сожалению, такие права не позволяет выдать система uCoz... Для Гостевой книги нет возможности редактирования и удаления сообщений для обычных пользователей. На то она и Гостевая книга» в материале Онлайн чат через модуль «Гостевая книга» by uCodes для сайтов на uCoz [Исправления от IMAPO в 2023 году]

2023-03-13 11:00:12

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

Новый комментарий от пользователя костя: «не работает, как и всё остальное впринципе» в материале Призрачный эффект от курсора на HTML5 Canvas

2023-03-25 21:05:11

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

Новый комментарий от пользователя Apocalypse: «Что значит всё остальное? Этот материал проверен и работает. Смотрите ДЕМО» в материале Призрачный эффект от курсора на HTML5 Canvas

2023-03-25 21:12:52

......

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

Пиксельный снег с параллакс эффектом на CSS3 и HTML5 Canvas

Читайте также:

Посетители сайта

Панель управления

Март 2023
Пн	Вт	Ср	Чт	Пт	Сб	Вс
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Пиксельный снег с параллакс эффектом на CSS3 и HTML5 Canvas

Читайте также:

Новогодний фейерверк на CSS3

Классный мелкий снежок на HTML5 Canvas

Крутой анимированный индикатор загрузки в виде снежка на CSS3

Посетители сайта

Панель управления