Smooth scroll help

Forums Help and How To Smooth scroll help

This topic contains 3 replies, has 2 voices, and was last updated by  saj 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #5884
    Udi
    Member

    Hello
    Can you please tell me how to add new scroll for the page and how it show the letters like its droping when the site open

    #5902
    saj
    Member
    Valued

    I think we’ll need a bit more explanation of what it is you’re referring to.

    Saj

    #5903
    Udi
    Member

    Yes i mean when you scroll up and down it displayed like this site internetplus.biz

    #5920
    saj
    Member
    Valued

    Ok, well here is something I sort of re-did some from https://bootstrapstudio.io/forums/topic/image-animation-on-scroll/

    Add the class animation-element to the item you want to animate. Then add the class slide-left or slide-right or slide-top based on the direction you want it to slide in from. When the item comes into view in the viewport, the item will slide into place “everytime”.

    Here is the CSS

    .animation-element {
      opacity:0;
      position:relative;
    }
    
    .animation-element.slide-left {
      opacity:0;
      -moz-transition:all 500ms linear;
      -webkit-transition:all 500ms linear;
      -o-transition:all 500ms linear;
      transition:all 500ms linear;
      -moz-transform:translate3d(-1000px, 0px, 0px);
      -webkit-transform:translate3d(-1000px, 0px, 0px);
      -o-transform:translate(-1000px, 0px);
      -ms-transform:translate(-1000px, 0px);
      transform:translate3d(-1000px, 0px, 0px);
    }
    
    .animation-element.slide-right {
      opacity:0;
      -moz-transition:all 500ms linear;
      -webkit-transition:all 500ms linear;
      -o-transition:all 500ms linear;
      transition:all 500ms linear;
      -moz-transform:translate3d(1000px, 0px, 0px);
      -webkit-transform:translate3d(1000px, 0px, 0px);
      -o-transform:translate(1000px, 0px);
      -ms-transform:translate(1000px, 0px);
      transform:translate3d(1000px, 0px, 0px);
    }
    
    .animation-element.slide-top {
      opacity:0;
      -moz-transition:all 500ms linear;
      -webkit-transition:all 500ms linear;
      -o-transition:all 500ms linear;
      transition:all 500ms linear;
      -moz-transform:translate3d(0px, -1000px, 0px);
      -webkit-transform:translate3d(0px, -1000px, 0px);
      -o-transform:translate(0px, -1000px);
      -ms-transform:translate(0px, -1000px);
      transform:translate3d(0px, -1000px, 0px);
    }
    
    .animation-element.slide-left.in-view,
    .animation-element.slide-right.in-view,
    .animation-element.slide-top.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);
    }
    

    Here is the JavaScript

    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');
            }
        });
        $(".animation-element.slide-top").animate({
            top: 0
        }, 350, function(){
            $(this).addClass('in-view');
        });
    }
    
    $window.on('scroll resize', check_if_in_view);
    $window.trigger('scroll');
    

    I kind of rigged the scrolling in from top, but it does work.

    There are actual plugins for this kind of thing, I just can’t think of them right now.

    Saj

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.