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
Related
I have this jsfiddle: https://jsfiddle.net/3ncyxnzt/
It currently works well as far as always stopping at a specified margin from the top of the page, but I'd like to make it also stop at the bottom, before it goes under/over the footer. Any ideas on how to make that moving red box stop right above the green footer? The height of the footer is 1000px, so I'd somehow need to set the moving box to stop at 1000px from the bottom.
Here's the code I have so far:
(function(jQuery) {
var element = jQuery('.move'),
originalY = element.offset().top;
var topMargin = 110;
element.css('position', 'relative');
jQuery(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 200);
});
})(jQuery);
I modified following line by adding static value 290 and it reached to bottom.
scrollTop - originalY + topMargin + 290
Is this what you trying to achive?
(function(jQuery) {
var element = $('.move'),
originalY = element.offset().top,
otherDiv = 1000,
staticHeight = $('.other-div').height()-$(element).height(); // Fixed number to stop the move-element before the footer
var topMargin = 110;
jQuery(window).on('scroll', function(event) {
var offset = element.offset().top;
var scrollTop = $(window).scrollTop();
// Check if the move-block gets under the footerblock
if(scrollTop < otherDiv){
element.stop(false, false).animate({
top: scrollTop - originalY + topMargin
}, 200);
}else{
element.stop(false, false).animate({
top: staticHeight //If so, make sure it gets on top of the footerblock staticly
}, 200);
}
});
})(jQuery);
I think you need an if/else statement to check if the block gets behind the height of the div called "other-div".
See the working example here: https://jsfiddle.net/crix/z578c9bo/
Hope it helps!
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
I know there's a pretty simple way of doing this, but I can't seem to find anything in my searches.
I've found lots of examples of getting to a certain scroll location on the page and then animating a div to a different size, however I want to adjust a div's max height depending on the scroll location. Initially i'd like the div max-height to be about 150px, and then as you scroll from around 200px down the page to 400px down the page, I want the max-height of the div to decrease to 75px. Then obviously as you scroll back up, it gets larger.
I can't provide an example of what I've tried already, as I'm yet to attempt it as I have no idea on where to start.
Note: The size should gradually adjust with the scroll position.
I'm not sure if I understood your problem, but when I did I came out with this :D
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop < 200){
maxHeight = 150;
}else if(scrollTop > 400){
maxHeight = 75;
}else{
maxHeight = 150 - 75 * (((scrollTop-200) * 100)/200)/100;
}
$('#thediv').stop().animate({'max-height': maxHeight+"px"}, 500);
})
Here you have a sample : https://jsfiddle.net/keccs4na/
You could try this:
$(window).on('scroll', function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= 200 && scrollTop <= 400) {
$('#divID').stop().animate({height: "75px"}, 250);
} else {
$('#divID').stop().animate({height: "150px"}, 250);
}
});
Note: You'll want to use CSS to initially set the height to 150px.
Try this.
$(window).on('scroll', function () {
var v = $(window).scrollTop();
if (v > 200) {
$('#id-of-div').css({"height": "75px","max-height":"75px"});
}
else {
$('#id-of-div').css({"height": "150px","max-height":"150px"});
}
});
EDIT:
$(window).on('scroll', function () {
var v = $(window).scrollTop();
if (v > 200) {
$('#id-of-div').animate({"height": "75px","max-height":"75px"},500);
}
else {
$('#id-of-div').animate({"height": "150px","max-height":"150px"},500);
}
});
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.
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!