Skip to content

Instantly share code, notes, and snippets.

@thatjeannie

thatjeannie/slide-in.js

Last active August 29, 2015 14:18
Show Gist options
  • Save thatjeannie/00cb4dcaebd209fad14d to your computer and use it in GitHub Desktop.
Save thatjeannie/00cb4dcaebd209fad14d to your computer and use it in GitHub Desktop.
Download ZIP
Slide in and/or fade in content on scroll JQUERY HTML CSS
Raw
slide-in.js
$(document).ready(function() {
$(window).scroll( function(){
// slide in from left to right
$('.slide-right').each(function() {
var objBot = $(this).offset().top + $(this).outerHeight();
var winBot = $(window).scrollTop() + $(window).height();
if( winBot > objBot ){
$(this).animate({
opacity: 1,
marginRight: "0",
marginLeft: "0"
}, 500, 'linear' );
}
});
// slide in from right to left
$('.slide-left').each(function() {
var objBot = $(this).offset().top + $(this).outerHeight();
var winBot = $(window).scrollTop() + $(window).height();
if( winBot > objBot ){
$(this).animate({
opacity: 1,
marginRight: "0",
marginLeft: "0"
}, 500, 'linear' );
}
});
// fade in when obj is 33% in viewport
$('.fade-in').each( function(){
var objBot = $(this).offset().top + ($(this).outerHeight() / 3);
var winBot = $(window).scrollTop() + $(window).height();
if( winBot > objBot ){
$(this).animate({
opacity: 1
}, 800 );
}
});
// slide in from right to left (always visible ) when obj is 50% in viewport
$('.visible-slide-left').each(function() {
var objBot = $(this).offset().top + ($(this).outerHeight() / 2);
var winBot = $(window).scrollTop() + $(window).height();
if( winBot > objBot ){
$(this).animate({
marginRight: "-40px",
marginLeft: "40px"
}, 600, 'linear' );
}
});
// slide in from left to right (always visible ) when obj is 50% in viewport
$('.visible-slide-right').each(function() {
var objBot = $(this).offset().top + ($(this).outerHeight() / 2);
var winBot = $(window).scrollTop() + $(window).height();
if( winBot > objBot ){
$(this).animate({
marginRight: "40px",
marginLeft: "-40px"
}, 600, 'linear' );
}
});
});
});
Raw
zzz.css
.content {
padding: 30px 0;
margin: 20px auto;
overflow: hidden;
}
.fade-in {
opacity: 0;
}
.slide-right {
opacity: 0;
margin-right: 80px;
margin-left: -80px;
}
.slide-left {
opacity: 0;
margin-right: -80px;
margin-left: 80px;
}
Raw
zzz.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example using Bootstrap</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<section class="text-center">
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="icon big block slide-right"><i class="fa fa-plane fa-fw"></i></span>
<h2 class="slide-right">Aero Marketing Plan</h2>
</div>
<div class="col-md-4">
<span class="icon big block slide-right"><i class="fa fa-fighter-jet fa-fw"></i></span>
<h2 class="slide-right">Fighter Marketing Plan</h2>
</div>
<div class="col-md-4">
<span class="icon big block slide-right"><i class="fa fa-rocket fa-fw"></i></span>
<h2 class="slide-right">Rocket Marketing Plan</h2>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment