Vanilla js fading out instead of fading in - javascript

When I'm linking Bootstrap 5 its just fading out the text instead of fading in.
When I remove the link everything just work fine.
const animatedText = document.querySelector(".fancy");
const strText = animatedText.textContent;
const splitText = strText.split("");
animatedText.textContent = "";
for (let i = 0; i < splitText.length; i++) {
animatedText.innerHTML += "<animated>" + splitText[i] + "</animated>";
}
let char = 0;
let timer = setInterval(onTick, 50);
function onTick() {
const animated = animatedText.querySelectorAll('animated')[char];
animated.classList.add('fade');
char++
if (char === splitText.length) {
complete();
return;
}
}
function complete() {
clearInterval(timer);
timer = null;
}
animated {
opacity: 0;
transition: all 0.4s ease;
}
animated.fade {
opacity: 1;
}
<h2 class="fancy">WELCOME TO MY WORLD</h2>

Bootstrap have .fade class in CSS which is responsible for "fade out" alert boxes.
Change your "fade" class to "text-fade" or something else and everything will be okay.

Related

Animation element when displaying

I have small problem with code i have to do small animation when displaying element in javascript something like a delay After that function.
function OpenPanelEdit() {
const element = document.getElementsByClassName("menu-on-center-edit");
for(const i=0; i < element.length; i++) {
element[i].style.display = 'flex';
}
};
Somebody have any idea ?
Just set the element's animation via el.style.animation.
function OpenPanelEdit() {
const element = document.getElementsByClassName("menu-on-center-edit");
for(const i=0; i < element.length; i++) {
element[i].style.display = 'flex';
element[i].style.animation = 'someAnimation 1s';
}
};
And the CSS: (This can be any animation)
#keyframes someAnimation {
from {
transform: scale(0.5);
opacity: 0;
}
}
If you want to run a function when the animation ends, use setTimeout:
function OpenPanelEdit() {
const element = document.getElementsByClassName("menu-on-center-edit");
for(const i=0; i < element.length; i++) {
element[i].style.display = 'flex';
element[i].style.animation = 'someAnimation 1s';
window.setTimeout(() => {
runSomeFunction();
}, 1000);
}
};

How can I create a CSS animation in JavaScript?

How can I create the CSS animation below in JavaScript? I've looked all over Google, and tried multiple times to create this but I couldn't figure out how to do this.
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
To run this, I know I can use what is shown below, but I don't know how to create this animation. Can anyone help?
element.style.animation = "fadeIn 5s linear";
You can use javascript with transition to achieve it
// start frame
const start = {
opacity: 0
};
// end frame
const end = {
opacity: 1
};
const element = document.querySelector('span');
Object.assign(element.style, start);
element.style.transition = 'all 5s linear';
requestAnimationFrame(() => {
Object.assign(element.style, end);
});
<span>Lorem Ipsum</span>
What do you mean exactly with "Create in Javascript"? Without using CSS?
If so, you can use a simple interval to update the opacity of the element until it reached 0 or 100. Simple example:
let opacity = 0;
const fadeEl = document.getElementById("fadeInElementIdWithOpacity0");
const fadeInInterval = setInterval(() => {
if (opacity < 1) {
opacity = opacity + 0.1
fadeEl.style.opacity = opacity;
} else {
clearInterval(fadeInInterval);
}
}, 200);
You can first define this function with whatever amount of intervals that you want and then call it with any querySelector
function fadeIn(x) {
var fade = document.querySelector(x);
var opacity = 0;
var intervalID = setInterval(function() {
if (opacity < 1) {
opacity = opacity + 0.1
fade.style.opacity = opacity;
} else {
clearInterval(intervalID);
}
}, 200);
}
havnig this function in console and running fadeIn(".-logo") will fade in the stackoverflow's logo

Load animation after another using pure javascript, HTML, and CSS without keyframes

I am new to javascript and I have done one image to fade in, but the second image wont fade in next.
See HTML and Javascript. With the use of pure HTML, CSS AND JS without keyframes for animation. No libraries or framework to use.
For HTML:
<div id="female" style="opacity: 0;">
<img id="fem" src="./images/female.png" onload="female()">
</div>
<div id="headline1" style="opacity: 0;">
<img id="t1" src="./images/headline1.png" onload="headline1()">
</div>
</div>
For JS code:
//FEMALE ANIMATION
function female () {
var opacity = 0;
var intervalID = 0;
window.onload = fadeIn;
function fadeIn() {
setInterval(show, 150);
}
function show() {
var body = document.getElementById("female");
opacity = Number(window.getComputedStyle(body)
.getPropertyValue("opacity"));
if (opacity < 1) {
opacity = opacity + 0.1;
body.style.opacity = opacity
} else {
clearInterval(intervalID);
}
}}
//HEADLINE 1 ANIMATION
function headline1 () {
var opacity = 0;
var intervalID = 0;
window.onload = fadeIn;
function fadeIn() {
setInterval(show, 150);
}
function show() {
var body = document.getElementById("headline1");
opacity = Number(window.getComputedStyle(body)
.getPropertyValue("opacity"));
if (opacity < 1) {
opacity = opacity + 0.1;
body.style.opacity = opacity
} else {
clearInterval(intervalID);
}
}}
Both the functions female() and headline1() assign their own functions to window.onload. This will cause the 2 functions impact each other.
You can use window.addEventListener instead of window.onload to solve this issue.
Considering that both your female() and headline1() functions are very similar, it is a good idea to use a single function with a parameter to specify the ID of the image to animate.
function animateImage(id, opacity) {
var intervalID = 0;
window.addEventListener('load', fadeIn);
function fadeIn() {
setInterval(show, 150);
}
function show() {
var body = document.getElementById(id);
opacity = Number(window.getComputedStyle(body)
.getPropertyValue("opacity"));
if (opacity < 1) {
opacity = opacity + 0.1;
body.style.opacity = opacity
} else {
clearInterval(intervalID);
}
}
}

