Ačkoli umístit animovaný sníh na stránkuať už od nás nebo od klienta, zní to jako designová praxe starší než cokoli jiného, pravdou je, že animace které při této příležitosti představujeme, je mořem elegantního. Také nepotřebujete JavaScript, je to jednoduché CSS3.
První věcí je podívat se na to animace.
Vypadá docela dobře, že? Abychom to uvedli do praxe, musíme pouze vytvořit tři obrázky s bílými tečkami a animovat je pomocí vlastnosti @klíčové snímky CSS3 takto:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Přidání různých předpony pro různé prohlížeče, pak pro naše tělo stanoví:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Také přidání potřebných předpon. Celý postup s podrobným vysvětlením, s laskavým svolením Joshua Johnsona, najdete na jeho blogu.
Více informací - Generátor přechodu CSS3, generátor přechodu CSS3
Zdroj - Design Shack