Уроки Javascript / Как сделать метель на сайте

Привет друзья! Скоро новый год, поэтому нужно сделать что-нибудь новогоднее. 😊 Поэтому сейчас мы с вами добавим метель на сайт. Этот снегопад будешь отличаться от прошлого снегопада со снежинками, тем, потому что он использует canvas и эффект размытия. Так же снежинок будет достаточно много, что и создаст эффект настоящего снега. На задний фон мы добавим с вами картинку ночной Москвы, чтобы это все вместе красиво смотрелось. 😊 - Уроки от #OlegShpagin 👨🏼‍💻 Хештеги #урокиhtml #урокиjavascript #метель #снег ******************************** Если Вам понравилась публикация, подписывайтесь на канал! Ставьте лайки, тогда будем еще писать такой контент :) Если есть вопросы или пожелания, то пишите, в комментариях. ******************************** Урок на сайте Wiseplat: ✔ Сообщество программистов: Вступай в группу Вк - 🚀 Группа FaceBook - Инстаграм Wiseplat: Instagram: Twitter - Вот код Javascript из видео: [!DOCTYPE html] [html lang=“en“] [head] [meta charset=“UTF-8“] [title]Document[/title] [style] * { box-sizing: border-box; } body { background-color: #111; background-image: url(); background-size: cover; background-repeat: no-repeat; } canvas { height: 100vh; width: 100vw; -webkit-filter: blur(2px); filter: blur(2px); } [/style] [/head] [body ] [h1 style=“color: white;“]Метель на сайте!!![/h1] [script src=““][/script] [script] const UPPER_LIMIT_Y = 20 const UPPER_LIMIT_X = 2 const LOWER_LIMIT_X = -2 const MAX_SIZE = 6 const MIN_SIZE = 2 const AMOUNT = 250 const COLOR = 0xffffff const { Application, Graphics } = PIXI const floored = v =] (() * v) const update = p =] () ] 0.5 ? (LOWER_LIMIT_X, p - 1) : (p 1, UPPER_LIMIT_X) const reset = p =] { p.x = floored() p.y = -( floored()) = floored(UPPER_LIMIT_Y) } const genParticles = t =] new Array(AMOUNT).fill().map(p =] { const SIZE = floored(MAX_SIZE) MIN_SIZE p = new (t) = = SIZE / 100 // = = SIZE = floored(UPPER_LIMIT_X) - UPPER_LIMIT_X = floored(UPPER_LIMIT_Y) = () p.x = floored() p.y = -(SIZE floored()) (p) return p }) const app = new Application({ antialias: true, transparent: true, }) const drops = new (AMOUNT, { scale: true, position: true, alpha: true, }) (drops) const p = new Graphics() (COLOR) (0, 0, 100) () const baseTexture = (p) let particles = genParticles(baseTexture) // = [new (3)] (i =] { if ( !== innerHeight || !== innerWidth ) { (innerWidth, innerHeight) () particles = genParticles(baseTexture) } for (let particle of particles) { if (particle.y ] 0) particle.x = particle.y = if (() ] 0.9) = update() if (() ] 0.9) = ( 1, UPPER_LIMIT_Y) if ( particle.x ] || particle.x [ 0 || particle.y ] ) reset(particle) } }) () [/script] [/body] [/html] *** Не забываем, что Ютуб не дает писать угловые скобки – поэтому здесь они заменены на квадратные!!! – для использования кода - сделайте наоборот 😊 Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: