ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект плавно падающего снега на CSS3

Эффект плавно падающего снега на CSS3

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

Все как будто вы смотрите в окно и за ним идет небольшой снегопад. Это потому, что здесь не будет быстрого хода или много снежинок, как уже в описание сказано, это плавный ход на разнообразные снежинки, что органично можно выставить под любую тематику сайта.

Приступаем к установке:

Этот код предназначен для размещение на нужных страницах сразу после body:

HTML

Код

#snow_light {
height: 100%;
left: 0;
pointer-events: none;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}

В стилистике CSS прописывает в низу:

JS

Код

Нужно скачать архив и там найдете JS файл, который кидаем в корень сайта в папку js.

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

Второй вариант:

Аналогичный эффект падающего снега, только в другой формаций.

HTML

Код

<canvas id="degkacording" width="1573" height="493"></canvas><br>
<button>Переключатель</button>

CSS

Код

#degkacording {background-image: url("Ссылка для фона");}

Код

'use strict';
  var canvas = document.getElementById('degkacording')
  ,interv = 30
  ,Snowflake = function(h){
  this.width = canvas.width;
  this.height = canvas.height;
  this.vxCommon = .004;
  this.vyCommon = .0226;
  this.r = h.r;
  this.parallax = h.parallax;
  this.x = h.x;
  this.y = h.y;
  this.vx = h.vx;
  this.vy = h.vy;
  this.vMelt = .993;
  };
  Snowflake.prototype = {
  rMin: 1.8
  ,rMax: 5
  ,plain: .88 * canvas.height //level of plain when flakes are stops
  };
  var rand = function(n, shift){return (shift!=null ? shift : -n/2) + n * Math.random();}
  ,randRad
  ,snowflakes = Array.apply(0, Array(120)).map(function(){return new Snowflake({
  r: randRad = rand(Snowflake.prototype.rMax, Snowflake.prototype.rMin)
  ,parallax: randRad *.005
  ,x: rand(canvas.width - 2* randRad, randRad)
  ,y: rand(canvas.height - 2* randRad, randRad - (canvas.height - Snowflake.prototype.plain))
  ,vx: rand(.02)
  ,vy: rand(.02)
  });})
  ,cont = degkacording.getContext('2d'), noStopMotion =1, count=0;
  cont.fillStyle = 'rgba(170, 177, 205, 0.29)';
  cont.fillRect(0, 0, degkacording.width, canvas.height);
  cont.fillStyle = 'rgba(185, 196, 207, 0.78)';

  var startMotion = function(dt2, base_image){ //render all
  var now = +new Date();
  cont.clearRect(0, 0, canvas.width, canvas.height);

  snowflakes.forEach(function(S, i, arr){ //render flake
  S.date = S.date || now;
  var dt = dt2 || now - S.date;
  if(!(S.y > S.plain - 2 * S.r -2 + (S.r - S.rMin) * (S.height - S.plain) / (S.rMax - S.rMin) )){
  S.x += dt * (S.vx + S.vxCommon + S.parallax);
  S.x -= S.width * (S.x / S.width | 0);
  S.y += dt * (S.vy + S.vyCommon + S.parallax);
  S.y -= S.height * (S.y / S.height | 0);
  S.vx = (S.vx + rand(.002)) * .999;
  S.vy = (S.vy + rand(.002)) * .999;
  S.r -= .003
  }else{
  S.r = S.r * S.vMelt - .003;
  }
  if(S.r >0){
  cont.beginPath();
  cont.arc(S.x, S.y, S.r, 0, 2 * Math.PI, !1);
  cont.fill();
  }else{
  S.r = rand(S.rMax, S.rMin);
  S.y =0;
  }
  //console.log(S.vx)
  S.date = now;
  count++;
  });
  noStopMotion && setTimeout(startMotion, interv);
  };
  setTimeout(function(){console.log('count', count /10);}, 10000);
  document.querySelector('button').addEventListener('click',function(){if(noStopMotion = noStopMotion ?0:1) startMotion(3* interv)},!1);
  startMotion(null);

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

Демонстрация

08 Декабря 2018 Загрузок: 5 Просмотров: 1742 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

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