i've build a small script to let choosen objects fade in when the user scrolls down. My problem is that this script is pretty static, if i would apply this on like 20 different objects i would have to set the height everytime. Here is an example:
$(document).ready(function (){
$(window).scroll(function (){
if ($(this).scrollTop() > 500){
$(".header-js-scroll-fade").css({"opacity" : "1"})
$(".home-vorteile").addClass("header-img-fade-in-by-scroll")
}
else {
$(".header-js-scroll-fade").css({"opacity" : "0"})
$(".home-vorteile").removeClass("header-img-fade-in-by-scroll")
}
})
})
.header-js-scroll-fade {
opacity: 0;
transition: 0.5s;
}
<html>
<head></head>
<body>
<h1 id="vorteile-text">Vertrauen durch,</h1>
<section class="home-vorteile">
<div class="header-js-scroll-fade header-img-fade-in-by-scroll">
<img src="images/temp.jpg" />
<h2>Sicherheit.</h2>
</div>
<div class="header-js-scroll-fade header-img-fade-in-by-scroll">
<img src="images/temp.jpg" />
<h2>Neueste KI Technik.</h2>
</div>
<div class="header-js-scroll-fade header-img-fade-in-by-scroll">
<img src="images/temp.jpg" />
<h2>Beste Materialien.</h2>
</div>
</section>
</body>
</html
Aucun commentaire:
Enregistrer un commentaire