How to create typing text effect-CodePudding

I am very new to coding html and css and just doing a video course to learn the basics. Yesterday I saw this really cool animation in the logo/navbar on the site https://www.axelspringer.com/de/. When you scroll down it looks like deleting some of the letters and on top position they come back.

I looked in developer tools in chrome and only found the span selektor with their classes, in which the text is changing itself.

Can someone explain me where to look in the chrome developer tools for this effect or how its made?

Thanks! Philip (Hope this isn't a stupid question)

CodePudding user response：

To trigger the animation while you scroll, you need Javascript. Then for the animation you can use CSS or Javascript. This site uses Javascript (see code below). So the site is checking wether you scrolled, and if so, it changes some classes and runs the JS code to change the text. You can get an idea of how both the CSS and JS versions work here - https://css-tricks.com/snippets/css/typewriter-effect/, or just search on the internet for more tutorials.

key: "handleScrollDown",
value: function () {
    var e = this,
        t = 0 === window.scrollY,
        n = t != this.isTopMode;
    (this.isTopMode = t),
        n && t
            ? window.requestAnimationFrame(function () {
                  e.element.classList.remove("u-header--scrolled-down"),
                      e.element.classList.add("u-header--scrolled-top"),
                      document.body.classList.remove("u-body--header-scrolled-down"),
                      document.body.classList.add("u-body--header-scrolled-top"),
                      e.element.querySelector(".u-logo__text").getLogoWriter && e.element.querySelector(".u-logo__text").getLogoWriter().setText("axel springer");
              })
            : n &&
              !t &&
              window.requestAnimationFrame(function () {
                  e.element.classList.add("u-header--scrolled-down"),
                      e.element.classList.remove("u-header--scrolled-top"),
                      document.body.classList.add("u-body--header-scrolled-down"),
                      document.body.classList.remove("u-body--header-scrolled-top"),
                      e.element.querySelector(".u-logo__text").getLogoWriter && e.element.querySelector(".u-logo__text").getLogoWriter().setText("a");
              });
},