JCLContractingB Posted March 11, 2021 Share Posted March 11, 2021 (edited) Site URL: https://www.jclcontractingllc.com I can't figure out how to do small slideshow of text. I basically need a slideshow on my about us page to show 4 (maybe more in the future) snippets of text and it rotates thru them automatically like every 30 seconds or so. I was able to found this, which is basically exactly what i want (besides a transparent background), but i wasn't able to implement the HTML and CSS using the </> code content block on the page but I'm also not fluent in either language unfortunately so it's most likely may be user error. Any help would be greatly appreciated! Edited March 11, 2021 by JCLContractingB Grammatical error Link to comment
tuanphan Posted March 21, 2021 Share Posted March 21, 2021 Hi. Add a Code Block > Paste this Codepen code <div class="tuan"> <p class="item-1">This is your last chance. After this, there is no turning back.</p> <p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p> <p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p> </div> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:600); div.tuan { font-family: 'Open Sans', 'sans-serif'; color: #cecece; background: #222; overflow: hidden; } .item-1, .item-2, .item-3 { position: absolute; display: block; top: 2em; width: 60%; font-size: 2em; animation-duration: 20s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .item-1{ animation-name: anim-1; } .item-2{ animation-name: anim-2; } .item-3{ animation-name: anim-3; } @keyframes anim-1 { 0%, 8.3% { left: -100%; opacity: 0; } 8.3%,25% { left: 25%; opacity: 1; } 33.33%, 100% { left: 110%; opacity: 0; } } @keyframes anim-2 { 0%, 33.33% { left: -100%; opacity: 0; } 41.63%, 58.29% { left: 25%; opacity: 1; } 66.66%, 100% { left: 110%; opacity: 0; } } @keyframes anim-3 { 0%, 66.66% { left: -100%; opacity: 0; } 74.96%, 91.62% { left: 25%; opacity: 1; } 100% { left: 110%; opacity: 0; } } </style> JCLContractingB 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment