I want to make a div slide (in,out,left,up,right or down) when I reach a specific scrollTop() value. However, I don't want it to trigger some animation... I want the div to move with the scroll, like the effect achieved here: http://www.tioluchin.com/
so far, the "closest" I got was this:
var vistaEstandar = document.getElementById('vista');
vistaEstandar.onscroll = function() {animacionesEstandarVista()};
function animacionesEstandarVista()
{
var ypos = vistaEstandar.scrollTop;
if (($(window).width() >= 1800 && vistaEstandar.scrollTop > 6053) || ($(window).width() > 1800 && document.documentElement.scrollTop > 6053)) {
var image= document.getElementById("seccion9textoSegundo");
var toppin = ypos/6053;
image.style.top = toppin*150 + 'px';
}
else
{};
However, this doesn't work because the value I manage to set is too low.
The web I am trying to put together is long so when I multiply the value it is either too high or too low.
In the website http://www.tioluchin.com/ I want the effect the knives and food have
I went into that source code because it made me curious. I have found how they do it.
First part is catching what happens on scroll
$(document).scroll(function(){
windowScroll()
});
They have there a condition which disables it on smaller screens but that is not important here.
Second part is this:
function windowScroll(){
var st = $(document).scrollTop();
$("#aff").css({"top": 32 - st * 0.15 + "px"});
$("#aff").css({"left": 48 - st * 0.15 + "px"});
}
They have it bigger, for more elements. And this is my playground. In principle you have start with current position as an offset. "st" indicates how deep you are. st*0.15 tells you how fast the element will run from the screen.
My HTML:
<div class="wrapper">
<div id="aff" class="moving-div">
</div>
And CSS:
.moving-div {
width: 3rem;
height: 3rem;
position: relative;
top: 2rem;
left: 3rem;
background: red;
}
.wrapper {
height: 1000px;
}
Related
I want to try the same effect of this site but am getting lost in action on how to implement this animation.
When the user starts scrolling, the images in the header zoom in, the scrolling tab(vertical) does not move, up to a point which another image shows up, and only afterward the scroll bar starts working.
How can I achieve this animation when scrolling?
At the moment, what I thought was: to get the pixel value of the DOM when am scrolling, as well as the height of the div I want to target.
While the value of the DOM is less than the height of the box, the scale value should change based on the scrolling value.
The JS looks like this:
<script>
$(window).scroll(function() {
var initial_scroll = $('html').scrollTop();
var firstbox_height = $('#firstbox').height();
// console.log(firstbox_height);
while(initial_scroll < firstbox_height){
var sum = firstbox_height + ((firstbox_height * 0.01) / 100);
$('img').css({
// "transform": "scale(" + sum + ")"
});
}
});
</script>
I seem to be going into an infinite loop.
My pen is here
Here's a working sample. It's not flawless, it bugs when you scroll just a little back and forth at the top, the text size might change in the wrong direction. Also it doesn't work when scrolling with arrow keys. But what it does is that it should give you the idea on how to proceed.
There's probably a cleaner, nicer and more concise way to do this, but this is one way.
To get a perfectly working one, I think you might have to place a transparent <div> over the one that changes, just to keep track of the position and hence the direction.
Fiddle here: https://jsfiddle.net/codesam/nedj3ubx/53/
HTML:
<body>
<div id="box">
Text
</div>
<p id="direction">
</p>
</body>
CSS:
body {
height: 200vh;
}
#box {
width: 100%;
height: 50vh;
background-color: black;
color: white;
font-size: 72px;
}
jQuery:
$(document).ready(function(){
var initialScroll = -1;
var size;
$(window).on('scroll touchmove mousewheel', function(e){
var currentScroll = $(window).scrollTop();
if (currentScroll > initialScroll) {
$("#direction").text("down");
size = parseInt($("#box").css("font-size"));
if (size > 10) {
$("#box").css("font-size", "-=2");
e.preventDefault();
e.stopPropagation();
return false;
}
}
else if (currentScroll < initialScroll) {
$("#direction").text("up");
}
else if (currentScroll == 0 && initialScroll == 0) {
size = parseInt($("#box").css("font-size"));
if (size < 72) {
$("#box").css("font-size", "+=2");
e.preventDefault();
e.stopPropagation();
return false;
}
}
initialScroll = currentScroll;
});
});
I'm looking for a way in jQuery or pure JS to get the amount of pixels scrolled, not from the top of the page, but from the bottom of a div.
In other words I need to turn the amount scrolled beyond a div's height + its pixel distance from the top of the page into a variable.
I want to append this parallax code below so instead of calculating from the top of the page, calculates from a target div's distance from the top + its height.
/* Parallax Once Threshold is Reached */
var triggerOne = $('#trigger-01').offset().top;
$(window).scroll(function(e){
if ($(window).scrollTop() >= triggerOne) {
function parallaxTriggerOne(){
var scrolled = $(window).scrollTop();
$('#test').css('top',+(scrolled*0.2)+'px');
}
parallaxTriggerOne();
} else {
$('#test').css('top','initial');
}
});
I realize I didn't phrase this quite clear enough, I'm looking to only get the value of the amount of pixels scrolled since passing a div, so for example if I had a 200px tall div at the very top of the page and I scrolled 20 pixels beyond it, that variable I need would equal 20, not 220.
You can get a div's position by using div.offsetTop,
adding div.offsetHeight into div's distance from top of page will give you bottom of div, then you can subtract from window's scroll to get your desired value.
Feel free to ask if you have any doubts.
var div = document.getElementById('foo');
let div_bottom = div.offsetTop + div.offsetHeight;
var doc = document.documentElement;
var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
var scroll_top, scroll_after_div;
setInterval(function(){
scroll_top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
scroll_after_div = scroll_top - div_bottom;
console.log(scroll_after_div);
}, 1000);
body { margin: 0; }
<div id="foo" style="position:relative; top: 100px; height: 30px; width: 100%; background-color: #000;"></div>
<div id="bar" style="position:relative; top: 700px; height: 30px; width: 100%; background-color: #000;"></div>
In this snippet setInterval method is printing the scroll value each second, you can scroll and see the change in value.
To work out the distance from the top of the page to the bottom of an element, you can add an elements outerHeight() with its offset().top.
Example: https://jsfiddle.net/dw2jwLpw/
console.log(
$('.target').outerHeight() + $('.target').offset().top
);
In pure JS you can get the bottom of the div directly with document.getElementById("my-element").getBoundingClientRect().bottom.
In jQuery you can use $('#my-element').offset().top + $('#my-element').height()
I have a back to top image that popups when the user scrolls beyond 280. The issue is when you reach the bottom the image is over links in the footer. So I want to change the position of the image once the user is about 90px from the very bottom of the page - I want "bottom": '35px' to be 95. The page height is always changing fyi. Code I have:
function update() {
if ($(window).scrollTop() > 280) {
$('#btt').animate({
"bottom": '35px'
}, 300);
}
else {
$('#btt').animate({
"bottom": '-80px'
}, 300);
}
}
setInterval(update, 500);
It might be better to check for the scroll position only when the page has been scrolled rather than just checking every 1/2 second.
I've put together a working demo of what I think you want here: http://jsfiddle.net/swpqpv4r/5/
Basically we need to look at the scroll position of the bottom of the window as we scroll instead of the top by using document.body.scrollTop + $(win).height(). Normaly we might want to worry about what could happen if the window were to be resized, but we calculate this each time inside of the scroll event, so it shouldn't be an issue if the window changes sizes.
Next we need to know when the top of the footer has scrolled above the bottom of the window. We can use $("#footer").position().top; to see where it's top position is.
Hopefully the code is commented enough to help explain it. Let me know if you have any questions.
HTML
<header>Top</header>
<br><br><br> <!-- Lots of these for testing -->
<footer id="footer">Bottom</footer>
<a id="btt" href="javascript:{};">Back to top</a>
JavaScript
$(function(){
//select once and re-use later
var $win = $(window);
var $btt = $("#btt");
var $foot = $("#footer");
var bttDisplay = 500;
var footerHeight = $foot.outerHeight();
var footerTop = $foot.position().top;
function updateScroll() {
var scrollBottom = document.body.scrollTop + $win.height();
if (scrollBottom >= bttDisplay && scrollBottom <= footerTop) {
//show it by setting the bottom position to 0
animateBtt(0);
}else if (scrollBottom >= footerTop) {
//move it up above the footer's top position
animateBtt(footerHeight);
}else {
//hide it by setting the bottom position to the negative value of it's height
animateBtt($btt.height() * -1);
}
}
function animateBtt(pos){
$btt.animate({
"bottom": pos
}, 300);
}
//run initially
updateScroll();
//Create a var to hold the timer
var scrollTimer = null;
$win.on("scroll",function(ev){
//when scrolling, clear the timer
clearTimeout(scrollTimer);
//Now set the timer to run a function after a small delay.
//This prevents the update from happening too many times when you scroll
scrollTimer = setTimeout(updateScroll, 50);
});
//click to scroll back up
$btt.on("click",function(){
$('html, body').animate({scrollTop:0},300);
})
});
CSS
html,body{
margin:0;
padding:0;
}
header, footer{
background: #CCC;
padding: 10px;
}
#btt{
position:fixed;
height: 30px;
width: 100px;
text-align:center;
bottom: -30px;
right:0;
background: #F00;
color: #FFF;
z-index: 1000;
}
Let's say I have a single HTML page. 2000 pixels long for example. I want to detect if a visitor reaches a certain point on the page.
The page structure:
0px = begin of the page;
500px = about us page;
1000px = contactpage;
Is there a way with jQuery to detect if a user reaches the points described above?
You probably want jQuery's scroll event-binding function.
Yes, I would create three divs and then have a mouse over event on each. Example:
$("#begin").mouseover(function(){
alert("over begin");
});
$("#about").mouseover(function(){
alert("over about");
});
$("#contact").mouseover(function(){
alert("over contact");
});
You can see a working fiddle here: http://jsfiddle.net/ezj9F/
Try THIS working snippet.
Using this code you don't have to know position of the element you want to check if it is visible.
JQuery
var $window = $(window);
// # of pixels from the top of the document to the top of div.content
var contentTop = $("div.content").offset().top;
// content is visible when it is on the bottom of the window and not at the top
var contentStart = contentTop - $window.height();
// content is still visible if any part of his height is visible
var contentEnd = contentTop + $("div.content").height();
$window.scroll(function() {
var scrollTop = $window.scrollTop();
if(scrollTop > contentStart && scrollTop < contentEnd) {
console.log('You can see "HELLO"!');
} else {
console.log('You cannot see "HELLO"!');
}
});
HTML
<div class="scroll"></div>
<div class="content">HELLO</div>
<div class="scroll"></div>
CSS
div.scroll {
background-color: #eee;
width: 100px;
height: 1000px;
}
div.content {
background-color: #bada55;
width: 100px;
height: 200px;
}
EDIT: Now the algorithm is checking if any part of the div.content is visible (it is considering height of the element). If you are not interested in that change contentEnd to var contentEnd = contentTop.
/-----------------------------------------------------------------------------------/
EDIT: I do NOT want to use fixed CSS positioning. It's at the bottom of the viewport
without scrolling, however I want it to follow when it gets to the top.
/-----------------------------------------------------------------------------------/
I'm making a Squeeze Page with a MASSIVE sidebar. It's got tons of testimonials and facts and pictures and stuff. However, I have a button near the top I want to follow the user down the page as they scroll. Shouldn't be too hard right?
I've got this script - which starts dragging the .followme when it hits the top of the page. However - it also pushed down all the divs beneath it. Can I tell it to target JUST .follow and no affect the divs below it?
<script type="text/javascript">
var documentHeight = 0;
var topPadding = 15;
$(function() {
var offset = $(".followme").offset();
documentHeight = $(document).height();
$(window).scroll(function() {
var sideBarHeight = $(".followme").height();
if ($(window).scrollTop() > offset.top) {
var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
var maxPosition = documentHeight - (sideBarHeight + 100);
if (newPosition > maxPosition) {
newPosition = maxPosition;
}
$(".followme").stop().animate({
marginTop: newPosition
});
} else {
$(".followme").stop().animate({
marginTop: 0
});
};
});
});
You have an easier option which doesn't require any JS\jQuery at all.
.followme {
position: fixed;
height: 30px;
width: 30px;
background-color: #FF0000;
top: 48%;
left: 0;
}
This will never affect any of the other elements of the page and doesn't require any scripting at all. Now if you need the element (followme) to for example show at a certain scroll % or any other interactivity you might think of, then you will be needing to think more creatively. But if the problem is just to let the element follow your scrolling then the above should be a good and clean solution.
Example code:
http://jsfiddle.net/bhpgC/