So, i am trying to do an animation on my image in html/css. The problem is, it triggers when i load the page, but i want it to trigger when i scroll down to the image.
Here is my HTML part:
<figure>
<img src="Assets/Images/klenet.jpg" id="clenet_picture">
<figcaption id="clenet_text">Clenet Series 1 от 1979 година.</figcaption>
</figure>
Here is the CSS part:
#clenet_picture
{
. . .
animation-name: image-anim;
animation-duration: 4s;
}
#keyframes image-anim
{
from {opacity: 0%}
to {opacity: 100%}
}
I know i need to use some JS to make it work, but how exactly do i do that?
Add another class to it using JS. For example animate
Then you can use #clenet_picture.animate instead of #clenet_picture and animation will only start when you have applied new class
How to check if image is in viewport: How can I tell if a DOM element is visible in the current viewport?
I think i found a very simple solution.
However, there is one stupid problem.
Here is the code:
const checkpoint = 750;
window.addEventListener("scroll", () => {
const currentScroll = window.pageYOffset;
if (currentScroll <= checkpoint) {
opacity = 1 - currentScroll / checkpoint;
} else {
opacity = 0;
}
document.querySelector(".toAnimate").style.opacity = opacity;
});
The problem is that now it is doing the opposite... When i scroll to the picture, its opacity becomes 0 and when i scroll outside it, it becomes 1...
If someone has a solution, i will be thankful.
And thanks to all answers!
I fixed it!
Here is the working code:
//The checkpoint is set by you!
const checkpoint = 550;
window.addEventListener("scroll", () => {
const currentScroll = window.pageYOffset;
if (currentScroll <= checkpoint) {
opacity = 0 + currentScroll / checkpoint;
} else {
opacity = 1;
}
document.querySelector(".toAnimate").style.opacity = opacity;
});
This is the most simple solution, works without CSS!
Related
Ok from looking previously I heard that I could use a callback function to make a jquery load function synchronous.
For context I'm trying to do a crossfading transition that is triggered from an onclick function. Basically I want to ensure that the content on bottom has loaded before the top starts going transparent but that doesn't always happen clearly, there is an image on them which quite clearly hasn't loaded by that time, is there a fix to ensure it waits?
Below is a simplified version of the code to show the issue. Help would be appreciated.
if (onTop === true) {
onTop = false;
$("#bottom").load(Location, function() {
setTimeout(function() {
if (onTop === false) {
document.getElementById("bottom_container").style.zIndex = 0;
}
}, 800);
document.getElementById("top_container").style.opacity = 0;
document.getElementById("bottom_container").style.height = null;
var bottomContainerHeight = document.getElementById("bottom_container").clientHeight;
document.getElementById("top_container").style.height = (bottomContainerHeight) + "px";
//Makes sure the top content is equal in height to the top content as to not overflow past it.
});
}
else {
onTop = true;
$("#top").load(Location, function() {
document.getElementById("bottom_container").style.zIndex = -2;
document.getElementById("top_container").style.opacity = 1;
document.getElementById("top_container").style.height = null;
var topContainerHeight = document.getElementById("top_container").clientHeight;
document.getElementById("bottom_container").style.height = (topContainerHeight) + "px";
//Makes sure the bottom content is equal in height to the top content as to not overflow past it.
});
}
You could accomplish this using CSS animations and/or transitions.
The z-index doesn’t matter in this case.
Since you’ll be fading the elements in and out, it doesn’t matter what layer they’re on.
#keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in {
animation: fade 500ms linear 0 1 normal forwards;
}
.fade-out {
animation: fade 500ms linear 0 1 reverse forwards;
}
Then you can just toggle the classes for each to get the effect.
document.querySelector("#top").classList.add("fade-out");
document.querySelector("#top").classList.remove("fade-in");
document.querySelector("#bottom").classList.add("fade-in");
document.querySelector("#bottom").classList.add("fade-out");
The images themselves can be preloaded.
This question already has answers here:
Show / Hide elements with animation
(4 answers)
Closed 9 months ago.
This post was edited and submitted for review 9 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Now that Bootstrap 5 has dropped jQuery I am going through a project and 'slimming it down' with standard JS. However there is one part where I was using jQuery to provide a transition effect using:
$('#form-1').hide('slow');
$('#form-2').show('slow');
I can replace this with standard JS using:
document.querySelector('#form-1').style.display = 'none';
document.querySelector('#form-2').style.display = 'block';
However, this results in an instant transition :( Is there a way to slow the transition using standard JS?
Note: the effect was not to fade or to slide in or out the forms but it assembled the forms with a build like effect. I.e. this was not a change in opacity nor was it an animated motion effect. BTW I'm also looking to see if anyone knows of a JS equivalent to the previous jQuery rather than adding some CSS.
I'v made a quick function hope it helps make sure to pass in the height and width. It slowly makes the opacity 0 and the height and width 0
function hideSlowly(element, width, height){
let el = document.querySelector(element);
el_opacity = 1;
el_h = parseInt(height);
el_w = parseInt(width);
let s = setInterval(function(){
el.style.opacity = el_opacity;
el_opacity -= 0.2;
el.style.height = el_h + "px";
el_h -= 2;
el.style.width = el_w + "px";
el_w -= 2;
if(el_opacity <= 0){
el.style.display = "none";
// hide the element
// opacity is 0 and element is hidden so clear interval
clearInterval(s)
}
}, 100)
}
https://jsfiddle.net/9hjstuq7/
Here is an example
From: CSS display none and opacity animation with keyframes not working
I set it up below as an onhover event using css.
#form-1:hover {
animation: 3s fadeOut;
-webkit-animation: 3s fadeOut;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
99% {
opacity: 0;
z-index: 1;
}
100% {
opacity: 0;
display: none;
position: fixed;
z-index: -5;
}
}
<form id="form-1">
it's like totally a form broooooooooooooo
</form>
I know this is fairly easy in jQuery, but I want to do this in plain 'ol "will be around forever" javascript.
I have a dropdown select on my page. I choose one of 8 options. There is a default image showing on the page. When I select an option, the image changes to that pic. It all works fine.
But I want to make the image change a fade out, fade in switch over because I, like most of you, can't leave well alone. We have to keep fiddling.
The javascript that I have, which is triggered by an onchange="setPicture()" on the select dropdown is:
function setPicture(){
var img = document.getElementById("mySelectTag");
var value = img.options[img.selectedIndex].value;
document.getElementById("myImageDiv").src = value;
}
This works fine. The value of the selected index is a string with the path for each image. I just want a fade out then fade in stuck in there somewhere. I have fiddled about a bit, calling another function before changing the src but no luck.
Can someone point me in the right direction?
The easier way would be to use css keyframes alone.
But from javascript there is the web animation api made for that.
Here is a quick modif from the example, to match your case.
function setPicture(){
alice.animate(
[
{ opacity: 1 },
{ opacity: .1},
{ opacity: 1 }
], {
duration: 3000,
iterations: Infinity
}
)
}
<button onclick="setPicture()">
OPACITY ANIMATION
</button>
<img id="alice"
src="https://mdn.mozillademos.org/files/13843/tumbling-alice_optimized.gif"
>
</img>
How about setting the image default CSS with the opacity of 0 and with transition time
then in JavaScript just add a class that will make the opacity set to 1
HTML:
<img class="img1" src="sampleimg.jpg">
CSS:
.img1 {
opacity: 0;
transition: all .3s;
}
.img1.show {
opacity: 1;
}
JS:
function setPicture() {
var img = document.querySelector('.img1');
img.src = 'urlofnewimage';
img.classList.add('show');
}
Hope this helps.
Juste one function for all :
function fadeOutEffect(target) {
var fadeTarget = document.getElementById(target);
fadeTarget.style.opacity = 1;
fadeTarget.style.transition = "opacity 2s";
fadeTarget.style.opacity = 0;
setTimeout(function(){
fadeTarget.style.display = "none";
}, 2000);;
}
I basically have some social media icons at the top of the page, that later become fixed.
I want them to fade in, I was using CSS. Everything I tried using JS did the same thing or didn't work.
Here is my JS:
jQuery(document).scroll(function() {
var y = jQuery(document).scrollTop(), //get page y value
social = jQuery(".socialnetworks"),
headerHeight = jQuery(".bg-cover").height();
if(y >= headerHeight + 500) {
social.css({opacity : 0});
social.addClass("fixedsocialnetworks");
} else {
social.removeClass("fixedsocialnetworks");
}
});
And my CSS
.fixedsocialnetworks {
position: fixed!important;
top: 200px!important;
z-index:10;
left:30px;
opacity:1!important;
transition: opacity 400ms;
}
So I set the opacity to 0, then add a class that sets the opacity to 1, and has the transition.
So it works, but it doesn't work the first time on scroll, it works every other time after the first. Why? How do I fix this?
Hello below is my JS code for a changing background image every 30 seconds. I have this example code too from research, can somebody please please please show me how to integrate the example code into my JS, so the changing image fades in as I simply have no clue where to start and feel completely lost.
My JS
<script>
bgArr = ['images/bg1.jpg', 'images/bg2.jpg', 'images/bg3.jpg'];
bgCur = 0;
backgroundSwitch = function()
{
if (bgCur == bgArr.length) bgCur = 0;
document.body.style.backgroundImage = 'url('+ bgArr[bgCur++]+ ')';
}
window.setInterval(backgroundSwitch, 30000); // Switch every 30 seconds.
</script>
Example JS that I want to integrate
var img = document.getElementById("fade");
var fadeLength = 5500;
var opacity = 0;
var startTime = Date.now();
requestAnimationFrame(function me() {
// It's faded in, stop animating!
if (opacity >= 1) {
return;
}
opacity = (Date.now() - startTime) / fadeLength;
img.textContent = opacity;
img.style.opacity = opacity;
requestAnimationFrame(me);
});
Also is there a way to fit the background to the browser window within the javascript without using css?
Thank you and somebody please help!
One solution here is to use CSS transitions. No JS transition needed.
transition: background-image 6s;
Example