• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Inhalte auf der Seite beim Scrollen verdrehen oder verschieben

Fechter-Ibis-2009

Neues Mitglied
Hi alle zusammen,

mir ist auf vielen Webseiten aufgefallen dass sich Inhalte verdrehen oder verschieben wenn man rauf oder runterscrollt.

Kann man das ohne Javascript und nur mit HTML und CSS machen?

Beispielsweise möchte ich eine fette Überschrift nach links verschwinden lassen wenn man nach unten scrollt. Wenn man nach oben scrollt soll die Überschrift wieder reinrutschen.

Wie stelle ich das am Besten an?

Habe mal angefangen und die Quellcodes angehängt. Bisher rührt sich da natürlich noch nix.

HTML:
<!DOCTYPE html>
<html lang="de">
    <head>
        <link rel="stylesheet" type="text/css" href="global.css">
        <title>Scrolling effects Betatest</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="wrapper">
            <div class="section01">
                <h1>Überschrift auf erster Seite mit Effekt</h1>
            </div>
            <div class="section02">
                <h1>Zweite Seite</h1>
            </div>
            <div class="section03">
                <h1>Dritte Seite</h1>
            </div>
        </div>
    </body>
</html>

CSS:
html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #dddddd;
}

h1 {
    text-align: center;
    line-height: 1.5em;
    font-size: 3em;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

.section01 {
    padding-left: 4em;
    padding-right: 4em;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: beige;
}

.section02 {
    padding-left: 4em;
    padding-right: 4em;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: darkseagreen;
}

.section03 {
    padding-left: 4em;
    padding-right: 4em;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: beige;
}

Grüße vom Fechter ;-)
 

basti1012

Senior HTML'ler
Kennst du die back to the top Buttons , die erscheinen wenn man ganz runter Scrollt?
Schau dir den Code mal an , das ist fast das gleiche, was du brauchst.
Da wird der Button eingeblendet wenn man eine gewisse Höhe scrollt und du musst dann nur deine Überschrift mit CSS transform oder @keyframes deine Schrift rausfahren lassen.

Dazu solltest du auch add und remove classlist anschauen, bzw. classList.toggle
 

Sempervivum

Senior HTML'ler
Allzu kompliziert wird es mit mehreren Überschriften auch nicht:
Code:
    <div class="wrapper">
        <section>
            <h1>Überschrift auf erster Seite</h1>
        </section>
        <section>
            <h1>Zweite Seite</h1>
        </section>
        <section>
            <h1>Dritte Seite</h1>
        </section>
    </div>
    <script>
        const sections = document.querySelectorAll('section');
        window.addEventListener("scroll", (event) => {
            sections.forEach(sect => {
                const
                    box = sect.getBoundingClientRect(),
                    h1 = sect.querySelector('h1');
                if (box.top < -box.height / 3) {
                    h1.style.transform = 'translateX(-' + box.width + 'px)';
                } else {
                    h1.style.transform = 'translateX(0)';
                }
            });
        });
    </script>
CSS:
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            font-family: arial;
            background-color: #dddddd;
        }

        h1 {
            text-align: center;
            line-height: 1.5em;
            font-size: 3em;
            font-family: Arial, sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.15em;
        }

        .wrapper {
            display: flex;
            flex-direction: column;
        }

        section {
            padding-left: 4em;
            padding-right: 4em;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: beige;
        }

        section h1 {
            transition: transform 1.4s;
        }
Ich hätte es eigentlich eleganter gefunden, mit Klassen zu arbeiten, wie von Basti vorgeschlagen aber so lässt sich die Distanz, um die geshiftet wird, viel einfacher fest legen.
 
Zuletzt bearbeitet:

Oliver77

