Jump to content

Text Slideshow help please

Recommended Posts

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 by JCLContractingB
Grammatical error
Link to comment
  • 2 weeks later...

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>

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.