$(window).scroll(function(){
var windowWidth = $(this).width();
var windowHeight = $(this).height();
var windowScrollTop = $(this).scrollTop();
// effect - No1
if(windowScrollTop>60){
$('.banner h2').css('display','none');
$('.banner .info').css('display','block');
}else{
$('.banner h2').css('display','block');
$('.banner .info').css('display','none');
}
// effect - No2
var firstAnimation = function(){
$('.clients .clients-info').each(
function(){
$(this).delay(500).animate(
{opacity:1,height:'180',width:'250'},2000);}
);
};
// effect - No3
var secondAnimation = function(){
$('.method:eq(0)').delay(1000).animate({opacity:1},'slow', function(){
$(this).find('h4').css('background-color','#B5C3D5');
});
$('.method:eq(1)').delay(2000).animate({opacity:1},'slow', function(){
$(this).find('h4').css('background-color','#B5C3D5');
});
$('.method:eq(2)').delay(3000).animate({opacity:1},'slow', function(){
$(this).find('h4').css('background-color','#B5C3D5');
});
$('.method:eq(3)').delay(4000).animate({opacity:1},'slow', function(){
$(this).find('h4').css('background-color','#B5C3D5');
});
};
// effect - No4
var thirdAnimation = function(){
$('.blogs').find('p').delay(1400).animate({opacity:1, left:0},'slow');
$('.blogs').find('img').delay(2000).animate({opacity:1, right:0},'slow');
$('.blogs').find('button').delay(2500).animate({opacity:1, bottom:0},'slow');
};
if(windowWidth<=549){
if(windowScrollTop>600){
$('.clients').css('background','tomato');
firstAnimation();
}
if(windowScrollTop>1750){
$('.process').css('background','tomato');
secondAnimation();
}
if(windowScrollTop>3500){
$('.blogs').css('background','tomato');
thirdAnimation();
}
}else if(windowWidth>549 && windowWidth<=991){
if(windowScrollTop>480){
$('.clients').css('background','tomato');
firstAnimation();
}if(windowScrollTop>1150){
$('.process').css('background','tomato');
secondAnimation();
}if(windowScrollTop>2200){
$('.blogs').css('background','tomato');
thirdAnimation();
}
}else{
if(windowScrollTop>450){
$('.clients').css('background','tomato');
firstAnimation();
}if(windowScrollTop>850){
$('.process').css('background','tomato');
secondAnimation();
}
if(windowScrollTop>1600){
$('.blogs').css('background','tomato');
thirdAnimation();
}
}
});
<header>
<div class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" id="logo" href="#">jQuery Animations</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="mynav">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">About</a></li>
<li><a href="#clients">Clients</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#blogs">Blogs</a></li>
</ul>
</div>
</div>
</div>
<div class="banner">
<h2>We help you achieve your goals</h2>
<div class="info">
<a href="#process" title="">See our process</a>
<a href="#clients" title="">See our clients</a>
</div>
</div>
</header>
<section class="about" id="about">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>About us</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<h4>Our history</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum est, beatae rem soluta autem odio placeat, ad, libero aliquam, aut excepturi obcaecati. Sit voluptatum qui quidem, nulla architecto ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum est, beatae rem soluta autem odio placeat, ad, libero aliquam, aut excepturi obcaecati. Sit voluptatum qui quidem, nulla architecto ab.</p>
<p class="visible-lg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum est, beatae rem soluta autem odio placeat, ad, libero aliquam, aut excepturi obcaecati. Sit voluptatum qui quidem, nulla architecto ab.</p>
<p class="visible-lg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum est, beatae rem soluta autem odio placeat, ad, libero aliquam, aut excepturi obcaecati. Sit voluptatum qui quidem, nulla architecto ab.</p>
</div>
<div class="col-xs-12 col-sm-4">
<h4>Our vision</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum est, beatae rem soluta autem odio placeat, ad, libero aliquam, aut excepturi obcaecati. Sit voluptatum qui quidem, nulla architecto ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum est, beatae rem soluta autem odio placeat, ad, libero aliquam, aut excepturi obcaecati. Sit voluptatum qui quidem, nulla architecto ab.</p>
<p class="visible-lg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum est, beatae rem soluta autem odio placeat, ad, libero aliquam, aut excepturi obcaecati. Sit voluptatum qui quidem, nulla architecto ab.</p>
<p class="visible-lg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum est, beatae rem soluta autem odio placeat, ad, libero aliquam, aut excepturi obcaecati. Sit voluptatum qui quidem, nulla architecto ab.</p>
</div>
<div class="col-xs-12 col-sm-4">
<h4>Our values</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum est, beatae rem soluta autem odio placeat, ad, libero aliquam, aut excepturi obcaecati. Sit voluptatum qui quidem, nulla architecto ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum est, beatae rem soluta autem odio placeat, ad, libero aliquam, aut excepturi obcaecati. Sit voluptatum qui quidem, nulla architecto ab.</p>
<p class="visible-lg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum est, beatae rem soluta autem odio placeat, ad, libero aliquam, aut excepturi obcaecati. Sit voluptatum qui quidem, nulla architecto ab.</p>
<p class="visible-lg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum est, beatae rem soluta autem odio placeat, ad, libero aliquam, aut excepturi obcaecati. Sit voluptatum qui quidem, nulla architecto ab.</p>
</div>
</div>
</div>
</section> <!-- end of about section-->
<hr>
<section class="clients" id="clients">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Our Clients</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="clients-info">
<h3>Client1</h3>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="clients-info">
<h3>Client2</h3>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="clients-info">
<h3>Client3</h3>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="clients-info">
<h3>Client4</h3>
</div>
</div>
</div>
</div>
</section> <!-- end of clients section-->
<hr>
<section class="process" id="process">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Our Process</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="method">
<h3>Analyze</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h4>1</h4>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="method">
<h3>Develop</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h4>2</h4>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="method">
<h3>Test</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h4>3</h4>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="method">
<h3>Deploy</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h4>4</h4>
</div>
</div>
</div>
</div>
</section> <!-- end of method section-->
<hr>
<section class="testimonials" id="testimonials">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Our Testimonials</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore eligendi a officiis aspernatur nesciunt ducimus, placeat. Eum, ratione maxime fugiat deserunt doloremque laborum hic quisquam in, libero voluptatibus! Assumenda, eligendi.
</p>
</blockquote>
</div>
<div class="col-xs-12 col-sm-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore eligendi a officiis aspernatur nesciunt ducimus, placeat. Eum, ratione maxime fugiat deserunt doloremque laborum hic quisquam in, libero voluptatibus! Assumenda, eligendi.
</p>
</blockquote>
</div>
<div class="col-xs-12 col-sm-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore eligendi a officiis aspernatur nesciunt ducimus, placeat. Eum, ratione maxime fugiat deserunt doloremque laborum hic quisquam in, libero voluptatibus! Assumenda, eligendi.
</p>
</blockquote>
</div>
</div>
</div>
</section><!-- end of testimonials section-->
<hr>
<section class="blogs" id="blogs">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Latest Blogs</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar scelerisque aliquet. Aliquam eu ultrices nisl. Mauris sit amet odio tincidunt, congue magna a, malesuada odio. Maecenas egestas metus leo, nec vulputate odio pulvinar sodales. Aenean a nunc nisi. Donec eleifend sodales mauris, ut egestas tellus ultrices nec. Integer in nisl vitae libero lobortis egestas. Proin nisi lacus, iaculis sit amet nibh vel, fringilla pellentesque est.</p>
<p class="visible-lg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut delectus ratione aut est, minus eius, dolorem blanditiis culpa ad iusto, accusamus iure alias nihil voluptatem soluta esse velit laudantium eum.</p>
<p class="visible-lg">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.</p>
<button type="button" class="btn btn-primary">Learn more</button>
</div>
<div class="visible-lg col-lg-4">
<img class="img-responsive" src="http://placehold.it/450x300" />
</div>
</div>
</div>
</section><!-- end of blogs section-->
<footer>
<p>Demo by George Martsoukos. <a href="http://www.sitepoint.com/">See article</a>.</p>
</footer>
/*------------------------------------------------------------------
BOOTSTRAP STYLES
-------------------------------------------------------------------*/
.nav > li > a:hover, .nav > li > a:focus{
background-color:#B5C3D5;
outline:none;
}
.navbar{
margin-bottom:0;
}
.navbar button{
background:#ccc;
}
.navbar span{
background:#ededed;
}
.navbar a{
text-align:center;
}
/*------------------------------------------------------------------
DEFAULT STYLES
-------------------------------------------------------------------*/
body{
font-family: 'Lato', sans-serif;
background:#fff;
overflow-x: hidden;
}
section{
margin:100px 0;
}
hr{
margin:10px 0;
}
h3,h4{
text-align:center;
font-weight:bold;
}
section h2{
text-align:left;
position:relative;
margin-bottom:40px;
}
section h2:after{
margin-top:20px;
display:inline-block;
content:'';
width:45px;
height:10px;
border-top:5px solid #B5C3D5;
position:absolute;
bottom:-10px;
left:0;
}
a, a:hover{
color:black;
}
a:hover{
transition:background-color,color .3s ease-in-out;
}
/*------------------------------------------------------------------
HEADER STYLES
-------------------------------------------------------------------*/
header{
background:#ededed;
}
.banner{
background:#B5C3D5;
height:280px;
}
.banner>h2,
.banner .info{
height:50px;
line-height:50px;
position:relative;
top:115px;
margin:0 auto;
text-align:center;
width:50%;
}
.banner>h2{
font-size:2.5em;
color:#25271E;
}
.banner .info{
display:none;
}
.banner a{
height:50px;
font-size:1.3em;
display:inline-block;
width:48%;
text-decoration:none;
border:2px solid rgba(0,0,0,.3);
margin-right:-4px;
transition:all .3s ease-in-out;
}
.banner a:last-child{
margin-left:2%;
}
.banner a:hover{
background:#8FC6FF;
}
/*------------------------------------------------------------------
SECTION.CLIENTS STYLES
-------------------------------------------------------------------*/
.clients .clients-info{
padding:7px;
box-shadow:1px 1px 3px gray, -1px -1px 3px gray;;
margin-bottom:20px;
width:0;
height:0;
line-height:0;
opacity:0;
margin:15px auto 10px;
background:#ededed;
}
.clients .clients-info h3{
margin:0;
line-height:180px;
}
/*------------------------------------------------------------------
SECTION.PROCESS STYLES
-------------------------------------------------------------------*/
.process .method{
background:#ccc;
text-align:center;
padding:10px;
margin-bottom:30px;
border-radius:5px;
opacity:0;
}
.process .method h3{
font-style:italic;
}
.process .method p{
margin:0;
}
.process .method h4{
background:#8FC6FF;
width:60px;
height:60px;
font-size:2em;
font-weight:bold;
border-radius:50%;
line-height:60px;
margin:0 auto;
position:relative;
top:30px;
}
/*------------------------------------------------------------------
SECTION.BLOGS STYLES
-------------------------------------------------------------------*/
.blogs{
margin-bottom:0;
}
.blogs p{
position: relative;
opacity: 0;
left:-750px;
}
.blogs button{
position:relative;
bottom:-50px;
opacity:0;
margin-bottom:20px;
}
.col-lg-4{
position: relative;
}
.blogs img{
position:absolute;
right:-330px;
margin-top:10px;
opacity:0;
}
.firstAnimation {
opacity: 1;
height: 180px;
width: 250px;
}
/*------------------------------------------------------------------
FOOTER STYLES
-------------------------------------------------------------------*/
footer{
text-align:center;
height:52px;
background:#ededed;
line-height:52px;
}
/*------------------------------------------------------------------
MEDIA QUERIES STYLES
-------------------------------------------------------------------*/
@media only screen and (max-width: 1050px) and (min-width:600px){
.banner>h2, .banner .info{
width:70%
}
.banner>h2{
font-size:1.8em;
}
}
@media only screen and (max-width: 599px) and (min-width:350px){
.banner a{
font-size:1em;
}
.banner>h2, .banner .info{
width:80%
}
.banner>h2{
font-size:1.2em;
}
}
@media only screen and (max-width: 349px){
.banner .info{
height:auto;
}
.banner a{
font-size:1em;
width:50%;
display:block;
}
.banner a:first-child{
margin:0 auto;
}
.banner a:last-child{
margin:10px auto 0;
}
.banner>h2, .banner .info{
width:80%
}
.banner>h2{
font-size:1em;
}
}
@media only screen and (max-width: 768px) and (min-width:550px){
.process .row:first-child .col-xs-12,
.clients .row:first-child .col-xs-12{
width:100%;
}
.process .col-xs-12,
.clients .col-xs-12{
width:50%;
}
.clients .col-xs-12:nth-child(3),
.clients .col-xs-12:nth-child(4){
margin-top:15px;
}
}