Skip to content

Instantly share code, notes, and snippets.

@ronnyandre
Created March 28, 2013 09:32
Show Gist options
  • Save ronnyandre/5261938 to your computer and use it in GitHub Desktop.
Save ronnyandre/5261938 to your computer and use it in GitHub Desktop.
A CodePen by Ronny-André Bendiksen. Slide in from bottom boxes - Saw this while using Google+ app on my (Android) Nexus 7.
<section>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
</section>
// Makes use of the visible plugin
// https://raw.github.com/teamdf/jquery-visible/master/jquery.visible.min.js
var win = $(window);
var allMods = $(".module");
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("already-visible");
}
});
win.scroll(function(event) {
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-in");
}
});
});
@import "compass";
* {
@include box-sizing(border-box);
}
section {
background: #eee;
max-width: 600px;
margin: 0 auto;
padding: 20px;
overflow: hidden;
}
.module {
width: 48%;
min-height: 200px;
background: white;
position: relative;
float: left;
padding: 20px;
margin-right: 4%;
margin-bottom: 4%;
&:nth-child(even) {
margin-right: 0;
}
box-shadow: 0 1px 3px rgba(black, 0.2);
}
body {
background: url(http://s.cdpn.io/3/blurry-blue.jpg);
background-size: cover;
padding: 30px;
}
.come-in {
transform: translateY(150px);
animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
animation-duration: 0.6s;
}
.already-visible {
transform: translateY(0);
animation: none;
}
@keyframes come-in {
to { transform: translateY(0); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment