Smooth scroll help

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

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

Saj

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

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