There is such a theme or code or plugin snow on the site

[emLmSx 6]

Good afternoon, I couldn't find any information on the forum about snow falling on the WEB site. Thank you.

[Happy2Play 9780]

Google took me to many examples.

Modified this one css snow

@import url("https://fonts.googleapis.com/css?family=Merienda+One");

.backgroundContainer {
  &:before,
  &:after {
    content: "";
    position: fixed;
    top: -3000%;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(black, 0.01);
    background-image: url(http://www.freepngimg.com/download/winter_snow/4-2-white-snow-png.png);
    background-size: 30%;
    -webkit-animation-name: MOVE-BG;
    -webkit-animation-duration: 500s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
  }
}

.backgroundContainer {
  &:before {
    filter: blur(4px);
    opacity: 0.8;
    top: -2500%;
    background-size: 60%;
    animation-duration: 400s;
  }
  &:after {
    filter: blur(2px);
    opacity: 0.8;
    top: -2000%;
    background-image: url(https://laviwebfiles.com/stage/codepen/4-2-white-snow-png.png);
    background-size: 70%;
    animation-duration: 300s;
  }
}

@-webkit-keyframes MOVE-BG {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(70%);
  }
}

So it really depends on exactly what you want.

[emLmSx 6]

@Happy2Play  Very beautiful! Thank you so much!

[Happy2Play 9780]

Modified this one Let it Snow!— Multi-Depth WinterSnow Animation in Pure CSS

 

/* =========================================
   ANIMATED PNG FLAKES
   - Uses 3 layered PNGs
========================================= */
div.backgroundContainer {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake1.png"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake2.png"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake3.png")!important;
    background-repeat: repeat!important;
    background-size: auto;


  /* Single standard animation, no vendor prefixes needed now */
  animation: snow 10s linear infinite;
}

/* =========================================
   KEYFRAMES – shared by both layers
   - Moves multiple background layers
     at different speeds/directions
========================================= */
@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;
  }
}

[emLmSx 6]

18 hours ago, Happy2Play said:

Google привел меня ко множеству примеров.

Модифицировал этот  CSS-файл для снега.

Так что все зависит от того, чего именно вы хотите.

It's quite beautiful. When I watch the movie, snow falls. How can I remove it?

[Happy2Play 9780]

5 hours ago, emLmSx said:

It's quite beautiful. When I watch the movie, snow falls. How can I remove it?

change backgroundContainer element to include the not element for player background.

.backgroundContainer:not(.backgroundContainer-transparent)

If you don't want it on itemview also you can use this.

.backgroundContainer:not(.backgroundContainer-transparent):not(.itemBackgroundContainer)

 

[emLmSx 6]

I mean, snow is falling in the main background, which is good, but when I watch the movie, snow is falling there too, how can I remove it? Thanks.
 

[Happy2Play 9780]

16 minutes ago, emLmSx said:

I mean, snow is falling in the main background, which is good, but when I watch the movie, snow is falling there too, how can I remove it? Thanks.
 

With the first code above.

Replace .backgroundContainer with .backgroundContainer:not(.backgroundContainer-transparent) in both spots

@import url("https://fonts.googleapis.com/css?family=Merienda+One");

.backgroundContainer:not(.backgroundContainer-transparent) {
  &:before,
  &:after {
    content: "";
    position: fixed;
    top: -3000%;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(black, 0.01);
    background-image: url(http://www.freepngimg.com/download/winter_snow/4-2-white-snow-png.png);
    background-size: 30%;
    -webkit-animation-name: MOVE-BG;
    -webkit-animation-duration: 500s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
  }
}

.backgroundContainer:not(.backgroundContainer-transparent) {
  &:before {
    filter: blur(4px);
    opacity: 0.8;
    top: -2500%;
    background-size: 60%;
    animation-duration: 400s;
  }
  &:after {
    filter: blur(2px);
    opacity: 0.8;
    top: -2000%;
    background-image: url(https://laviwebfiles.com/stage/codepen/4-2-white-snow-png.png);
    background-size: 70%;
    animation-duration: 300s;
  }
}

@-webkit-keyframes MOVE-BG {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(70%);
  }
}

 

[emLmSx 6]

8 minutes ago, Happy2Play said:

With the first code above.

Replace .backgroundContainer with .backgroundContainer:not(.backgroundContainer-transparent) in both spots

@import url("https://fonts.googleapis.com/css?family=Merienda+One");

.backgroundContainer:not(.backgroundContainer-transparent) {
  &:before,
  &:after {
    content: "";
    position: fixed;
    top: -3000%;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(black, 0.01);
    background-image: url(http://www.freepngimg.com/download/winter_snow/4-2-white-snow-png.png);
    background-size: 30%;
    -webkit-animation-name: MOVE-BG;
    -webkit-animation-duration: 500s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
  }
}

.backgroundContainer:not(.backgroundContainer-transparent) {
  &:before {
    filter: blur(4px);
    opacity: 0.8;
    top: -2500%;
    background-size: 60%;
    animation-duration: 400s;
  }
  &:after {
    filter: blur(2px);
    opacity: 0.8;
    top: -2000%;
    background-image: url(https://laviwebfiles.com/stage/codepen/4-2-white-snow-png.png);
    background-size: 70%;
    animation-duration: 300s;
  }
}

@-webkit-keyframes MOVE-BG {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(70%);
  }
}

 

@Happy2PlayNow I understand everything. My translator isn't very accurate, so a lot of things are unclear. Thank you so much.

[Angel273 9]

se ve excelente muchas gracias 

[SikSlayer 249]

Merry Christmas! Thanks for this! Was meaning to ask for 2 weeks, and never got around to it.

Also appreciate the fix so no snow on the video itself, the snow is kinda too thick to see through, but it doesn't 'snow' on images, which helps.