Mitglied
Hab auch ne Version verhält sich bissel anders.
@Sempervivum mit deinem HTML und CSS.
Javascript:
   const sect = document.querySelectorAll("section");
         var allTop = [];
         const offset = 0;
         const lastOffset = offset +1;
         for(i=0;i<sect.length;i++) {
            allTop.push(sect[i].offsetTop);
         }
      
         window.addEventListener("scroll", (event) => {
                let s = this.scrollY;
                for(i=0;i<allTop.length;i++) {
                     let sectWidth= sect[i].offsetWidth;
                     let h = sect[i].querySelector('h1');
                    if(i<allTop.length-1) {
                        if(s > allTop[i] + offset && s < allTop[i+1] + offset) {
                             h.style.transform = "translate(-"+sectWidth+"px)";
                        }
                        else {
                            h.style.transform = "translate(0%)";
                        }             
                    }
                    else  {
                        if(s > allTop[i]+offset-lastOffset) {
                               h.style.transform = "translate(-"+sectWidth+"px)";
                        }
                        else {
                            h.style.transform = "translate(0%)"
                        }
                    }                 
                }         
         });
Snippet
 
Zuletzt bearbeitet:

basti1012

Senior HTML'ler
Ich wollte es so machen mit Klassen
HTML:
<!DOCTYPE html>
<html lang="de">

<head>
  <title>Scrolling effects Betatest</title>
  <meta charset="utf-8">
  <style>
    html,
body {
  height: 4000px;
  margin: 0;
  margin-top: 500px;
  padding: 0;
  background-color: #dddddd;
  display: flex;
  flex-direction: column;
}

h1 {
  text-align: center;
  line-height: 1.5em;
  font-size: 3em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.section {
  padding: 4em;
  height: 200px;
  display: flex;
  margin-top: 400px;
  justify-content: center;
  align-items: center;
  background-color: beige;
}
.raus {
  margin-left:-200vw;
  transition: all 1s;
}
.rein {
  margin-left: 0;
  transition: all 1s;
}

  </style>
</head>

<body>

  <div class="section">
    <h1>Überschrift</h1>
  </div>
  <div class="section">
    <h1>Zweite Seite</h1>
  </div>

  <div class="section">
    <h1>Dritte Seite</h1>
  </div>
  <script>
   
window.addEventListener("scroll", function(){
    var header = document.querySelectorAll(".section");
    header.forEach(function (el) {
        let distanceToTop = window.pageYOffset + el.getBoundingClientRect().top;
        let elementHeight = el.offsetHeight;
        let scrollTop = document.documentElement.scrollTop;

        if (scrollTop > distanceToTop) {
           el.classList.add("raus");
           if (el.classList.contains("rein")) {
             el.classList.remove("rein");
           }
         } else {
           if (el.classList.contains("raus")) {
             el.classList.remove("raus");
             el.classList.add("rein");
           }
         }
    })
})

  </script>
</body>
</html>


Link zur Lösung


Nur mit classList.toggle fällt mir irgendwie keine sinnvolle lösung ein
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
Kein Grund, hierfür auf Biegen und Brechen classList.toggle zu verwenden.
Es genügt jedoch eine Klasse, dann vereinfacht sich das Ganze ein wenig:
CSS:
        .section {
            padding: 4em;
            height: 200px;
            display: flex;
            margin-top: 400px;
            justify-content: center;
            align-items: center;
            background-color: beige;
            margin-left: 0;
            transition: all 1s;
        }

        .section.raus {
            margin-left: -200vw;
        }
Javascript:
        window.addEventListener("scroll", function () {
            var sections = document.querySelectorAll(".section");
            sections.forEach(function (sect) {
                let distanceToTop = window.pageYOffset + sect.getBoundingClientRect().top;
                let elementHeight = sect.offsetHeight;
                let scrollTop = document.documentElement.scrollTop;

                if (scrollTop > distanceToTop) {
                    sect.classList.add("raus");
                } else {
                    sect.classList.remove("raus");
                }
            })
        })
Tut genau das selbe.
 

Sempervivum

Senior HTML'ler
... und auch die Prüfung auf das Verschwinden der Section kann man vereinfachen:
Code:
        window.addEventListener("scroll", function () {
            var sections = document.querySelectorAll(".section");
            sections.forEach(function (sect) {
                const box = sect.getBoundingClientRect();
                if (box.top < 0) {
                    sect.classList.add("raus");
                } else {
                    sect.classList.remove("raus");
                }
            })
        })
 
Werbung:
Oben