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