Created
January 10, 2017 07:45
-
-
Save jekkilekki/4f0c343a72b9dfc7a43f8444a84d735e to your computer and use it in GitHub Desktop.
Slide in as you scroll down boxes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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 ); } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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