Skip to content

Instantly share code, notes, and snippets.

@joshuaogle

joshuaogle/animate.css.scss

Created October 7, 2014 16:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joshuaogle/f309fc105c091c24337e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joshuaogle/f309fc105c091c24337e to your computer and use it in GitHub Desktop.
Download ZIP
Animate on scroll
Raw
animate.css.scss
# Requires BourbonJS
@include keyframes(reveal) {
0% {
@include transform(translateY(em(30)));
opacity: 0;
}
100% {
@include transform(translateY(0));
opacity: 1;
}
}
.animated {
@include animation(reveal 1s);
}
Raw
animate.html.erb
<div class="container">
<%= image_tag "image_name", class: "animate" %>
</div>
Raw
animate.js
$(function() {
var animate_icon;
if ($(".animate").length > 0) {
animate_icon = function() {
return $(".animate").each(function(i, el) {
var $el;
$el = $(el);
if ($el.visible(true, true)) {
return $el.addClass("animated");
}
});
};
animate_icon();
return $(window).scroll(function(event) {
return animate_icon();
});
}
});
Raw
animate.js.coffee
$ ->
if $(".animate").length > 0
animate_icon = ->
$(".animate").each (i, el) ->
$el = $(el)
if $el.visible(true, true)
$el.addClass("animated")
animate_icon()
$(window).scroll (event) -> animate_icon()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment