Parallax effect in CSS - text overflows despite z index
Question
Here is my code
http://codepen.io/girlcs/pen/zrPojz
function Func(){
var ypos = window.pageYOffset;
var t2 = document.getElementById('para');
if(ypos > 500)
{
t2.style.opacity = 0;
}
else
{
t2.style.opacity = 1;
}
}
window.addEventListener("scroll",Func);
I used the parallax effect . However when I scroll down and reach the passage below , the 'When dance meets artm ' is still visible in the background of the lorem ipsum passages. - this must not happen.My js works when i resize to a small browser window but not in a complete full screen . Maybe something wrong with the PageYoffSet value in full screens.What can I do to make the opacity change in full screens too?
2 answers
solution1
0 2016-01-18 20:10:29
Easy fix.
Rather than setting a fixed scoll position for the fade out of the text, simply grab the window height for the device and set the fade based on percentage. That way when the banner is shorter on large screens, it will still fade at the appropriate point.
HTML
<html>
<head>
<link href="ho.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<ul>
<li><a href="#">The Quad</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Plans</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Book Online</a></li>
</ul>
</div>
<div id="welcome">
<div id="para">
<p>Where dance meets artm</p><br/><br/>
<p class="about us">Know More</p>
</div>
</div>
<div id="bottom">
<div id="lower">
<ul>
<li><a href="#">Vhhhhhhs</a></li>
<li><a href="#">Wyyyyyyys</a></li>
<li><a href="#">Break free</a></li>
</ul>
</div>
<p class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<script src="C:\Users\bonny\Documents\samples sites\jquery\jquery.js"></script>
<style src="ho.js"></style>
</body>
</html>
CSS
body{
margin:0;
background-color:white;
background-color:#0d0d0d; }
#header{
display:inline-block;
margin:0;
background-color:black;
width:100%;
height:auto;}
#header ul{
margin:10 auto;
opacity:0.89;
line-style-type:none;}
#header ul li a{
display:inline;
color:white;
text-decoration:none;
text-align:center;
padding:5px;}
#header ul li{
display:inline;
margin:10px;
float:center;
font-size:24px;
padding:5px;
}
#welcome{
display:inline-block;
width:100%;
height:700px;
position:relative;
background-image:url('https://pixabay.com/static/uploads/photo/2013/02/21/19/08/sand-84589_960_720.jpg');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
overflow:hidden;
}
#para p{
color:black;
margin:auto;
width:100%;
text-align:center;
margin-top:20%;
font-size:30px;
position:fixed;
overflow:hidden;
}
#bottom{
z-index:1000;
}
#lower{
width:100%;
height:auto;
display:inline-block;
position:relative;
background-color:black;
}
#lower ul{
margin:0 auto;
opacity:0.85;
width:80%;
list-style-type:none;
text-align:center;
}
#lower ul li a {
display:inline;
color:white;
text-decoration:none;
text-align:center;
border:2px solid grey;
}
#lower ul li{
display:inline;
font-size:30px;
margin:10px;
background-color:black;
}
p.one , p.two, p.three{
display:none;
}
#entry1{
color:#3366ff;
}
p.entry,p.entry2{
margin:auto 20px;
position:relative;
display:inline;
}
h2{
font-weight:strong;
text-align:center;
margin:auto;
width:100%;
}
JS
function Func(){
var ypos = window.pageYOffset;
var t2 = document.getElementById('para');
var h = window.innerHeight;
if(ypos > (h * .3))
{
t2.style.opacity = 0;
}
else
{
t2.style.opacity = 1;
}
}
window.addEventListener("scroll",Func);
solution2
0 2016-01-18 20:14:05
Look on that:
Okay, the element with z-index 3 overlaps the one with z-index 1. Just add between your text on z-index 2. Hope it fixed your issue :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.