How to create an interactivs JS (vanilla) background animation - javascript

Trying to create an animated element (div) appear on background on page load and then on scroll (the first animation disappears and the second slides in).
As a beginner, I managed to create one simple, choppy animation (code below) but I can't figure out how to make it smooth, how to make it disappear on scroll down and how to place another animation instead of this one.
Although there are many questions that I need to find answers to,
the one i'm asking is -
How do I use the animation again in a different place ? Let's say vh height is 700px so after user scrolled those 700px I want the animation to slide in again from the top right corner.
function bgAnimation () {
let element = document.getElementById("bg");
let pos = -800;
let id = setInterval(frame, 1);
function frame () {
if (pos == -300) {clearInterval(id);} else {
pos++;
element.style.right = pos + 'px';
element.style.top = pos + 'px';
element.style.paddingLeft = '150px';
}
}
}
window.addEventListener("load", bgAnimation);
<body id="body">
<section>
<div id="cvs">
<div id="bg"></div>
</div>
</section>
</body>

Related

Changing div position to fixed with javascript attaches the div to document not viewport

I am looking for a way to determine if any part of a div is touching the top of the viewport and fix an item in that div to the top of the viewport using vanilla javascript.
I have been able to sort out how to determine if the div is touching the top of the viewport and trigger changes to the div's style. But for some reason when I change the div's position: absolute to position: fixed the div fixes to the top of the document, not to the top of the viewport, hence is not visible.
My js
function touchTop() {
var div = $('itin');
var rect = div.getBoundingClientRect();
var y = rect.top;
var h = rect.bottom;
if ((y < 0) && (h > 0)) {
document.getElementById('seemore').style.position = 'fixed';
document.getElementById('seemore').style.top = '45%';
} else {
document.getElementById('seemore').style.position = 'absolute';
document.getElementById('seemore').style.top = '66px';
}
}
window.addEventListener('scroll', touchTop);
The basic div HTML
<div id="itin" class="container">
<div class="sp20"></div>
<div class="text rgt">
<h3>your daily adventures</h3>
<p>blah blah blah</p>
</div>
<div id="seemore" class="ghstbtn">See More</div>
</div>
And the basic initial CSS
#seemore {
width: auto;
position: absolute;
top: 66px;
right: 20px;
}
To clarify further: My problem that needs solving is that when javascript changes the style.position to fixed the #seemore div gets positioned such that the 'top' value is measured from the top of the document, not from the top of the viewport. So basically not visible in the viewport.
If I understand you correctly, I think your problem lays here:
if ((y < 0) && (h > 0))
When the container div hits the top of the document, position to "seemore" is set to fixed, but as fast as the bottom of the div hits the top of the document,
"h === 0" and the position is again set to absolute.
Try this.
const seeMore = document.getElementById('seemore');
const div = document.getElementById('itin');
window.addEventListener('scroll', checkBoundries);
function checkBoundries() {
var rect = div.getBoundingClientRect();
var y = rect.top;
var h = rect.bottom;
if (y < 0) {
seeMore.style.position = 'fixed';
seeMore.style.top = '45%';
} else {
seeMore.style.position = 'absolute';
seeMore.style.top = '66px';
}
}
Turns out to be related to a filter applied to a parent of a parent of a parent of a ....
Found some old questions regarding issues with transformations and position:fixed dating back some 5 to 7 years ago. And even though many mentioned filing issue reports with the browser makers, it seems the problem has never been addressed and resolved. One comment mentioned filters could also cause the issue.
Moved the filter to a separate class which is now added and removed, rather than applying the filter directly to the div. And everything works as expected.

JQuery animation stops mid-div on double click

I created a sliding list of divs using the following code :
<div class="row">
<img class="back-arrow">
<div class="hide-extra">
<div class="tile-container">
<div class="tile"></div>
<!-- More Divs -->
</div>
</div>
<img class="next-arrow">
</div>
The overflow is supposed to stay hidden and the divs slide to show the next/ previous divs when the corresponding arrows are clicked. Here's a simplified version of my code to move forward a tile:
function nextTile() {
var tileWidth = /*Width of each div*/;
var position = parseInt($(".tile").css("right"));
position += tileWidth;
var rightPosition = position + "px";
$(".tile").animate({right:rightPosition}); //in my code each of the divs in the row move position
}
}
The code works fine except that if I press too rapidly on the arrows the divs will not slide the appropriate length. Instead they slide part way and leave me stuck with a div half visible.
I made the following addition to my code using Malk's comment and his attached link: jQuery animation detect if animating?
function nextTile() {
var tileWidth = /*Width of each div*/;
var position = parseInt($(".tile").css("right"));
position += tileWidth;
var rightPosition = position + "px";
var tileLock = $(".tile").is(':animated'); // new code
if (tileLock === false) // new code
$(".tile").animate({right:rightPosition});
}

JAVASCRIPT ONLY (no jquery) animated scrollTop in div

