<div id="scene" data-relative-input="true" class="parallax">
<div data-depth="0.4" class="text-center">
<img draggable="false" id="mountain" src="https://www.design-fenix.com.ar/codepen/parallax/mountain.png" alt="" >
</div>
<h1 data-depth="0.2" class="text-center">PARALLAX</h1>
<div data-depth="0.3" class="text-center">
<img draggable="false" id="island" src="https://www.design-fenix.com.ar/codepen/parallax/island.png" alt="">
</div>
<div data-depth="0.3" class="text-center">
<img draggable="false" id="birds" src="https://www.design-fenix.com.ar/codepen/parallax/bird.png" alt="">
</div>
<div data-depth="0.1" class="text-center">
<img draggable="false" id="boat" src="https://www.design-fenix.com.ar/codepen/parallax/boat.png" alt="">
</div>
<h2 data-depth="0.1" class="text-center">BLENDING CSS OPTIONS</h2>
</div>
<p class="dev">Developed with ❤ by <a href="https://codepen.io/designfenix/" target="_blank">Fernando Cohen</a> </p>
/* Please ❤ this if you like it! */
/* Follow Me https://codepen.io/designfenix */
/* Created on March 2, 2019 */
/**/
/**/
/* This code can be improved 100%, but I did not spend time on it and it was developed a long time ago */
/**/
/**/
/**/
.dev{
position: fixed;
top:0;
left:0;
padding: 1em;
background-color: rgba(255,255,255,.8);
font-size: 14px;
font-weight: normal;
font-family: 'Noto Sans', sans-serif;
a{
color: #EF5350;
font-weight: bold;
}
}
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
body{
background-color: #f4f9fa;
height:100vh;
display:flex;
align-items: center;
justify-content: center;
}
.parallax{
position: relative;
width: 100%;
overflow:hidden;
min-height:70vh;
text-align: center;
img{
user-select:none;
pointer-events:none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
h1{
font-family: 'Noto Sans', sans-serif;
position: absolute;
font-weight: bold;
text-transform: uppercase;
margin-top: 190px;
font-size: 110px;
color: #eaeaea;
mix-blend-mode: hard-light;
text-shadow: 5px 5px 10px rgba(0,0,0,.2), -1px -1px 25px rgba(0,0,0,.1);
letter-spacing: -10px;
@media screen and (max-width:768px){
margin-top: 35px;
font-size: 55px;
letter-spacing: -3px;
}
}
h2{
font-family: 'Noto Sans', sans-serif;
font-weight: bold;
position: absolute;
text-transform: uppercase;
margin-top: 315px;
font-size: 36px;
color: white;
mix-blend-mode: hard-light;
z-index: 9999999;
text-shadow: 5px 5px 10px rgba(0,0,0,.2), -1px -1px 25px rgba(0,0,0,.1);
letter-spacing: 2px;
@media screen and (max-width:768px){
font-size: 18px;
margin-top: 135px;
}
}
#mountain{
width: 100%;
top: 50px;
max-width: 978px;
}
#boat{
display: inline-block;
width: 100%;
max-width: 176px;
margin-top: 27%;
margin-right: -28%;
}
#birds{
display: inline-block;
width: 100%;
max-width: 304px;
margin-top: 15%;
margin-left: -30%;
}
#island{
display: inline-block;
width: 100%;
max-width:1035px;
margin-top: 15%;
}
}
.text-center{
text-align: center;
width: 100%;
}
View Compiled
/* Please ❤ this if you like it! */
/* Follow Me https://codepen.io/designfenix */
/* Created on March 2, 2019 */
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);
This Pen doesn't use any external CSS resources.