Animated Scroll Effect

by Solodev CMS

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.7/jquery.viewportchecker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container-fluid">
	
	<div class="heading">
		<h1>
			A New Approach to Business
		</h1>
		<p class="lead">
			Companies are looking to do business with other great companies.<br />WebCorpCo theme has what it takes to show the world you mean business.
		</p>
	</div>
			
	<section>
		<div class="row">
			<div class="col-md-8 col-md-push-4 text-center">
				<div class="featuredImage hiddenImg">
					<i class="fa fa-users"></i>
				</div>
			</div>
			<div class="col-md-4 col-md-pull-8 productFeature">
				<h2>Marketing</h2>
				<p>WebCorpCo is all about making sure your marketing stack is in alignment with your company as well as the customers you serve. There is no 'one size fits all' approach to marketing. Every business is unique, customers are unique, and your marketing should be as well.</p>
			</div>
		</div>
	</section>

	<section>
		<div class="row">
			<div class="col-md-8 col-md-push-4 text-center">
				<div class="featuredImage hiddenImg">
					<i class="fa fa-paint-brush"></i>
				</div>
			</div>
			<div class="col-md-4 col-md-pull-8 productFeature">
				<h2>Design</h2>
				<p>Designs are automatically created to both mimic and improve your existing designs and dynamically A/B tests various designs and layouts until finding the ones with the highest engagement and conversion rate.</p>
			</div>
		</div>
	</section>
				
	<section>
		<div...

CSS

.heading {
  margin: 0 auto;
  margin-bottom: 50px;
  border-bottom: 1px solid #eceaea;
  max-width: 720px;
  text-align: center;
}

section {
  padding: 100px 0;
  border-bottom: 1px solid #eceaea;
  max-width: 720px;
  margin: 0 auto;
}
section .animated {
  animation-duration: 2s;
}
.productFeature {
  padding-right: 50px;  
}
.hiddenImg {
  opacity:0;
}
.visibleImg {
  opacity:1;
}
.fa {
  font-size: 20em;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

JavaScript

jQuery(document).ready(function() {
	jQuery('.featuredImage').addClass("hiddenImg").viewportChecker({
	    classToAdd: 'visibleImg animated fadeInUp', // Class to add to the elements when they are visible
	    offset: 100    
	   });   
});