|
Простая и красивая анимация CSS снежинок
|
|
| Kosten | Суббота, 23 Ноября 2019, 20:42 | Сообщение 1 |
| Вашему вниманию отличная подборка снежинок, или падающего снега, который можно поставить на страницы сайта, и этим украсить или сделать тематическую атмосферу. Здесь представлена анимация CSS, загружающей анимации на CSS3, где вы самостоятельно можете задействовать выхлоп снега. А точнее задать скорость или создать красивые снежинки, хоть изначально они идут в оригинальном виде.
Но для себя считаю, что в наборе превалирует тот момент, что в большинстве создано на чистом CSS. Так как мы ставим на время такую композицию, но и здесь не нужно, чтоб такой эффект сильно нагружал страницы сайта, что при чистом CSS это буде мало возможно, но смотреться красиво.
HTML
Код <div id="krasivu-snezhok"></div>
CSS
Код #krasivu-snezhok{
background: none;
font-family: Androgyne;
background-image: url('http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zorner-ru/sden.png'), url('http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zorner-ru/s2.png'), url('http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zorner-ru/s3.png');
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index:1;
-webkit-animation: snow 10s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
На этом установка завершена.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Суббота, 23 Ноября 2019, 20:45 | Сообщение 2 |
|
| Анимация падающего снега
See the Pen
CSS3 Snow by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Суббота, 23 Ноября 2019, 20:49 | Сообщение 3 |
|
| Скрипт падающих снежинок
See the Pen
snow by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Суббота, 23 Ноября 2019, 20:55 | Сообщение 4 |
|
| Основной элемент HTML5 , который используется для создания графики различных видов и масштаба на веб - странице, набирают все большую популярность в настоящее время. Похоже, что веб-разработчики поверили в эту технологию, даже несмотря на то, что она страдает от отсутствия надлежащей совместимости браузера.
Стремясь раскрыть различные возможности этого мощного элемента, художники придумывают довольно замечательные и иногда неожиданные результаты, которые бросаются в глаза с первых секунд. Одним из таких успешных экспериментов, которые нашли свое практическое применение в дизайне сайтов, является анимация частиц.
HTML
Код <body style="margin: 0; background: #222; overflow: hidden;">
JS
Код let snowmax = 40,
snowcolor = new Array("#aaaacc", "#ddddff", "#ccccdd", "#f3f3f3", "#f0ffff"),
snowtype = new Array("Arial Black", "Arial Narrow", "Times", "Comic Sans MS"),
snowletter = "*",
sinkspeed = 0.5,
snowmaxsize = 30,
snowminsize = 8,
snow = new Array(),
marginbottom,
marginright,
timer,
i_snow = 0,
x_mv = new Array(),
crds = new Array(),
lftrght = new Array();
function randommaker(range) {
rand = Math.floor(range * Math.random());
return rand;
}
function initsnow() {
marginbottom = window.innerHeight;
marginright = window.innerWidth;
let snowsizerange = snowmaxsize - snowminsize;
for (i = 0; i <= snowmax; i++) {
crds[i] = 0;
lftrght[i] = Math.random() * 15;
x_mv[i] = 0.03 + Math.random() / 10;
snow[i] = document.getElementById("s" + i);
snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)];
snow[i].size = randommaker(snowsizerange) + snowminsize;
snow[i].fontSize = snow[i].size;
snow[i].style.color = snowcolor[randommaker(snowcolor.length)];
snow[i].sink = sinkspeed * snow[i].size / 5;
snow[i].posx = randommaker(marginright - snow[i].size);
snow[i].posy = randommaker(
2 * marginbottom - marginbottom - 2 * snow[i].size
);
snow[i].style.left = snow[i].posx;
snow[i].style.top = snow[i].posy;
}
movesnow();
}
function movesnow() {
for (i = 0; i <= snowmax; i++) {
crds[i] += x_mv[i];
snow[i].posy += snow[i].sink;
snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]) + "px";
snow[i].style.top = snow[i].posy + "px";
if (
snow[i].posy >= marginbottom - 2 * snow[i].size ||
parseInt(snow[i].style.left) > marginright - 3 * lftrght[i]
) {
snow[i].posx = randommaker(marginright - snow[i].size);
snow[i].posy = 0;
}
}
let timer = setTimeout("movesnow()", 50);
}
for (i = 0; i <= snowmax; i++) {
document.write(
"<span id='s" +
i +
"'style='position: absolute; top: -" +
snowmaxsize +
"'>" +
snowletter +
"</span>"
);
}
initsnow();
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Суббота, 23 Ноября 2019, 20:58 | Сообщение 5 |
|
| Страница 404 с поиском и обильным снегопадом
See the Pen
Fargo 404 by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Суббота, 23 Ноября 2019, 21:03 | Сообщение 6 |
|
| Используя только обычные инструменты и, конечно, немного магии Javascript, примитивные точки на экране начинают хаотично двигаться, подпрыгивать, танцевать, реагировать на гравитацию, формировать различные формы и даже взаимодействовать с пользователями.
Скрипт падающего снега для сайта и блога
See the Pen
Snowflakes by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Суббота, 23 Ноября 2019, 21:06 | Сообщение 7 |
|
| Разве они не выдающиеся? В настоящее время эта функция находится в тренде, так почему бы не познакомиться с дюжиной решений, доступных на Codepen.
Динамическая анимация частиц фона
See the Pen
Dynamic Particles Background Animation by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Суббота, 23 Ноября 2019, 21:11 | Сообщение 8 |
|
| Представьте, как выглядит зимняя страна чудес. Теперь нажмите на этот инструмент и наслаждайтесь вашими фантазиями.
Снежки
See the Pen
JavaScript Snowflakes by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Суббота, 23 Ноября 2019, 21:19 | Сообщение 9 |
|
| Показывая шикарную типографику и снежную анимацию, этот инструмент удовлетворит самые требовательные вкусы.
See the Pen
snowflakes - let it snow... by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
