Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Slide in as you scroll down boxes
/**
* Sliding Image Panels
*/
.slide-panel:not(first-child) {
border-top: 1px solid #ddd;
}
.slide-panel .entry-header {
width: 58%;
}
.slide-panel .entry-content {
width: 36%;
}
.slide-panel:nth-child(even) .entry-header,
.slide-panel:nth-child(odd) .entry-content {
float: left;
}
.slide-panel:nth-child(odd) .entry-header,
.slide-panel:nth-child(even) .entry-content {
float: right;
}
.slide-panel:nth-child(odd) .slide-in {
transform: translateX( 100% );
animation: slide-in 0.8s ease forwards;
}
.slide-panel:nth-child(even) .slide-in {
transform: translateX( -100% );
animation: slide-in 0.8s ease forwards;
}
@keyframes slide-in {
to { transform: translateX( 0 ); }
}
/**
* Function to slide in Images on the Front Page
*
* @see https://css-tricks.com/slide-in-as-you-scroll-down-boxes/
* @param jQuery $
* @since 1.0.0
*/
(function($) {
/**
* Copyright 2012, Digital Fusion
* Licensed under the MIT license.
* http://teamdf.com/jquery-plugins/license/
*
* @author Sam Sehnert
* @desc A small plugin that checks whether elements are within
* the user visible viewport of a web browser.
* only accounts for vertical position, not horizontal.
*/
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return (( compareBottom <= viewBottom ) && ( compareTop >= viewTop ));
};
$(window).scroll( function(e) {
$( '.slide-in-image' ).each( function( i, el ) {
var el = $(el);
if( el.visible( true )) {
el.addClass( 'slide-in' );
}
}).delay( 5000 );
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.