A Pen by Cortney Rasmussen on CodePen.
Created
January 7, 2019 12:01
-
-
Save senormedia/acccfdca2897c68c275fe6ac4e852079 to your computer and use it in GitHub Desktop.
Slide element left/right on scroll
This file contains hidden or 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
| <section> | |
| <div class="animation-element slide-left"> | |
| <h2>Sliding left</h2> | |
| </div> | |
| <div class="animation-element slide-right"> | |
| <h2>Sliding right</h2> | |
| </div> | |
| <div class="animation-element slide-left"> | |
| <h2>Sliding left</h2> | |
| </div> | |
| <div class="animation-element slide-right"> | |
| <h2>Sliding right</h2> | |
| </div> | |
| </section> |
This file contains hidden or 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
| var $animation_elements = $('.animation-element'); | |
| var $window = $(window); | |
| function check_if_in_view() { | |
| var window_height = $window.height(); | |
| var window_top_position = $window.scrollTop(); | |
| var window_bottom_position = (window_top_position + window_height); | |
| $.each($animation_elements, function() { | |
| var $element = $(this); | |
| var element_height = $element.outerHeight(); | |
| var element_top_position = $element.offset().top; | |
| var element_bottom_position = (element_top_position + element_height); | |
| //check to see if this current container is within viewport | |
| if ((element_bottom_position >= window_top_position) && | |
| (element_top_position <= window_bottom_position)) { | |
| $element.addClass('in-view'); | |
| } else { | |
| $element.removeClass('in-view'); | |
| } | |
| }); | |
| } | |
| $window.on('scroll resize', check_if_in_view); | |
| $window.trigger('scroll', check_if_in_view); |
This file contains hidden or 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
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or 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
| // wrapping elements needs full height/some sort of height indication for js scroll | |
| section { | |
| height: 100%; | |
| } | |
| div { | |
| margin: 300px 0; | |
| } | |
| h2 { | |
| margin: 0 auto; | |
| text-align: center; | |
| width: 300px; | |
| height: 300px; | |
| color: white; | |
| background: orange; | |
| vertical-align: bottom; | |
| position: bottom; | |
| } | |
| // animation styles | |
| .animation-element { | |
| opacity: 0; | |
| position: relative; | |
| &.slide-left { | |
| -webkit-transition: all 500ms ease; | |
| -moz-transition: all 500ms ease; | |
| -o-transition: all 500ms ease; | |
| transition: all 500ms ease; | |
| opacity: 0; | |
| -moz-transform: translate3d(-100px, 0px, 0px); | |
| -webkit-transform: translate3d(-100px, 0px, 0px); | |
| -o-transform: translate(-100px, 0px); | |
| -ms-transform: translate(-100px, 0px); | |
| transform: translate3d(-100px, 0px, 0px); | |
| } | |
| &.slide-right { | |
| -webkit-transition: all 500ms ease; | |
| -moz-transition: all 500ms ease; | |
| -o-transition: all 500ms ease; | |
| transition: all 500ms ease; | |
| opacity: 0; | |
| -moz-transform: translate3d(100px, 0px, 0px); | |
| -webkit-transform: translate3d(100px, 0px, 0px); | |
| -o-transform: translate(100px, 0px); | |
| -ms-transform: translate(100px, 0px); | |
| transform: translate3d(100px, 0px, 0px); | |
| } | |
| &.slide-left.in-view, &.slide-right.in-view { | |
| opacity: 1; | |
| -moz-transform: translate3d(0px, 0px, 0px); | |
| -webkit-transform: translate3d(0px, 0px, 0px); | |
| -o-transform: translate(0px, 0px); | |
| -ms-transform: translate(0px, 0px); | |
| transform: translate3d(0px, 0px, 0px); | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment