06.02.2023, 14:48
Hallo Tüftler,
Ich suche ein "Javascript" oder "Jquery" mit dem man für einen bestimmten Scrollbereich langsam scrollt oder das scrollen pausiert. Zum Beispiel 2 bis 300 Pixel.
Das ganze sollte sich so verhalten:
So sieht der Code jetzt aus:
Ich suche ein "Javascript" oder "Jquery" mit dem man für einen bestimmten Scrollbereich langsam scrollt oder das scrollen pausiert. Zum Beispiel 2 bis 300 Pixel.
Das ganze sollte sich so verhalten:
- Der 1. Pixel wird normal gescrollt.
- Wird weiter gescrollt (im Beispiel: 2 bis 300 Pixel) wird langsam oder gar nicht gescrollt.
- Ab 301 Pixel wird normal weiter gescrollt.
- Noch besser wäre wenn man anstatt Pixel den Wert VH verwenden könnte.
So sieht der Code jetzt aus:
Code:
<style>
.wzphdov_outer {
position: relative;
width: 100%;
background-image: url("https://www.zella.de/media/images/probstei-zella-1920x800.jpg");
background-color: #cccccc;
height: calc(100vh);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.wzphdov_image {
display: block;
width: 100%;
height: auto;
}
.wzphdov_overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .8s ease;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
.wzphdov_text {
color: white;
font-size: 42px;
font-weight: 900;
position: absolute;
top: 80%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
transition: .8s ease;
}
</style>
<div class="wzphdov_outer">
<div class="wzphdov_overlay"></div>
<div class="wzphdov_text">HALLO Freunde</div>
</div>
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
/*CSS ab Scrollposition 1 Pixel*/
if(jQuery(this).scrollTop()>=1) {
jQuery('.wzphdov_overlay').attr('style','height:0;');
jQuery('.wzphdov_text').attr('style','top:40%;');
}
/*CSS wen wieder nach oben gescrollt*/
else if (jQuery(this).scrollTop()<1) {
jQuery('.wzphdov_overlay').attr('style','height:100%;');
jQuery('.wzphdov_text').attr('style','top:80%;');
}
})
})
</script>