Ratstail91/kingdombattles
Archived
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improved marquee effect

Browse Source
This commit is contained in:
Kayne Ruse
2019-06-14 06:24:09 +10:00
parent ef0bd87ed2
commit 862867e1a6
2 changed files with 51 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/shared.css
+49 -18
View File
@@ -362,29 +362,60 @@ pre {
); );
} }
/* marquee effect */
.marqueeContainer { /* wrap the marquee with this to get the correct overflow effect */
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.marquee { .marquee {
-moz-animation: marquee 20s linear infinite;
-webkit-animation: marquee 20s linear infinite;
animation: marquee 20s linear infinite;
}
.marquee.fast { /* for smaller text regions */
-moz-animation: marquee 10s linear infinite; -moz-animation: marquee 10s linear infinite;
-webkit-animation: marquee 10s linear infinite; -webkit-animation: marquee 10s linear infinite;
animation: marquee 10s linear infinite; animation: marquee 10s linear infinite;
}
@media screen and (max-width: 480px) { /* comfortable speed based on screen size */
.marquee {
-moz-animation: marquee 10s linear infinite;
-webkit-animation: marquee 10s linear infinite;
animation: marquee 10s linear infinite;
} }
@-moz-keyframes marquee {
0% { transform: translateX(100%); } .marquee.fast {
100% { transform: translateX(-100%); } -moz-animation: marquee 5s linear infinite;
} -webkit-animation: marquee 5s linear infinite;
@-webkit-keyframes marquee { animation: marquee 5s linear infinite;
0% { transform: translateX(100%); } }
100% { transform: translateX(-100%); } }
}
@keyframes marquee { @-moz-keyframes marquee {
0% { 0% { transform: translateX(100%); }
-moz-transform: translateX(100%); 100% { transform: translateX(-100%); }
-webkit-transform: translateX(100%); }
transform: translateX(100%) }
100% { @-webkit-keyframes marquee {
-moz-transform: translateX(-100%); 0% { transform: translateX(100%); }
-webkit-transform: translateX(-100%); 100% { transform: translateX(-100%); }
transform: translateX(-100%); } }
}
@keyframes marquee {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%)
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
} }
} }
src/components/pages/home.jsx
+2 -2
View File
@@ -34,10 +34,10 @@ class Home extends React.Component {
//A bit of fun //A bit of fun
let Tagline = () => { let Tagline = () => {
if (this.state.tagline === 'marquee') { if (this.state.tagline === 'marquee') {
return (<p className='marquee'><em>I hope this CSS marquee effect works in all browsers!</em></p>); return (<div className='marqueeContainer'><em><p className='marquee'>I hope this CSS marquee effect works in all browsers!</p></em></div>);
} }
if (this.state.tagline === 'rainbow') { if (this.state.tagline === 'rainbow') {
return (<p className='centered rainbowText'><em>I hope this CSS rainbow effect works in all browsers!</em></p>); return (<em><p className='centered rainbowText'>I hope this CSS rainbow effect works in all browsers!</p></em>);
} }
return (<p className='centered'><em><Markdown source={this.state.tagline} escapeHtml={true} /></em></p>); return (<p className='centered'><em><Markdown source={this.state.tagline} escapeHtml={true} /></em></p>);
} }