Fade between different lines of text

JavaScript
1

Hi there,

I am trying to achieve the following effect in which text fades between text in a loop.

This works, but when I add it to my site, it isn’t working.

It seems to be hiding the text to start with as per the .quotes {display: none;}

Can anyone suggest why this would not appear to be working? Or if there is a simpler way of achieving this effect?

Thank you.

2

I noticed there were errors in the script, so I used this instead:

3

Hi there toolman,

you may be interested to know that this
can now be accomplished with CSS. :winky:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Text rotation</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
#container {
    position: relative;
    max-width: 40em;
    margin: 1em auto;
 }
#container > div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    padding: 0.66em 0;
    opacity: 0;
    font-size: 1.5em;
    color: rgba( 0, 0, 96, 0.2 );
    letter-spacing: 1px;
    text-align: center;
    text-transform: capitalize;
    animation:fadeInOut 10s ease-in-out infinite;
 }

#container > div:nth-of-type(6){
    z-index: 0;
    border: 1px solid #999;
    border-radius: 0.5em;
    box-sizing: border-box;
    background-color: #eef;
    opacity: 1; 
    color: transparent;
    animation: none;
    box-shadow: inset 0 0 0.66em rgba( 0, 0, 0, 0.3 ),
            0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );

 }
 
#container > div:nth-of-type(1){
    animation-delay: 0s;
 }
#container > div:nth-of-type(2){
    animation-delay: 2s; 
 }
#container > div:nth-of-type(3){
    animation-delay: 4s;
 }
#container > div:nth-of-type(4){
    animation-delay: 6s;
 }
#container > div:nth-of-type(5){
    animation-delay: 8s;
 }
@keyframes fadeInOut {
 20% {
    z-index: 2; 
    opacity: 1;
    color: rgba( 0, 0, 96, 0.8 );
  }

 25% {
    z-index: 1; 
    opacity: 0;
    color: rgba( 0, 0, 9e, 0.2 );
  }
 }
</style>

</head>
<body> 

<div id="container">
 <div>first line</div>
 <div>second line</div>
 <div>third line</div>
 <div>forth line</div>
 <div>fifth line</div>
 <div>this is a blank line</div>
</div>


</body>
</html>

coothead

2 Likes
4

Thank you coothead, that is good to know :slight_smile:

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.