How to add animation to photos changing every 3 seconds?

The pictures change themselves every 3 seconds.
I would like to add simple animation to the photo during the change.
Preferably in vaniilla js.
let index = 1;
const changeImg = () => {
index++;
img.setAttribute('src', `img/img${index}.png`);
if (index === 3) {
index = 0;
}
};
setInterval(changeImg, 3000);
If you use something like animate.css, or create your own animation class you could do it like this:
(Im assuming you're getting the image by a query selector/getElementById)
let index = 1;
const changeImg = () => {
index++;
img.classList.add('animate__animated');
img.classList.add('animate__bounce');
setTimeout(() => {
img.setAttribute('src', `img/img${index}.png`);
img.classList.remove('animate__animated');
img.classList.remove('animate__bounce');
}, 300); // This delay is assuming the animation duration is 300ms, you need to change this to the length of the animation
if (index === 3) {
index = 0;
}
};
setInterval(changeImg, 3000);
As you suggested an example in vanilla JavaScript (no libraries), here you go.
(function slideShow() {
let imgs = [
"https://picsum.photos/id/237/200/300",
"https://picsum.photos/id/238/200/300",
"https://picsum.photos/id/239/200/300"
];
let index = 0;
const frontImg = document.getElementById("slideshow__img--front");
const backImg = document.getElementById("slideshow__img--back");
frontImg.src = imgs[index];
const changeSlideShowImg = () => {
const currImgSrc = imgs[index];
index++;
if (index >= imgs.length) index = 0;
const newImgSrc = imgs[index];
backImg.src = newImgSrc;
frontImg.classList.add("slideshow__img--fadeout");
setTimeout(() => {
frontImg.src = newImgSrc;
frontImg.classList.remove("slideshow__img--fadeout");
}, 500);
};
setInterval(changeSlideShowImg, 3000);
})()
.slideshow {
width: 200px;
height: 300px;
position: relative;
}
.slideshow__img {
position: absolute;
left: 0;
top: 0;
opacity: 1;
}
#slideshow__img--front {
z-index: 2;
}
.slideshow__img.slideshow__img--fadeout {
transition: opacity 0.5s ease-in;
opacity: 0;
}
<div class="slideshow">
<img id="slideshow__img--front" class="slideshow__img" />
<img id="slideshow__img--back" class="slideshow__img" />
</div>

Jquery script modification to add fade in/out features

Ok so I found this script from a different part of this site:
var divs = ["wrap20", "wrap21", "wrap22"];
var visibleDivId = null;
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
I was able to successfully implement this code to a site which will show various groups of pictures whenever I click on an independent hyperlink.
What part of this code needs to be manipulated in order for the different elements to fade in or out?
Try something like this:
if(visibleDivId === divId) {
$(div).fadeIn(500);
} else {
$(div).fadeOut(500);
}
500 is the number of milliseconds the fading should take.
Here's a working example with Jquery on JSFiddle.
Another possibility would be to use show(500) and hide(500).
UPDATE:
Based on the OP's comments here's a version to achieve such an effect with CSS transitions (another Fiddle):
HTML
Click1
Click2
Click3
<div>
<div class="wraps on" id="wrap20">
Image #1
</div>
<div class="wraps off" id="wrap21">
Image #2
</div>
<div class="wraps off" id="wrap22">
Image #3
</div>
</div>
Javascript
var divs = ["wrap20", "wrap21", "wrap22"];
var visibleDivId = null;
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.className = "wraps on";
} else {
div.className = "wraps off";
}
}
}
CSS
.wraps {
width:100px;
height:100px;
display: block;
position: absolute;
top: 60px;
left: 10px;
}
.on {
opacity: 1;
transition: opacity 2s;
z-index: 999;
}
.off {
opacity: 0;
transition: opacity 2s;
z-index: 100;
}
#wrap20 {
background-color:green;
}
#wrap21 {
background-color:blue;
}
#wrap22 {
background-color:red;
}
You don't need the display property here, it's not fit for transitions anyway. You just display all the divs like you want them and use the opacity property to hide and show them. opacity works well with transitions. Transition and opacity for the two states are rolled up in classes so you don't have to set them separately in your javascript.
some-non-descript-user Ok I tried your Jquery fiddle, and that is EXACTLY what I was looking for! Thanks for your patience and time.

Categories

Resources