Skip to content

Instantly share code, notes, and snippets.

@senormedia

senormedia/index.html

Created January 7, 2019 12:01
Show Gist options
  • Save senormedia/acccfdca2897c68c275fe6ac4e852079 to your computer and use it in GitHub Desktop.
Save senormedia/acccfdca2897c68c275fe6ac4e852079 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. senormedia created this gist Jan 7, 2019.
    15 changes: 15 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@

    <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>
    26 changes: 26 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    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);
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    7 changes: 7 additions & 0 deletions slide-element-left-right-on-scroll.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Slide element left/right on scroll
    ----------------------------------


    A [Pen](https://codepen.io/cortneyPop/pen/pgYpqL) by [Cortney Rasmussen](https://codepen.io/cortneyPop) on [CodePen](https://codepen.io).

    [License](https://codepen.io/cortneyPop/pen/pgYpqL/license).
    65 changes: 65 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    // 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);
    }
    }