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

Inhalte auf der Seite beim Scrollen verdrehen oder verschieben

F

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 ;-)
 
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
 
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:
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:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben