Animate element on scroll - javascript

I would like to animate a div when user scrolls the page.
For that, i implemented this code:
var slide = jQuery(".apresentacao-spc-01");
var opening = false;
var closing = false;
var pos = jQuery(window).scrollTop();
jQuery(window).scroll(function() {
var pos = jQuery(window).scrollTop();
console.log(pos);
if (pos > 100) {
if (!opening) {
opening = true; closing = false;
slide.stop().animate({
'opacity': 1,
'margin-left': '0px'
}, 700, function() {
opening = false;
});
}
} else {
if (!closing) {
closing = true; opening = false;
slide.stop().animate({
'opacity': 0,
'margin-left': '-1000px'
}, 500, function() {
closing = false;
});
}
}
});
The issue is:
Using "if (pos > 100) {", if the user resolution is big enough to show the element before he needs to scroll, he won't see the element unless he begins to scroll the page.
My question is:
How can I get a scroll animation that will be executed when the element is visible?
I mean: If the element is visible on page load, the animation automatically starts... If the element is not visible on page load, the animation waits the scroll reach the element to start...
Thanks.

There a few different things you could do. My first thought was to query the height of the viewport with something like this:
var viewportWidth = document.documentElement.clientWidth
, viewportHeight = document.documentElement.clientHeight
And then trigger the animation if it is taller than the distance the element is down.
A more dynamic solution would be to use a function that checks to see if the element is in viewport the automatically, that way you wouldn't need to worry about adjusting the height if you changed stuff on your page:
function isElementInViewport (el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}
credit to this response.
There is a use guide and further information in the link provided.
Good luck!

Related

Show and hiding div after scroll point

I am using this script to hide a div and show it when have scrolled past a certain point in the page. This is working fine, but when I scroll back up to the top, the div then stays visible. Could anyone help me with an amendment I can make to the code to hide the div again when scrolling back above the desired point?
Thanks, T
$(document).ready( function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
$("#dvid").show(); //reached the desired point -- show div
}
});
});
$(document).ready( function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
$("#dvid").show(); //reached the desired point -- show div
}
else{
$("#dvid").hide(); //else above the desired point -- hide div
}
});
});
$(document).ready( function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
$("#dvid").show(); //reached the desired point -- show div
} else {
$("dvid").show(); //hide div
}
});
});
First, check the element visibility:
var rect = element.getBoundingClientRect();
var visible = Boolean(
rect.top >= 0
&& rect.left >= 0
&& rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
&& rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
Then bind event to revalidate visibility:
jQuery(window).bind('DOMContentLoaded load resize scroll', fn);
// fn - is your function to show/hide elements in accordance with previous statement
So, the final code would be:
$(document).ready( function() {
var checkVisibility = function () {
$("#dvid, #othdiv").each(function () {
var rect = this.getBoundingClientRect(),
visible = Boolean(
rect.top >= 0
&& rect.left >= 0
&& rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
&& rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
$(this)[visible ? 'show' : 'hide']();
});
};
//hide your divs initially
$("#dvid, #othdiv").hide();
jQuery(window).bind('DOMContentLoaded load resize scroll', checkVisibility);
});

Disabling Mousewheel JS horizontal scroll under certain screen size

I'm using .mousewheel to translate my downwards scroll into horizontal scroll on desktop, however for mobile I want to disable this behavior. I have tried the following:
if ( $(window).width() > 480) {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * -0.5);
e.preventDefault();
});
}
else {
$("html, body, *").bind("mousewheel", function() {
return false;
});
}
But no success, the horizontal scrolling works fine but the body content is still locked in place on mobile.
To get the viewport width:
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
Then you can just make a small change to your if statement:
if (viewportWidth > 480) { ... }
Full code example
This includes a little "fix-up" with the way that the scroll translation was happening - I couldn't get the previous way to work.
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (viewportWidth > 480) {
$('body').mousewheel(function(e) {
$(this).scrollLeft($(this).scrollLeft() - e.deltaY);
e.preventDefault();
});
} else {
$("body").on("mousewheel", function() { return false; });
}

Adjust div height dynamically based on scroll

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);
}
});

JavaScript max-width removeAttribute

I have a problem with this code.
This code is checking the resolution of mobile device and open a web page with same resolution. But When I open a page from the mobile device with display width less than 480px and I scroll, the page is not viewed correctly. I want to drop this code for devices with display width less than 480px.
Can you help me?
JavaScript
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 200,
header = document.querySelector("nav");
if (distanceY > shrinkOn) {
header.setAttribute("id","smaller");
} else {
header.removeAttribute("id","smaller");
}
});
}
I dont want: 480px width id smaller to be added.
If I understand you correctly, you want this line of code: header.setAttribute("id","smaller");
to be only executed if the width is greater then 480px. If this is the case, try the following:
var width = document.body.clientWidth;
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 200,
header = document.querySelector("nav");
if (distanceY > shrinkOn) {
if (width > 480) {
header.setAttribute("id","smaller");
}
} else {
header.removeAttribute("id","smaller");
}
});
}

How to scroll to show a part of a webpage

What are the different ways you can control/read the Scrollbar in a web browser with JavaScript, apart from anchors? -- Unless you can dynamically create anchors and tell the browser to scroll down to that.
To scroll by an arbitrary amount:
//Parameters being the amount by which to scroll in pixels (horizontal and vertical)
window.scrollBy(50, 50);
To scroll to a certain point:
window.scrollTo(0, 30);
To read current position:
document.body.scrollLeft
document.body.scrollTop
Here is one example of how you can control X/Y scrolling without anchors. ( ScrollX/ScrollY)
The key part I suppose is the following
function saveScrollCoordinates() {
document.Form1.scrollx.value = (document.all)?document.body.scrollLeft:window.pageXOffset;
document.Form1.scrolly.value = (document.all)?document.body.scrollTop:window.pageYOffset;
}
Using the scrollTop property (inherent of all elements) you can scroll to a specific pixel height. So, scrolling to the height of a specific anchor would involve querying for the offset of that anchor and setting scrollTop accordingly. Just for illustration's sake; this is how you would scroll to a specified element with jQuery:
var top = $('div#something').offset().top;
$(document).scrollTop(top);
NOTE: jQuery's implementation can be misleading; it accepts document but the top-most element with the scrollTop property is, in fact, document.documentElement (usually refers to <HTML>).
There is also a scrollLeft property for horizontal scrolling.
And of course, you can read these properties:
var currentScrollTop = document.documentElement.scrollTop;
Prototype implements a scrollTo() function that makes it really easy to scroll to a particular element:
$("#elementID").scrollTo();
The implementation internally calls window.scrollTo to do the actual scrolling.
var coord = {top:null,left:null,width:null,height:null};
if (typeof window.pageYOffset == 'number') {
coord.top = window.pageYOffset; coord.left = window.pageXOffset;
} else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
coord.top = document.body.scrollTop; coord.left = document.body.scrollLeft;
} else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
coord.top = document.documentElement.scrollTop; coord.left = document.documentElement.scrollLeft;
}
if (typeof window.innerWidth == 'number') {
coord.width = window.innerWidth; coord.height = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
coord.width = document.documentElement.clientWidth; coord.height = document.documentElement.clienthHeight;
} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
coord.width = document.body.clientWidth;
coord.height = document.body.clientHeight;
}

Categories

Resources