Horizontal FullPager scroll Animate - javascript

I have this simple full-page horizontal scroll code, I would like to add an animate () to give it a 2 second time to scroll but I don't know how. You can also help me by advising me, please.
$('#fullpage').on('mousewheel', function(event, delta) {
var direction = delta > 0 ? 1 : -1;
this.scrollBar = true;
this.scrollLeft -= jQuery(window).width() * direction;
event.preventDefault();
});

Related

fast smooth scroll on mouse wheel

I have a project in which I want fast smooth scrolling. I tried lot and I find some solutions. But they all can't scroll smooth when I rotate mouse wheel multiple times at a time and the last rotate of mouse wheel get smooth. After tons of searching I got a example of what i want. But I can't figure out what's is the js function. Here is the example. I don't want to use any plugin because I already used too many plugins in my project and for this it's loads so slow. Is it possible with only Jquery or pure javascript?
It's not my solution but I thought it's fitting and pretty neat so I will just copy-paste it:
jQuery.extend(jQuery.easing, {
easeOutQuint: function(x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
}
});
var wheel = false,
$docH = $(document).height() - $(window).height(),
$scrollTop = $(window).scrollTop();
$(window).bind('scroll', function() {
if (wheel === false) {
$scrollTop = $(this).scrollTop();
}
});
$(document).bind('DOMMouseScroll mousewheel', function(e, delta) {
delta = delta || -e.originalEvent.detail / 3 ||
e.originalEvent.wheelDelta / 5; //edit this to your needs - the higher the slower
wheel = true;
$scrollTop = Math.min($docH, Math.max(0, parseInt($scrollTop - delta * 30)));
$($.browser.webkit ? 'body' : 'html').stop().animate({
scrollTop: $scrollTop + 'px'
}, 2000, 'easeOutQuint', function() {
wheel = false;
});
return false;
});
This overwrites the default behaviour for scroll events.
Source and full credits to Fiddle User Szar - fiddle: https://jsfiddle.net/Szar/xmkwa8ft/
P.S. this was found in a 1min google search using the term "smooth mouse scroll css"

Update: Add more control: hide header on scroll and work from a certain width size

Updated this question again:
I have an existing script which works, but the only thing that I would like to have more control on is specifying the tolerance for up/down scroll and when it shows or hides the menu. Currently, the menu slides up at first after scrolling 44px (delta value)--which is OK--but after that, I would like the menu to scroll up or down directly on scroll. When you set the delta value to 0px you can see what i mean, but than it doesn't have the delay at the first scroll (understand it?).
Second thing is that i would like to add a function to the script that will let me control from which width it will start to work. I want it to work from 667px and downwards and not work when it is more than that value (some what like a media query).
JSFiddle
// Hide header on scroll down //
var didScroll;
var lastScrollTop = 0;
var delta = 44;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up');
}
}
lastScrollTop = st;
}
Two questions / two answers:
but after that I would like the menu to scroll up or down directly on scroll
set delta to 0
Also what is the 250 value? Can't seem to see what it does?
250 is the interval of the check if the user scrolled

Animate {"Top"} how to stop scrolling div on top position being 0 px - Jquery

