Rabu, 13 Mei 2015

Make Rain or Snow Falling Effects use CSS3

snow-rain-effectUpdate trik dari postingan sebelumnya tentang creativity using CSS keyframe animations. Sekarang AA Koben akan berbagi kembali trick membuat efek salju dan hujan menggunakan CSS3. Tutorial ini datang dari web keren dengan judul asli "Create Rain & Snow Falling Effects using CSS3 – weather.css"
Trick weather.css menyertakan sebuah gambar dalam menampilkan efek rain/snow yang di rangkai dengan bumbu CSS3 animation keyframes! Masukan bumbu CSS di tempat semestinya :D
.salju {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.salju:before,.salju:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
background: transparent repeat;
opacity: 0.5;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-animation-name: salju;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: salju1;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.salju:after {
opacity: 0.8;
-webkit-animation-name: salju1;
animation-name: salju1;
}
.salju.snow:before,.salju.snow:after {
background-image: url("HOST-LINK-IMAGE-SNOW/RAIN.PNG");
-webkit-animation-duration: 6s;
animation-duration: 6s;
}
.salju.snow:after {
-webkit-animation-duration: 4.5s;
animation-duration: 4.5s;
}
@-webkit-keyframes salju {
from {
background-position: 0 0;
}
to {
background-position: 0 1024px;
}
}
@keyframes salju {
from {
background-position: 0 0;
}
to {
background-position: 0 1024px;
}
}
@-webkit-keyframes salju1 {
from {
background-position: 64px 64px;
}
to {
background-position: 64px 1088px;
}
}
@keyframes salju1 {
from {
background-position: 64px 64px;
}
to {
background-position: 64px 1088px;
}
}
Planing HTML<body>
<div class="salju snow">

</div>
</body>
NB:
Pada bumbu CSS, gantikan tulisan HOST-LINK-IMAGE-SNOW/RAIN.PNG dengan link host gambar hujan/salju. Gue sudah siapkan, silahkan tinggal hostingkan. Snow Picture atau Rain Picture Pilih salah satu saja! Pada property .salju:before,.salju:after sobat bisa merubah arah jatuhnya snow/rain dengan merubah angka pada kode properties-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
Untuk kecepatan jatuhnya snow/rain perhatikan pada property .salju.snow:before,.salju.snow:after dan .salju.snow:after rubahlan nominal timing pada properties-webkit-animation-duration: 6s;
animation-duration: 6s;
Dalam memasukan markup HTML <div class="salju snow"> harus di dalam tagging <body> Bisa juga di dalam tagging <main-wrapper> tergantung unik-ID pada template masing-masing. Demikian dan terima kasih :)

Happy falling effect \m/

Tidak ada komentar:

Posting Komentar