Testing parallax.js with pictures from www.sjodalen.no
A Pen by Helle Holmsen Sem on CodePen.
<body> | |
<main> | |
<div id="overlay"></div> | |
<ul id="scene"> | |
<li class="layer" data-depth="0.1"> | |
<div class="layer1"></div> | |
</li> | |
<li class="layer" data-depth="0.2"> | |
<div class="layer2"></div> | |
</li> | |
</ul> | |
<div class="wrapper"> | |
<img alt="logo" src="http://i57.tinypic.com/35iw4ki.jpg"> | |
</div> | |
</main> | |
</body> |
Testing parallax.js with pictures from www.sjodalen.no
A Pen by Helle Holmsen Sem on CodePen.
$(document).ready(function(){ | |
$('#scene').parallax(); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/1.1.1/jquery.parallax.min.js"></script> |
body { | |
margin: 0; | |
padding: 0; | |
overflow-x: hidden; | |
overflow-y: auto; | |
backface-visibility: hidden; | |
} | |
#overlay { | |
background-color: #000; | |
position: fixed; | |
width: 100%; | |
height: 100%; | |
z-index: 99; | |
opacity: 0.08; | |
} | |
#scene { | |
padding: 0; | |
margin: 0; | |
width: 115%; | |
height: 120vh; | |
overflow: hidden; | |
top: -5%; | |
left: -5%; | |
transform: translate(-50%,-50%); | |
-webkit-transform: translate(-50%,-50%); | |
} | |
main { | |
width: 100%; | |
height: 100vh; | |
overflow: hidden; | |
} | |
.wrapper { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
z-index: 101; | |
transform: translate(-50%,-50%); | |
-webkit-transform: translate(-50%,-50%); | |
text-align: center; | |
} | |
.wrapper img { | |
width: 350px; | |
height: auto; | |
} | |
.layer { | |
width: 110%; | |
height: 120vh; | |
overflow: hidden; | |
} | |
.layer2 { | |
background-image: url(http://i62.tinypic.com/fx5wd1.png); | |
background-size: cover; | |
background-position: center; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
left: -5%; | |
top: -5%; | |
} | |
.layer1 { | |
background-image: url(http://i60.tinypic.com/sp94ls.png); | |
background-position: center; | |
background-size: cover; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
left: -5%; | |
top: -5%; | |
} | |
@media (max-width:700px) { | |
.layer2 { | |
background-size: cover; | |
background-position: center; | |
width: 167%; | |
height: 77vh; | |
left: -69%; | |
top: 27%; | |
} | |
.layer1 { | |
background-position: center; | |
background-size: cover; | |
width: 100%; | |
height: 115%; | |
left: -5%; | |
top: -1%; | |
} | |
.wrapper img { | |
width: 180px; | |
height: auto; | |
} | |
} |