Trying to create a scrolling div. Wanted to stop (thescrollingdiv) div once it has reached a particular top position and scrolled all the way to the bottom and not overshoot the parent div into infinity scrolling zone. thescrollingdiv does not have any height specified but its parent div does.Thanks.
$('#div a).click(function(e){
e.preventDefault();
$('#thescrollingdiv').stop(true,true).animate({ "top": '-=100px'}, 500)
ScrollTop tells you where you are at. Check the existing top against scrolltop and work the math to set your limits.
var scrollTop = $('#thescrollingdiv').scrollTop();
var newTop = parseFloat($('#thescrollingdiv').css('top')) - 100;
if (scrollTop < 0) {
newTop = 0;
}
$('#thescrollingdiv').stop(true,true).animate({ "top": newTop}, 500)
UPDATE
Something like this.
var topLimit = 0;
var bottomLimit = 800;
var containerTop = parseFloat($('container').css('top'));
var containerBottom = parseFloat($('container').css('height')) + containerTop;
var destination = containerTop - 100;
// compensate for going too far up
destination = (destination < 0) ? 0 : destination;
// compensate for going too far up
destination = (containerBottom > bottomLimit) ? bottomLimit : destination;
// now that you know you are within your custom limits, animate it.
animate(destination);
This is almost pseudo code as I don't know what your code looks like, but it gives you an idea. You have to actually DO THE WORK in setting the limits for your 'newTop', before you call animate in the first place.
You can figure it out. Don't be a lazy programmer, though.

Automatic Scrolling Suddenly Stops

I've written the following script with the simple purpose of scrolling to the right when the user hovers over the right side of the screen and scrolling to the left when the user hovers over the left side of the screen. It works fine except that if you leave the mouse in the same spot for too long, then scrolling will stop before reaching the end. It begins scrolling again if you subsequently move the mouse. I can't understand why this is happening, since the code initiates an infinite timed loop which checks mouse position and scrolls accordingly. Its as if the mouse position stops being reported if the mouse is inactive for too long. Any ideas?
var mouseX = 0;
var scrollX = 0;
var timer;
$(document).ready(function() {
// Record the mouse position if the mouse is moved
$(document).mousemove(function(e) {
mouseX = e.pageX;
});
// Record the scroll position if the page is scrolled
$(document).scroll(function() {
scrollX = $(window).scrollLeft();
});
// Initiate the scrolling loop
scroll();
});
function scroll() {
// If the user is hovering over the right side of the window
if ((mouseX - scrollX) > 0.75*$(window).width()) {
scrollX += 1;
$(window).scrollLeft(scrollX);
}
// If the user is hovering over the left side of the window
if ((mouseX - scrollX) < (0.25*$(window).width())) {
scrollX -= 1;
$(window).scrollLeft(scrollX);
}
// Repeat in 5 ms
timer = window.setTimeout('scroll()', 5);
}
I don't know exactly what's wrong with your code, but why don't you use jQuery's animation?
It's more reliable than writing your own.
//inside $(document).ready():
var which = 0;
$('body').mousemove(function(e) {
var w_width = $(window).innerWidth();
var prc = (e.pageX - $(window).scrollLeft())/w_width;
var next_which = prc < 0.25 ? -1 : (prc > 0.75 ? 1 : 0);
if (next_which == which)
return;
which = next_which;
$('html,body').stop(true);
if (which != 0)
$('html,body').animate({scrollLeft: (which > 0 ? $(document).innerWidth()-w_width : 0)}, 2000);
}).mouseleave(function() {
$('html,body').stop(true);
which = 0;
});
​ ​
See fiddle
jQuery's mousemove() event fails to fire when e.pageX > $(window).width() (or thereabouts). Looks like a jQuery bug to me. That could be impeding your progress!

Jquery/Javascript Opacity animation with scroll

I'm looking to change the opacity on an object (and have the transition be animated) based on a users scroll.
example(http://davegamache.com/)
I've searched everywhere
like here, but it ends up pointing me to the waypoints plugin (http://stackoverflow.com/questions/6316757/opacity-based-on-scroll-position)
I've implemented the [waypoints][1] plugin and have the object fading once it's higher than 100px. [Using the offet attribute] but would like to basically control the opacity of an object and have the animation be visible like the above example.
I've searched all over- this is my last resort.
Any help is greatly appreciated.
working exemple with starting and ending point here:
http://jsfiddle.net/z7E9u/1/
I copy paste basic code here
var fadeStart=100 // 100px scroll or less will equiv to 1 opacity
,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity
,fading = $('#fading')
;
$(window).bind('scroll', function(){
var offset = $(document).scrollTop()
,opacity=0
;
if( offset<=fadeStart ){
opacity=1;
}else if( offset<=fadeUntil ){
opacity=1-offset/fadeUntil;
}
fading.css('opacity',opacity).html(opacity);
});
Here's a working example: http://jsfiddle.net/meEf4/
And the code:
var target = $('div');
var targetHeight = target.outerHeight();
$(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css('opacity', scrollPercent);
}
});
All we do is grab the current scroll position of the window, figure out what percentage of the element in question is now off-screen, and set its opacity with that percentage.
As I have lower than 50 reputation I cannot reply to Lonut's question, how to do the reverse. Here is my code if you would like the reverse, quite handy for navigation bars.
$(window).scroll(function () {
var offset = $(document).scrollTop()
var opacity = 0;
if (offset <= 0) {
opacity = 0;
} else if (offset > 0 & offset <= 200) {
opacity = (offset - 1) / 200;
}
else {
opacity = 1;
}
$('.black-background').css('opacity', opacity).html(opacity);
});
I looked at the source code of that site.
it uses: $(document).scrollTop();
to determine the scroll height, and $(window).scroll(function(){}) to bind an event listener to scrolling.
try this:
$(window).scroll(function(){
var fromtop = $(document).scrollTop(); // pixels from top of screen
$('#fademeout').css({opacity: 100-fromtop}); // use a better formula for better fading
});
I know I am a bit late to the party, but here's my approach:
$(window).scroll(function(){
var st = $(window).scrollTop();
var range = 300 // finetune this to the desired effect
$('.yourelement').css("opacity", 1- st / range); // animate your element
});
I like this solution
var fadeStart=100 // 100px scroll or less will equiv to 1 opacity
,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity
,fading = $('#fading')
;
$(window).bind('scroll', function(){
var offset = $(document).scrollTop()
,opacity=0
;
if( offset<=fadeStart ){
opacity=1;
}else if( offset<=fadeUntil ){
opacity=1-offset/fadeUntil;
}
fading.css('opacity',opacity).html(opacity);
});
How could you use the mouse scrolling for the fading ONLY until eg 0.2 opacity is reached and then scroll the page too? The solutions i found so far disable the mouse scrolling function completely

Categories

Resources