No replies to this topic

[FilipGFX]

Zăpadă cu ajutorul CSS3 animație

 

Sunt multe scripturi de zăpadă, dar acesta are un plus forte mare

În primul rând acesta nu este un script, el nu folosește javascript sau JQuery,

Este făcut doar în CSS3, sunt 3 imagini în care 2 sunt blurate că să facă zăpada mai realistică

 

Instalare

 

În primul rând avem nevoie să găsim un spațiu unde să se vadă zăpada, este foarte bine să fie doar în header, banner.

De exemplu zăpada va fi în

<div class="artweber">
    aici
</div>

deci asta

<div class="artweber_snow">
<div id="snow"></div>
</div> 

trebuie de băgat ast felii

<div class="artweber">
    <div class="artweber_snow">
    <div id="snow"></div>
    </div> 
</div>

Acuma avem nevoie de css, îl adăugați intru-n css instalat pe site-ul tău

/* zapada */
.artweber_snow { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;}
#snow {width: 100%; height: 100%; background-image: url("https://images.tesloianu.ro/ym.png"), url("https://images.tesloianu.ro/ym.png"), url("https://images.tesloianu.ro/medium/xm.png"); -webkit-animation: snow 20s linear infinite;-moz-animation: snow 20s linear infinite;-ms-animation: snow 20s linear infinite;animation: snow 20s linear infinite;}
@keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-moz-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-webkit-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-ms-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
/* zapada */

Petru ca zăpada să fie în acel div care lai ales "la noi este artweber", în blocul ".artweber' din css-ul tău trebuie să scriți "position: relative", exemplu

.artweber {
    text-align: center;
    font-size: 15px;
    padding: 20px 0;
    background-image: url(https://images.tesloianu.ro/zm.png);
    font-weight: 500;
    margin-top: 10px;
    position: relative;
}

Dacă pe div-ul dat este un buton ceva care membrii trebuie să meargă pe el atunci adăugați asta

-webkit-pointer-events: none; 
pointer-events: none;

in

.artweber_snow

Vezi cum arata : https://demo.artwebe...ocsszapada.html

Scris de Gregory ArtWeber.Ro