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?
Code
<!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>