• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Простая и красивая анимация CSS снежинок (Создаем эффект падающего снега на веб-странице на CSS)
Простая и красивая анимация CSS снежинок
Kosten
Дата: Суббота, 2019-11-23, 20:42 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25282
Награды: 58


Вашему вниманию отличная подборка снежинок, или падающего снега, который можно поставить на страницы сайта, и этим украсить или сделать тематическую атмосферу. Здесь представлена анимация 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;}
}

На этом установка завершена.

Демонстрация
Прикрепления: 6663028.png(16.4 Kb) · css3-snow-anima.zip(2.6 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2019-11-23, 20:45 | Сообщение 2
Оффлайн
Администраторы
Сообщений:25282
Награды: 58


Анимация падающего снега


See the Pen
CSS3 Snow
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Суббота, 2019-11-23, 20:49 | Сообщение 3
Оффлайн
Администраторы
Сообщений:25282
Награды: 58


Скрипт падающих снежинок


See the Pen
snow
by Kocsten (@kocsten)
on CodePen.


Прикрепления: snow.zip(4.0 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2019-11-23, 20:55 | Сообщение 4
Оффлайн
Администраторы
Сообщений:25282
Награды: 58


Основной элемент 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();


Демонстрация
Прикрепления: 0355409.png(4.1 Kb) · 1276527.zip(3.4 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2019-11-23, 20:58 | Сообщение 5
Оффлайн
Администраторы
Сообщений:25282
Награды: 58


Страница 404 с поиском и обильным снегопадом


See the Pen
Fargo 404
by Kocsten (@kocsten)
on CodePen.


Прикрепления: fargo-404.zip(13.0 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2019-11-23, 21:03 | Сообщение 6
Оффлайн
Администраторы
Сообщений:25282
Награды: 58


Используя только обычные инструменты и, конечно, немного магии Javascript, примитивные точки на экране начинают хаотично двигаться, подпрыгивать, танцевать, реагировать на гравитацию, формировать различные формы и даже взаимодействовать с пользователями.

Скрипт падающего снега для сайта и блога


See the Pen
Snowflakes
by Kocsten (@kocsten)
on CodePen.


Прикрепления: snowflakes.zip(4.3 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2019-11-23, 21:06 | Сообщение 7
Оффлайн
Администраторы
Сообщений:25282
Награды: 58


Разве они не выдающиеся? В настоящее время эта функция находится в тренде, так почему бы не познакомиться с дюжиной решений, доступных на Codepen.

Динамическая анимация частиц фона


See the Pen
Dynamic Particles Background Animation
by Kocsten (@kocsten)
on CodePen.


Прикрепления: dynamic-particl.zip(5.0 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2019-11-23, 21:11 | Сообщение 8
Оффлайн
Администраторы
Сообщений:25282
Награды: 58


Представьте, как выглядит зимняя страна чудес. Теперь нажмите на этот инструмент и наслаждайтесь вашими фантазиями.

Снежки


See the Pen
JavaScript Snowflakes
by Kocsten (@kocsten)
on CodePen.


Прикрепления: javascript-snow.zip(3.4 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2019-11-23, 21:19 | Сообщение 9
Оффлайн
Администраторы
Сообщений:25282
Награды: 58


Показывая шикарную типографику и снежную анимацию, этот инструмент удовлетворит самые требовательные вкусы.


See the Pen
snowflakes - let it snow...
by Kocsten (@kocsten)
on CodePen.


Прикрепления: snowflakeslet-i.zip(6.0 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Простая и красивая анимация CSS снежинок (Создаем эффект падающего снега на веб-странице на CSS)
  • Страница 1 из 1
  • 1
Поиск: