0
Ich versuche, die .title zu verblassen, wenn es in der Nähe der oberen/unteren Rand des Bildschirms ist. Ich denke, das Problem ist mit dem Jquery-Dokument Targeting. Wie Sie sehen können, funktioniert die anfängliche Überblendung perfekt, aber der Text verbläßt nicht, wenn er ganz oben/unten ist.Text-Deckkraft verblassen, wenn am Rand des Ansichtsfensters
Sie können den Codepen here anzeigen.
Jede Hilfe würde sehr geschätzt werden!
function scrollBanner() {
$(document).scroll(function() {
var scrollPos = $(this).scrollTop();
$('.title').css({
'top': (scrollPos/3) + 'px',
'opacity': 1 - (scrollPos/100)
});
$('.title').css({
'background-position': 'center ' + (-scrollPos/200) + 'px'
});
});
}
scrollBanner();
$(document).ready(function() {
$(".title").delay(1000).hide().fadeIn(2000);
});/* Parallax base styles
--------------------------------------------- */
.parallax {
height: 500px;
/* fallback for older browsers */
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
-webkit-overflow-scrolling: touch;
perspective: 300px;
}
.parallax__group {
position: relative;
height: 500px;
/* fallback for older browsers */
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
.parallax__layer--deep {
-webkit-transform: translateZ(-600px) scale(3);
transform: translateZ(-600px) scale(3);
z-index: 2;
}
/* demo styles
--------------------------------------------- */
body,
html {
overflow: hidden;
}
body {
font: 100%/1.5 Arial;
}
* {
margin: 0;
padding: 0;
}
.parallax {
font-size: 200%;
}
/* centre the content in the parallax layers */
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* style the groups
--------------------------------------------- */
#group1 {
z-index: 5;
/* slide over group 2 */
}
#group1 .parallax__layer--base {
background: rgb(102, 204, 102);
}
#group2 {
z-index: 3;
/* slide under groups 1 and 3 */
}
#group2 .parallax__layer--back {
background: rgb(123, 210, 102);
}<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<div class="parallax">
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tellus risus, vestibulum non neque ut, consectetur fermentum neque. Nam pharetra tellus pulvinar ante suscipit dapibus. Quisque pharetra libero vel lectus placerat laoreet.</div>
</div>
</div>
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">Background Layer</div>
</div>
</div>
Sie können [offset()] (http://api.jquery.com/offset/) verwenden, um zu überprüfen, wie nahe das Element am oberen Bildschirmrand ist. –
Danke für die Hilfe @DiddleDot. Wo genau würde ich die .offset() setzen, um den gewünschten Effekt zu erzielen? –