I am trying to animate a "scroll-to-top" button for a div with overflow set to auto (scrollbars are displayed as overflow exceeds div limits, so this is not an issue). On clicking the button i call a for loop in a javascript (not jquery) function. Each descending increment of the for loop (starting at the current element.scrollTop position) is to gradually back the scrolling down until element.scrollTop is 0. Very simple and straightforward in theory. Works like a dream in IE (very atypical!) but DOES NOT WORK in Firefox or Chrome!!!! All it does is JUMPS to the top...no smooth gradual scrolling upward which is what i want! Please help!
javascript:
function scrollUp(d){
var s=document.getElementById(d).scrollTop;
for (x=s; x>0; x=x-1){document.getElementById(d).scrollTop=x;}
}
html:
<div id="this_div" class="container">
<div id="top" class="topbutton" onClick="scrollUp('this_div');">Top</div>
</div>
you can use timer for animating that
window.onload = function() {
document.getElementById('top').onclick = function() {
scrollUp('this_div');
};
};
function scrollUp(d){
var s = document.getElementById(d).scrollTop;
var scrollDistance = 10;
var scrollSpeed = 200; // 1000 = 1 seconds
var scrollAnimate = setInterval(function() {
if (s > 0) {
s -= scrollDistance;
document.getElementById(d).scrollTop = s;
} else {
clearInterval(scrollAnimate);
}
},scrollSpeed);
}
you can now manipulate the speed and the distance of scrolling by just changing the value of scrollDistance and scrollSpeed.

How can I stop Scrolling my <div> onmouseover?

Right now I have a div that I am automatically scrolling infinitely:
<script language="javascript">
i = 0
var speed = 1
function scroll() {
i = i + speed
var div = document.getElementById("content")
div.scrollTop = i
if (i > div.scrollHeight - 160) { i = 0 }
t1 = setTimeout("scroll()", 100)
}
</script>
The div that I need to scroll I want to stop scrolling onmouseover, so I have added this code to the div:
<div id="content" value="Pause" onmouseover="clearTimeout(t1)" onmouseout="scroll()">
Here is a link to a jfiddle. The preview there isn't doing what it should, but that's what I have that's working in my project right now.
So far this is working, but the problem is that I want to be able to manually scroll when I hover over this div. Now, the automatic scrolling is stopping, but I can't manually scroll with just the scrollwheel: It reacts the same when it is scrolling as when it is stopped with onmouseover.
Is there a way that I can basically cancel the whole scroll function onmouseover, or write something that just allows using the scrollwheel/scrollbar. as well? It would also be ok to have code to ALWAYS allow using the scrollwheel/scrollbar.
I'm not sure what would be the best way to do it.
Thanks!!
By setting it to scroll the overflow, assuming a fixed height, the scrollbar will pop up and you can scroll manually. Of course you will want to hide the scrollbar again when it resumes autoscrolling so you will need two functions to set the style.
<script language="javascript">
i = 0;
var speed = 1,t1=null;
function startScroll(){
document.getElementById("content").style.overflowY="hidden";
scroll();
}
function stopScroll(){
clearTimeout(t1);
document.getElementById("content").style.overflowY="scroll";
}
function scroll() {
i = i + speed;
var div = document.getElementById("content");
div.scrollTop = i;
if (i > div.scrollHeight - 160) { i = 0; }
t1 = setTimeout("scroll()", 100);
}
</script>
HTML change:
<div id="content" value="Pause" onmouseover="pauseScroll()" onmouseout="startScroll()">

Flickering when using mouse in and mouse out

I am trying to create an effect where when mouse is moved over the image it should display a translucent black box on the image and display some details on top. These div's contain images and the problem is this mouseover and mouseout event are creating flickering of the black translucent div added on top.
Here is the code,
function addfocus(elem)
{
// getting dimensions of current div.
var currelem = document.getElementById(elem);
var left = currelem.offsetLeft;
var top = currelem.offsetTop;
var w = currelem.offsetWidth;
var h = currelem.offsetHeight;
// create a new div to match up these dimensions.
var ddiv = document.createElement("div");
ddiv.style.position = "absolute";
ddiv.style.top = top + "px";
ddiv.style.left = left + "px";
ddiv.style.width = w + "px";
ddiv.style.height = h + "px";
ddiv.style.backgroundColor= "rgba(0,0,0,0.5)";
document.body.appendChild(ddiv);
}
function rmvfoucs(elem)
{
document.body.removeChild(document.getElementById(elem));
}
When there is only text in the div, the flickering is not seen. Only when the image is included in the div, do I see the flickering.
Please help if you have any solution to this.
Thanks.
Your problem is that when you add your overlay it causes a mouseout event which removes the overlay. So when you move the mouse you constantly adds and removes the overlay.
But I'm not sure why you use Javascript for this. It can be accomplished in CSS, using :hover.
<div class="item">
<div class="info">...</div>
<img src="..." />
</div>
Show your overlay on hover
.info {
display:none;
}
.item:hover .info {
display:block;
}
See example: http://jsfiddle.net/jj8X6/

Categories

Resources