Foto Yang berjalan di blog memang sangat menarik untuk dilihat .
bagaimana cara membuatnya ? yupz.. Dalam postingan kali ini saya akan
menerangkan bagaimana cara membuat foto berjalan di blog . Sama
seperti teks yang berjalan gambar yang berjalan ini juga menggunakan
efek dari marquee . langsung ajah yach kita praktek .hehehehe
Ikuti langkah-langkah berikut untuk membuat gambar berjalan di blog
Copy Paste kode berikut ke blog anda :
<table border="10" cellpadding="3" height="135" width="195"/>
<tr>
<td>
<marquee
onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2"
direction="up" width="192" height="132" align="center">
<img src="http://farm5.static.flickr.com/4017/4274096032_8bf5bd349a_o.jpg" height="130" width="190" />
<br/>
<img src="http://farm5.static.flickr.com/4046/4273351371_7c1ceb936b_o.jpg" height="130" width="190" />
</marquee>
</td>
</tr>
</table>
Hasilnya Adalah sebagai berikut :
Keterangan ganti link yang berwarna biru dengan link tempat anda menaruh gambar, contohnya saja gambar yang anda taro di flickr.com .
Membuat Gambar berjaln Dari kiri ke kanan
Copy paste kode berikut ke blog anda :
<marquee align="center" direction="left" height="200" scrollamount="3" width="100%" >
<img src="http://farm5.static.flickr.com/4017/4274096032_8bf5bd349a_o.jpg" width="190" height="130" />
</marquee>
Hasilnya Adalah sebagai berikut :
efek marquee pada sebagian besar peramban tidak dapat terbaca, sebagai contoh coba anda buka efek ini pada IE (internet Expoler), maka efek marquee tidak bekerja,
BalasHapussebagai alternatif untuk membuat teks berjalan atau gambar gerak, kita bisa gunakan elemen pseudo CSS animasi dan transisi seperti ini
.objek-gerak {
background: rgba(0, 50, 250, 0);
position: relative;
margin: 5em auto 0 auto;
width: 10em; height: 10em;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
animation-name: rotate;}
.ring-loading,
.ring-loading:before,
.objek-gerak:after {
border-radius: 100%;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-ms-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
animation-timing-function: ease-in;}
hasilnya - http://demoshow77.blogspot.com/2014/04/pseudo-elemen-animasi-dan-transisi-3.html
Makasih Infonya .... :D
BalasHapus