Home>

While displaying the characters softly on the header image,
I want to switch characters every fixed number of seconds.

For example, when you open the page with "Ahhh" in Japanese,
I want to switch the character to "aaaa" in about 3 seconds.
And again, after about 3 seconds, the display returns to "Ahhh",
I want to loop.

Code

<header>
       aaaa 
       Ah ah 
      
  </header>
.navbar {
    position: relative;
}
.logo-img {
    top: 22px;
    left: 44px;
    height: 150%;
    height: 150%;
    position: absolute;
}
.img-background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.catch-copy {
    margin-top: 241px;
    font-size: 40px;
}
.fadein {
    opacity: 0.1;
    transition: all 500ms;
    }
.fadein.scrollin {
    opacity: 1;
    transform: translate (0, 0);
    }
$(function () {
    $(window) .scroll (function () {
        $('.fadein'). each (function () {
            var elemPos = $(this) .offset (). Top;
            var scroll = $(window) .scrollTop ();
            var windowHeight = $(window) .height ();
            if (scroll>elemPos --windowHeight + 200) {
                $(this) .addClass ('scrollin');
            }
        });
    });
});

In the current state, the characters can be displayed softly, but
Characters cannot be switched.

  • Answer # 1

    Ignore the code provided and imagine what you want to do from the description.
    If it is different, please go through it.

    <header>
       aaaa 
       Ah ah 
    </header>
    .cover {
      width: 100%;
      height: 400px;
      position: relative;
      background-image: url (https://cdn.pixabay.com/photo/2013/10/02/23/03/dawn-190055_960_720.jpg);
      background-size: cover;
    }
    .catch-copy {
      font-size: 40px;
      position: absolute;
      top: 140px;
      left: 100px;
    }
    .fadein1 {
      animation: fadein 3s ease-in-out infinite alternate both;
    }
    .fadein2 {
      animation: fadein 3s ease-in-out 3s infinite alternate both;
    }
    .fadein.scrollin {
      opacity: 1;
      transform: translate (0, 0);
    }
    @keyframes fadein {
      0% {
        opacity: 0;
      }
      20% {
        opacity: 0;
      }
      }
      100% {
        opacity: 1;
      }
    }

    Codepen sample

  • Answer # 2

    Good evening.

    How about trying the following?

    sample

    .fadein: after {
      content: "";
      animation: test 3s infinite;
    }
    @keyframes test {
      to {
        content: "aaaa";
      }
      from {
        content: "Ah ah";
      }
    }

    Note that the text of the element is deleted because the text is included in the pseudo element.

  • Answer # 3

    It was completely late, but I tried to make it.
    For your reference...

      .navbar {
            position: relative;
        }
        .logo-img {
            top: 22px;
            left: 44px;
            height: 150%;
            height: 150%;
            position: absolute;
        }
        .img-background {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        .catch-copy {
            margin-top: 241px;
            font-size: 40px;
        }
        @keyframes fadeIn {
            0% {opacity: 0}
            100% {opacity: 1}
        }
        .fadein {
            animation: fadeIn 3s ease 0s 1 normal;
        }
      var msgs = ["aaaa", "ahhh"];
        var msgNo = msgs.length;
        var an = false;
        $(function () {
            $(window) .scroll (function () {
                $('.catch-copy'). each (function () {
                    var elemPos = $(this) .offset (). Top;
                    var scroll = $(window) .scrollTop ();
                    var windowHeight = $(window) .height ();
                    if (scroll>elemPos --windowHeight + 200) {
                        if (an == false) {
                            setFadein ();
                            an = true;
                        }
                    } else {
                        an = false;
                    }
                });
            });
            $('.catch-copy'). on ('webkitAnimationEnd', function () {
                if (an == true) {
                    $('.catch-copy'). removeClass ('fadein');
                    ti = setTimeout ("setFadein ()", 3000);
                }
            });
        });
        function setFadein () {
            msgNo ++;
            if (msgs.length<= msgNo) msgNo = 0;
            $('.catch-copy'). Text (msgs [msgNo]);
            $('.catch-copy'). addClass ('fadein');
        }
    <html>
    <head>
      <meta charset = "UTF-8">
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
    <header>
           aaaa 
          
    </header>
    </body>
    </html>