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 {
-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;
-webkit-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%); }
100% { transform: translateX(-100%); }
}
@-webkit-keyframes marquee {
0% { transform: translateX(100%); }
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%); }
}
.marquee.fast {
-moz-animation: marquee 5s linear infinite;
-webkit-animation: marquee 5s linear infinite;
animation: marquee 5s linear infinite;
}
}
@-moz-keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
@-webkit-keyframes marquee {
0% { transform: translateX(100%); }
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
let Tagline = () => {
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') {
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>);
}