<script type="text/javascript" src="../javascript/jquery-2.1.4.min.js"></script>
body{
background: url(../css/imgs/1.jpg) no-repeat 50% 0;
font-family: 'helvetica Neue', sans-serif;
color: #FFF;
background-size: cover;
}
#slogan1,#slogan2,#slogan3{
position: relative;
height: 500px;
}
#slogan1{
padding-top: 200px;
text-align: center;
opacity: 0;
-webkit-transition: all 2s .5s;
transition: all 2s .5s;
}
#slogan1.show{
opacity: 1;
}
#slogan1 h1{
font-size: 81px;
text-transform: uppercase;
}
#slogan1 h2{
font-size: 32px;
font-weight: 100;
}
#slogan2{
padding-top: 50px;
text-align: center;
}
#slogan2 h1{
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transition: all 1s;
transition: all 1s;
}
#slogan2 h2{
font-size: 26px;
opacity: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 1s .5s;
transition: all 1s .5s;
}
#slogan2 h1.scrolled{
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
#slogan2 h2.scrolled{
opacity: 1;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#slogan3 h1{
position: absolute;
font-size: 72px;
left: 10%;
top: 60px;
opacity: 0;
-webkit-transform: translateX(-200px);
transform: translateX(-200px);
-webkit-transition: all 1s;
transition: all 1s;
}
#slogan3 h2{
position: absolute;
font-size: 24px;
left: 10;
width: 650px;
top: 200px;
opacity: 0;
-webkit-transform: translateX(200px);
transform: translateX(200px);
-webkit-transition: all 1s .25s;
transition: all 1s .25s;
}
#slogan3 img{
position: absolute;
left: 60%;
top: 100px;
opacity: 0;
-webkit-transform: translateX(200px);
transform: translateX(200px);
-webkit-transition: all 1.5s .5s;
transition: all 1.5s .5s;
}
#slogan3 h1.scrolled,#slogan3 h2.scrolled,#slogan3 img.scrolled{
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
<script type="text/javascript">
$(document).ready(function(){
$('#slogan1').addClass('show');
var slogan2_y =$('#slogan2').offset().top;
var slogan3_y=$('#slogan2').offset().top;
var windowHeight = $(window).height();
var buffer =200;
$(window).scroll(function(){
var pos =$(window).scrollTop();
if(pos > slogan2_y-buffer){
$('#slogan2>h1').addClass('scrolled');
$('#slogan2>h2').addClass('scrolled');
}
if(pos>slogan3_y-buffer){
$('#slogan3>h1').addClass('scrolled');
$('#slogan3>h2').addClass('scrolled');
$('#slogan3>img').addClass('scrolled');
}
if(pos
h1').removeClass('scrolled');
$('#slogan2>h2').removeClass('scrolled');
}
if(pos
h1').removeClass('scrolled');
$('#slogan3>h2').removeClass('scrolled');
$('#slogan3>img').removeClass('scrolled');
}
});
})
</script>
Done fringilla
Aenean cursus metus nec sem aliquet maximus in ut felis
Pellentesque
Aenean cursus metus nec sem aliquet maximus in ut felis
Vestibuilum
Aenean cursus metus nec sem aliquet maximus in ut felis
