Looking for good script to flip through words

Forum Moderators: open

Message Too Old, No Replies

Looking for good script to flip through words

onlinesource

6:50 pm on Jan 5, 2017 (gmt 0)

Looking to add a header to my website that says:

"WE OFFER MANY PRODUCTS INCLUDING ___________" and the blank would be filled in by several options including clothes, electronics, etc. I want each word to flip one-by-one through the list. There is no needed for rotating the text, fading in or out, just a nice flip through the text.

Looking for a simple solution with minimal code. I found some JavaScript that conflicting with other Javascript coding. Does anybody know of the best way to tackle this?

Fotiman

8:27 pm on Jan 5, 2017 (gmt 0)

Many ways to handle this. Here's one:
HTML:


<div>WE OFFER MANY PRODUCTS INCLUDING 
 <span class="txt-flipper-src">clothes</span>
 <span class="txt-flipper-src hidden">electronics</span>
 <span class="txt-flipper-src hidden">etc.</span>
</div>

CSS:


.hidden {
 display: none !important;
}

JavaScript (place in it's own script, just before the closing </body> tag):


let txtFlipperSrc = document.querySelectorAll('.txt-flipper-src');
let idxSrc = 0;
setInterval(function () {
 // hide current, unhide next
 txtFlipperSrc[idxSrc].classList.toggle('hidden');
 idxSrc = txtFlipperSrc.length - 1 === idxSrc ? 0 : idxSrc + 1;
 txtFlipperSrc[idxSrc].classList.toggle('hidden');
}, 3000);

onlinesource

9:16 pm on Jan 5, 2017 (gmt 0)

Thank you so much

birdbrain

4:11 pm on Jan 6, 2017 (gmt 0)

Hi there onlinesource,

How about using CSS instead. ;)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
#offers {
  position: relative;
 }
#offers span {
  position: absolute;
  margin-left: 0.5em;
  opacity: 0;
  animation: words 9s infinite;
 }
#offers span:nth-child(2){ animation-delay: 3s; }
#offers span:nth-child(3){ animation-delay: 6s; }

@keyframes words {
  0% { opacity:1; }
  33.33% { opacity:1; }
  33.34% { opacity:0; }
}
</style>

</head>
<body> 

<p id="offers">
  WE OFFER MANY PRODUCTS INCLUDING
 <span>CLOTHES.</span>
 <span>ELECTRONICS.</span>
 <span>FURNITURE.</span>
</p>

</body>
</html>

birdbrain