Ini adalah sebuah efek marquee yang diciptakan dengan menggunakan CSS3 Styling. Dapat berjalan otomatis dan berhenti ketika mouse diletakan diatas Text.
Demo :
Letakan Cursor pada Text atau Link...
More Detail :
Silahkan letakan kode CSS kedalam tag <head> template anda dan kode HTML kedalam tag <body> atau dimanapun anda ingin menampilkannya pada halaman website anda. Untuk Text dan Link yang akan diberikan efek Marquee lihat kode HTML.
Kode CSS
<style type="text/css">
.myMarquee {width:600px; height:40px; overflow:hidden; position:relative; border:1px solid #aaa; margin:0 auto;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-o-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background:#4ad;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}
.scroller {display:block; width:1240px; height:40px; position:absolute; left:0; top:0;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:10s;
-moz-animation-name: scroll;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:10s;
-webkit-animation-name: scroll;
}
.scroller div {font-family:georgia, serif; font-size:16px; line-height:40px; float:left; width:600px; color:#000; font-weight:bold; padding:0 10px;
}
.scroller div a {color:#c00;}
@-moz-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
-moz-animation-play-state: paused;
}
@-webkit-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
-webkit-animation-play-state: paused;
}
</style>
Kode HTML
<div id="info">
<div class="myMarquee">
<div class="scroller">
<div>An auto-running 'Marquee' with 'hover' to stop the scroll, with <a href="#x">links</a>.</div>
<div>An auto-running 'Marquee' with 'hover' to stop the scroll, with <a href="#x">links</a>.</div>
</div>
</div>
<p class="info">copyright © Buku Catatan si Ugi</p>
</div> <!-- end info -->
Selesai...
Tidak ada komentar:
Posting Komentar