body margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
color: #fff;
background-color: #9cf;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6af), to(#bdf));
background-image: -webkit-linear-gradient(#6af, #bdf);
background-image: -moz-linear-gradient(#6af, #bdf);
background-image: linear-gradient(#6af, #bdf);
>
::-webkit-scrollbar <
display: none;
>
h1 position: absolute;
margin: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
font: 10em «Codystar», sans-serif;
pointer-events: none;
Анимация падающий снег на открытке онлайн
-webkit-user-select: none;
user-select: none;
>
.snowflake position: absolute;
display: block;
position: absolute;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-image: -webkit-radial-gradient(
center,
circle farthest-corner,
rgba(255, 255, 255, 1) 40%,
rgba(255, 255, 255, 0) 100%
);
background-image: -moz-radial-gradient(
center,
circle farthest-corner,
rgba(255, 255, 255, 1) 40%,
rgba(255, 255, 255, 0) 100%
);
background-image: -ms-radial-gradient(
center,
circle farthest-corner,
rgba(255, 255, 255, 1) 40%,
rgba(255, 255, 255, 0) 100%
);
background-image: radial-gradient(
center,
circle farthest-corner,
rgba(255, 255, 255, 1) 40%,
rgba(255, 255, 255, 0) 100%
);
>
#snow position: absolute;
width: 100%;
height: 100%;
>
var Snowflake = (function() <
var flakes;
var flakesTotal = 250;
var wind = 0;
var mouseX;
var mouseY;
function Snowflake(size, x, y, vx, vy) this.size = size;
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.hit = false;
this.melt = false;
this.div = document.createElement(‘div’);
this.div.classList.add(‘snowflake’);
this.div.style.width = this.size + ‘px’;
this.div.style.height = this.size + ‘px’;
>
Snowflake.prototype.move = function() if (this.hit) if (Math.random() > 0.995) this.melt = true;
> else this.x += this.vx + Math.min(Math.max(wind, -10), 10);
this.y += this.vy;
>
// Wrap the snowflake to within the bounds of the page
if (this.x > window.innerWidth + this.size) this.x -= window.innerWidth + this.size;
>
if (this.x < -this.size) this.x += window.innerWidth + this.size;
>
if (this.y > window.innerHeight + this.size) this.x = Math.random() * window.innerWidth;
this.y -= window.innerHeight + this.size * 2;
this.melt = false;
>
var dx = mouseX — this.x;
var dy = mouseY — this.y;
this.hit = !this.melt this.y < mouseY dx * dx + dy * dy < 2400;
>;
Snowflake.prototype.draw = function() this.div.style.transform =
this.div.style.MozTransform =
this.div.style.webkitTransform =
‘translate3d(‘ + this.x + ‘px’ + ‘,’ + this.y + ‘px,0)’;
>;
function update() for (var i = flakes.length; i—; ) var flake = flakes[i];
flake.move();
flake.draw();
>
requestAnimationFrame(update);
>
Snowflake.init = function(container) flakes = [];
for (var i = flakesTotal; i—; ) var size = (Math.random() + 0.2) * 12 + 1;
var flake = new Snowflake(
size,
Math.random() * window.innerWidth,
Math.random() * window.innerHeight,
Math.random() — 0.5,
size * 0.3
);
container.appendChild(flake.div);
flakes.push(flake);
>
container.onmousemove = function(event) mouseX = event.clientX;
mouseY = event.clientY;
wind = (mouseX — window.innerWidth / 2) / window.innerWidth * 6;
>;
container.ontouchstart = function(event) mouseX = event.targetTouches[0].clientX;
mouseY = event.targetTouches[0].clientY;
event.preventDefault();
>;
window.ondeviceorientation = function(event) if (event) wind = event.gamma / 10;
>
>;
window.onload = function() setTimeout(function() Snowflake.init(document.getElementById(‘snow’));
>, 500);
>
Источник: zornet.ru
Скрипт падающего снега на сайт: js
К новому году хочется выделить как то свой сайт в этот праздник. Скрипт падающего снега создаст новогоднее настроение.
Для этого мы будем использовать js-скрипт, который легко подключается.
Сначала скачаем его (+ в комплект идёт три вида снежинок).
Затем загрузим js-файл и картинки к себе на сайт и подключаем скрипт перед закрывающим тегом .
Простые снежинки (без картинки)
(document).ready(function()< $(document).snowfall(); >);
Снежинки с картинкой
(document).ready(function()< $(document).snowfall(); >);
| flakeCount | Количество снежинок на странице (одновременно) |
| flakeColor | Цвет снежинок |
| minSize | Минимальный размер снежинки |
| maxSize | Максимальный размер снежинки |
| maxSpeed | Максимальная скорость |
| minSpeed | Минимальная скорость |
| round | Округление снежинок (значение true или false) |
| shadow | Тень снежинок (значение true или false) |
Пример вызова с параметрами
(document).ready(function()< $(document).snowfall(< flakeCount: 300, image :»assets/img/snow4.png», minSize: 10, maxSize:20, round: true, shadow: false, >); >);
Если у вас нет возможности загрузить скрипт на свой сайт, то подключитесь к нему удалённо.
Просто вставьте этот код и скрипт запустится.
$(document).snowfall();
Источник: daruse.ru
Как добавить падающий снег на сайте. Простой способ украсить сайт на Новый год.
В этой статье-инструкции я покажу, как можно добавить на сайт падающий снег. Это совсем не нагрузит ваш сайт, но сделает его для пользователей более уютным и дружелюбным. Лично мое мнение — этот небольшой штрих еще и может повлиять на продажи (в большую сторону, очевидно). АБ тесты я не проводил и не собираюсь, уж как-то слишком это было бы для снега, но перманентное ощущение праздника, которое создает скрипт на сайте, очень располагает.
Содержание
- Скрипт падающего снега
- Пример работы скрипта
- Не получается / не работает, что делать?
- Как работает на WordPress
Скрипт падающего снега
Многие из моих читателей знают, что этот блог преимущественно про WordPress, но иногда, как, например, в этот раз, я делюсь скриптами JS, шаблонами HTML и другими полезными штуками, имеющими косвенное отношение к нашей любимой CMS. В любом случае, то что мы сегодня делаем, можно применить и на WordPress, правда, не в привычном виде (как это всегда бывает с Custom JS в рамках WP). Итак, перейдем к скрипту.
Для того чтобы добавить снег на наш веб-сайт, потребуется
- Скачать этот архив;
- Распаковать его на вашем сайте;
- Подключить перед закрывающем тегом следующий код:
Обычные снежинки (круглые, без использования изображения):
script src=»js/snowfall.js»> script> script type=»text/javascript»> (document).ready(function() $(document).snowfall();
>); script>
Снежинки с картинкой
script src=»js/snowfall.js»> script> script type=»text/javascript»> (document).ready(function() $(document).snowfall(image :»assets/img/snow4.png», minSize: 10, maxSize:20>);
>); script>
Для второго варианта нужно отметить ряд параметров, которые можно настроить кастомно. Их можно найти в таблице ниже.
| flakeCount | Количество снежинок на странице (одновременно) |
| flakeColor | Цвет снежинок |
| minSize | Минимальный размер снежинки |
| maxSize | Максимальный размер снежинки |
| maxSpeed | Максимальная скорость |
| minSpeed | Минимальная скорость |
| round | Округление снежинок (значение true или false) |
| shadow | Тень снежинок (значение true или false) |
Разобраться с параметрами не сложно. Думаю, что можно сделать это, основываясь на примере ниже:
«text/javascript»>
(document).ready(function() $(document).snowfall(<
flakeCount: 300,
image :»assets/img/snow4.png»,
minSize: 20,
maxSize:30,
round: true,
shadow: false,
>);
>);
На всякий случай приведу пример: выделенный желтым параметр flakeCount — это количество снежинок на странице одновременно.
Пример работы скрипта
Рабочий скрипт до конца зимы можно наблюдать на этом сайте:
Не получается / не работает, что делать?
Попробуйте подключить JQuery. Пример подключения:
Если нет возможности, или желания разбираться с распаковкой архива скрипта снега, вы можете подключиться к скрипту удаленно. Для этого разместите на своем сайте внутри тега такой код:
$(document).snowfall();
Как работает на WordPress
Как-то я записывал видео по вставке кастомных JS скриптов. Самое время поделиться им еще раз:
Воспользуйтесь этой инструкцией, чтобы добавить скрипт на сайт. Если не получится, можно также попробовать добавить скрипт в шаблон футера (не рекомендуется, но на тестах все работало).
В завершении хочется добавить, что скрипт OpenSource’сный. Никакой поддержки, гарантии, или связи с автором нет. JS минифицирован, копаться глубоко в нем я не стал. Но на пару своих сайтов я поставил и проблем, тормозов, или уязвимостей не нашел.
Источник: yrokiwp.ru