-
Feb 16th, 2014, 08:58 AM
#1
Thread Starter
Addicted Member
[RESOLVED] Scrolled Text
i have a piece of code but the scroll is not working i wonder why !? i did put it all in 1 page or including them 1 by 1 (js first obviously) but it didnt work
it has been made from 3 part
Part I : Javascript
Code:
$(".toggle").on("click", function () {
$(".container").toggleClass("microsoft");
});
Part II : CSS
HTML Code:
@charset "utf-8";
/* CSS Document */
.container {
width: 18em;
height: 8em;
margin: 1em auto;
overflow: hidden;
background: white;
position: relative;
box-sizing: border-box;
}
.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee 15s linear infinite;
}
.marquee:hover {
animation-play-state: paused;
}
/* Make it move! */
@keyframes marquee {
0% { top: 8em }
100% { top: -11em }
}
/* Make it look pretty */
.microsoft .marquee {
margin: 0;
padding: 0 1em;
line-height: 1.5em;
font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.microsoft:before, .microsoft::before,
.microsoft:after, .microsoft::after {
left: 0;
z-index: 1;
content: '';
position: absolute;
pointer-events: none;
width: 100%; height: 2em;
background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0));
}
.microsoft:after, .microsoft::after {
bottom: 0;
transform: rotate(180deg);
}
.microsoft:before, .microsoft::before {
top: 0;
}
/* Style the links */
.vanity {
color: #333;
text-align: center;
font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a, .microsoft a {
color: #1570A6;
transition: color .5s;
text-decoration: none;
}
.vanity a:hover, .microsoft a:hover {
color: #F65314;
}
/* Style toggle button */
.toggle {
display: block;
margin: 2em auto;
}
Part III : The Code
HTML Code:
<div class="microsoft container">
<p class="marquee">Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
</div>
<button class="toggle">Toggle Beautification</button>
Thanks in advanced
Body Language tells the truth! even from the grave tsaeb eht morf gninnur ,nwod deaH
All the big things started from little! teef my tsap evom sekans ,duol raor slluB
Lietome.ir
-
Feb 17th, 2014, 06:27 AM
#2
Junior Member
Re: Scrolled Text
Did you include the jQuery framework? This is a jQuery function.
-
Feb 18th, 2014, 05:44 AM
#3
Thread Starter
Addicted Member
Re: Scrolled Text
Originally Posted by bodessia
Did you include the jQuery framework? This is a jQuery function.
what jquery framework ?
Last edited by Pc Monk; Feb 18th, 2014 at 06:04 AM.
Body Language tells the truth! even from the grave tsaeb eht morf gninnur ,nwod deaH
All the big things started from little! teef my tsap evom sekans ,duol raor slluB
Lietome.ir
-
Feb 18th, 2014, 04:40 PM
#4
Junior Member
-
Feb 20th, 2014, 03:04 AM
#5
Thread Starter
Addicted Member
Re: Scrolled Text
Originally Posted by bodessia
sorry for the delay i did include the javascript and html and css what else ?
Body Language tells the truth! even from the grave tsaeb eht morf gninnur ,nwod deaH
All the big things started from little! teef my tsap evom sekans ,duol raor slluB
Lietome.ir
-
Feb 20th, 2014, 04:43 PM
#6
Junior Member
Re: Scrolled Text
Originally Posted by Pc Monk
sorry for the delay i did include the javascript and html and css what else ?
Get the latest version of jQuery here http://jquery.com/ (2.1.0 at the time of writing this) which allows for the `beautification` part to work
Looks like you also need the JavaScript from here: http://leaverou.github.io/prefixfree/prefixfree.js for the scrolling text to work
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS3 Vertical Marquee</title>
<script type='text/javascript' src="scroll.js"></script>
<style type='text/css'>
.container {
width: 18em;
height: 8em;
margin: 1em auto;
overflow: hidden;
background: white;
position: relative;
box-sizing: border-box;
}
.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee 15s linear infinite;
}
.marquee:hover {
animation-play-state: paused;
}
/* Make it move! */
@keyframes marquee {
0% { top: 8em }
100% { top: -11em }
}
/* Make it look pretty */
.microsoft .marquee {
margin: 0;
padding: 0 1em;
line-height: 1.5em;
font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.microsoft:before, .microsoft::before,
.microsoft:after, .microsoft::after {
left: 0;
z-index: 1;
content: '';
position: absolute;
pointer-events: none;
width: 100%; height: 2em;
background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0));
}
.microsoft:after, .microsoft::after {
bottom: 0;
transform: rotate(180deg);
}
.microsoft:before, .microsoft::before {
top: 0;
}
/* Style the links */
.vanity {
color: #333;
text-align: center;
font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a, .microsoft a {
color: #1570A6;
transition: color .5s;
text-decoration: none;
}
.vanity a:hover, .microsoft a:hover {
color: #F65314;
}
/* Style toggle button */
.toggle {
display: block;
margin: 2em auto;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(".toggle").on("click", function () {
$(".container").toggleClass("microsoft");
});
});//]]>
</script>
</head>
<body>
<div class="microsoft container">
<p class="marquee">Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
</div>
<button class="toggle">Toggle Beautification</button>
<p class="vanity">
<a href="https://twitter.com/jonathansampson">@jonathansampson</a> of
<a href="https://twitter.com/appendTo">@appendTo</a>
</p>
</body>
</html>
Everything neatly placed together in a zip file for you:
scrolled_text..zip
NOTE: I did not write this code, I merely combined it so it works
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|