I have read several questions on stack overflow regarding parallax. But none of them have solved my problem. I have built a parallax website using skrollr. It has 6 sections. Four sections translate vertically , remaining two horizontal. The problem is it is not responsive. I have used percentage offsets for data-attributes in images and pixel position for data attributes in order to translate horizontally. Have defined the body height in pixel.
Still the as I change the window size, the parallax effect varies as per height. I would want the effects to be same on all window sizes plus on all mobile devices.
I have used foundation framework as well. But none seem to work. PLease help.
The code is as follows: HTML code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation | DiViz</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main1.css">
<script src="js/vendor/modernizr.js" type="text/javascript"></script>
</head>
<body>
<div class="diviz-content">
<div id="info"></div>
<div class="content-wrapper">
<div id="slides-container">
<div id="slides"
data-0p="transform:translate(0%,0%);"
data-4800="transform:translate(0%,-100%);"
data-7200="transform:translate(0%,-200%);"
data-9600="transform:translate(-100%,-200%);"
data-12000="transform:translate(-200%,-200%);"
data-14400="transform:translate(-300%,-200%);">
<div id="slide-1" class="slide" >
<div class="bcg" style="background-color:yellow;"
data-bottom-top="background-color:blue;"
data-center-top="background-color:red;"
data-top-bottom="background-color:pink;">
<div id="wizard"
data--20p-top="background-color:white;top:0%;"
data-0p-top="background-color:blue;top:0%;">
<img src="img/02.png">
</div>
</div><!-- end of bcg div -->
</div> <!-- end of section 1 -->
<div id="slide-2" class="slide">
<div class="bcg" style="background-color:green;"></div>
</div>
<div id="slide-5" class="slide">
<div class="bcg" style="background-color:orange;"></div>
</div>
<div id="slide-3" class="slide">
<div class="bcg" style="background-color:red;"></div>
</div>
<div id="slide-4" class="slide">
<div class="bcg" style="background-color:blue;"></div>
</div>
<div id="slide-6" class="slide">
<div class="bcg" style="background-color:purple;"></div>
</div>
</div><!-- end of slides -->
</div> <!-- end of slides-container -->
</div> <!-- end of content-wrapper -->
</div> <!-- end of diviz content -->
<div id="helper">
<div class="marker red"></div>
<div class="marker green"></div>
<div class="marker blue"></div>
<div class="marker yellow"></div>
<div class="marker red"></div>
</div> <!-- end of helper div -->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/skrollr.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/foundation.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).foundation();
skrollr.init({
forceHeight:true,
smoothScrolling:true,
render: function(data) {
//Log the current scroll position.
$('#info').text(data.curTop);
}
});
</script>
<script type="text/javascript">
$(document).ready(function() {
//alert("ViewPort Height: "+$("body").innerHeight());
//alert("ViewPort Width: "+$("body").innerWidth());
//alert("slide-1: "+$("#slide-1").height());
// alert("slide-2: "+$("#slide-2").height());
// alert("slide-3: "+$("#slide-3").height());
// alert("slide-4: "+$("#slide-4").height());
// alert("slide-5: "+$("#slide-5").height());
// alert("slide-6: "+$("#slide-6").height());
}); //end of document.ready
</script>
</body>
</html>
Css code:
# info {
position: fixed;
top: 20px;
left: 20px;
background-color:rgba(0,0,0,0.5);
color: #fff;
padding: 20px;
z-index: 9999;
}
html, body {
width:100%;
height:14400px;
}
*, *:before, *:after {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: border-box;
}
.diviz-content{
height:100%;
overflow:hidden;
}
.diviz-content .content-wrapper{
width:100%;
height:100%;
position:relative;
}
.diviz-content > div
{
position:relative;
}
/* full width/height container */
#slides-container {
width: 100%;
height: 100%;
overflow: hidden;
background-color:silver;
}
#slides{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
}
.slide {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#slide-1 {
width:100%;
height:100%;
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0);
}
/* Slide 2 goes to the bottom left */
#slide-2 {
width:100%;
height:100%;
-webkit-transform: translate(0,100%);
-ms-transform: translate(0,100%);
transform: translate(0,100%);
}
/* Slide 5 goes to the bottom left */
#slide-5 {
width:100%;
height:100%;
-webkit-transform: translate(0,200%);
-ms-transform: translate(0,200%);
transform: translate(0,200%);
}
/* Slide 3 goes to the bottom right */
#slide-3 {
width:100%;
height:100%;
-webkit-transform: translate(100%,200%);
-ms-transform: translate(100%,200%);
transform: translate(100%,200%);
}
/* Slide 4 goes to the bottom right */
#slide-4 {
width:100%;
height:100%;
-webkit-transform: translate(200%,200%);
-ms-transform: translate(200%,200%);
transform: translate(200%,200%);
}
/* Slide 6 goes to the bottom right */
#slide-6 {
width:100%;
height:100%; -webkit-transform: translate(300%,200%);
-ms-transform: translate(300%,200%);
transform: translate(300%,200%);
}
.bcg{
width:100%;
height:100%;
}
#helper {
position:absolute;
left:0;
top: 0;
height:14400px;
width: 20px;
}
#wizard{
width:20%;
position:absolute;
top:10%;
left:40%;
}
#wizard img{
width:100%;
}
Aucun commentaire:
Enregistrer un commentaire