Code Snippet </> Info
Snippet Name: Marquee Left To Right Direction
Description: Add a smooth CSS animated marquee message.
Example: View Code Demo
Note: Adjust the color styles to your preferences.
Author: SnapBuilder <snippets@snapbuilder.com>
Last Modified: 2015-08-26 22:43:23
Language: css
Highlight Mode: css
|
Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor: Paste the source code, make changes and instantly see it in live preview. Snap HTML Code Editor
|
|
Copied To Clipboard!
<!DOCTYPE html>
<html>
<head>
<title>CSS Marquee Left To Right Direction</title>
<style>
/* Begin CSS Marquee Left To Right Direction */
/* This Script Free To Use Providing This Notice Remains */
/* This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library */
html {background-color:#000000;}
BODY {font-family:tahoma,verdana,arial,ms sans serif; font-size:90%; color:#ffffff;}
h1, h2, h3 {font-family:Tahoma, Arial, sans-serif;color:#fff;text-shadow:1px 1px 0px #000000;filter:dropshadow(color=#000000, offx=1, offy=1);}
a {color:#00b1dc;text-decoration:none;}
a:hover {color:#0097bc;}
.wrapper {width:500px;margin:25px auto;}
.marquee {width:500px;height:50px;margin:25px auto;overflow:hidden;position:relative;border:1px solid #000;background-color:#222;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);box-shadow:inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);-webkit-transition:background-color 350ms;-moz-transition:background-color 350ms;transition:background-color 350ms;}
.marquee p {position:absolute;font-family:Tahoma, Arial, sans-serif;width:100%;height:100%;margin:0;line-height:50px;text-align:center;color:#fff;text-shadow:1px 1px 0px #000000;filter:dropshadow(color=#000000, offx=1, offy=1);transform:translateX(100%);-moz-transform:translateX(100%);-webkit-transform:translateX(100%);}
.marquee p:nth-child(1) {animation:left-one 20s ease infinite;-moz-animation:left-one 20s ease infinite;-webkit-animation:left-one 20s ease infinite;}
.marquee p:nth-child(2) {animation:left-two 20s ease infinite;-moz-animation:left-two 20s ease infinite;-webkit-animation:left-two 20s ease infinite;}
#notes {width:500px;height:50px;margin:25px auto;overflow:hidden;position:relative;}
#snippet {width:500px;height:50px;margin:25px auto;overflow:hidden;position:relative;}
/*================================
Move the Marquee to the Left
==================================*/
/** Mozilla Firefox Keyframes **/
@-moz-keyframes left-one {0%{-moz-transform:translateX(100%);}
10% {-moz-transform:translateX(0);}
40% {-moz-transform:translateX(0);}
50% {-moz-transform:translateX(-100%);}
100%{-moz-transform:translateX(-100%);}
}
@-moz-keyframes left-two {0% {-moz-transform:translateX(100%);}
50% {-moz-transform:translateX(100%);} 60% {-moz-transform:translateX(0);}
90% {-moz-transform:translateX(0);} 100%{-moz-transform:translateX(-100%);}
}
/** Webkit Keyframes **/
@-webkit-keyframes left-one {0% {-webkit-transform:translateX(100%);}
10% {-webkit-transform:translateX(0);}
40% {-webkit-transform:translateX(0);}
50% {-webkit-transform:translateX(-100%);}
100%{-webkit-transform:translateX(-100%);}
}
@-webkit-keyframes left-two {
0% {-webkit-transform:translateX(100%);}
50% {-webkit-transform:translateX(100%);}
60% {-webkit-transform:translateX(0);}
90% {-webkit-transform:translateX(0);}
100%{-webkit-transform:translateX(-100%);}
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Marquee with CSS3 Animation</h1>
<h3>Move the text from the right to the left</h3>
<div class="marquee">
<p><a href="http://snapbuilder.com">This is a smooth marquee code snippet demonstration.</a></p>
<p><a href="http://snapbuilder.com">It's not choppy like the old standard MARQUEE code was!</a></p>
</div>
</div>
<div id="notes"><p>This CSS Marquee Code Snippet allows 2 messages inserted.</p></div>
<div id="snippet"><p>[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_131.html">HTML5 CSS Marquee Code Snippet</a> page. ]</p></div>
</body>
</html>
|