Need to add fade in and out transition on innerHTML.
I have looked around but didn't find a solution to accomplish this.
I wish to have fade in and out effect between innerHTML texts.
var h2text = ["First h2", "Second H2"];
var counter = 0;
var h2 = document.getElementById("changeH2");
var inst = setInterval(change, 2000);
function change() {
h2.innerHTML = h2text[counter];
counter++;
if (counter >= h2text.length) {
counter = 0;
}
}
<h2 id="changeH2"></h2>
You can utilise CSS classes and transitions to do this by fading the element in and out when the text changes. I've also included another timeout.
var h2text = ["First h2", "Second H2"];
var counter = 0;
var h2 = document.getElementById("changeH2");
var inst = setInterval(change, 2000);
function change() {
h2.classList.add('fade');
setTimeout(function(){
h2.innerHTML = h2text[counter];
h2.classList.remove('fade');
counter++;
if (counter >= h2text.length) {
counter = 0;
}
}, 500);
}
h2{
transition: opacity .5s ease;
}
.fade{
opacity: 0;
}
<h2 id="changeH2"></h2>
Improved a little your js (using modulo instead of your three-line-condition), and created a small animation that seems to fit your requirements.
let h2text = ["First h2", "Second H2"];
let counter = 0;
let h2 = document.getElementById("changeH2");
let inst = setInterval(change, 2000);
function change() {
h2.innerHTML = h2text[counter];
counter = (counter + 1) % h2text.length;
}
#changeH2{
opacity: 0;
animation: fade infinite 2s;
}
#keyframes fade{
20%{
opacity: 1;
}
80%{
opacity: 1;
}
}
<h2 id="changeH2"></h2>
You could achieve this bij using the opacity like this
var h2text = ["First h2", "Second H2"];
var h2 = document.getElementById("changeH2");
h2.style.transition = "0.5s"; //fade speed
setTimeout(function () {
h2.style.opacity = 0; //make text temporarily invisible
setTimeout(function() {
h2.innerHTML = h2text[1];
h2.style.opacity = 1; //fade back in
}, 500); //this timeout needs to be the same as the transition speed
})
<h2 id="changeH2">First h2<h2/>
Here you don't have to do anything with your css.
Simple plugin for text transition.
(function($) {
let KeyWord = ["First h2", "Second H2"];
let counter = 0;
let Flag = true;
function rotaterator() {
setTimeout(function() {
if (counter == 2) {
counter = 0;
}
if (Flag) {
Flag = false;
counter = 1;
}
$("#changeH2").fadeOut(function() {
$("#changeH2").text(KeyWord[counter]);
counter++;
}).fadeIn(function() {});
rotaterator();
}, 2000);
}
rotaterator();
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 id="changeH2"></h2>
Related
var i = 1;
const title = document.getElementById("display-heading");
var texts = [
"Karibu",
"Bienvenido",
"স্বাগতম।",
"Willkommen",
"أهلا بك",
"Bienvenue"
];
title.textContent = texts[0];
var loop = setInterval(function() {
title.textContent = texts[i];
i = (i+1) % texts.length; // Allows the array to loop
}, 1000);
How would I add a fade in/slow down the transition?
https://codepen.io/elliebrayton/pen/vYJBOBP
There is a little discrepancy between the CSS and the HTML: the HTML has an id attribute with name "display-heading", while the CSS defines attributes for a class with that name.
You can get the fading going by changing the opacity.
Here is a runnable snippet:
const title = document.getElementById("display-heading");
var texts = [
"Karibu",
"Bienvenido",
"স্বাগতম।",
"Willkommen",
"أهلا بك",
"Bienvenue"
];
title.addEventListener("transitionend", loop);
function loop() {
if (title.style.opacity != "1") {
texts.push(title.textContent = texts.shift());
title.style.opacity = 1;
} else {
setTimeout(() => title.style.opacity = 0, 500);
}
}
setTimeout(loop);
#display-heading{
font-size: 30px;
transition: 0.5s opacity;
opacity: 0;
}
<h1 id='display-heading'>Welcome</h1>
i have this function that prints every letter from array.
here is a link to jsFiddle:
https://jsfiddle.net/yaroslav_cherednikov/ypbuhmqv/71/
it works well on the first run but then skips the first element in array on the second run
var a = ["Saab", "Volvo", "BMW", "renault"];
var d = document.getElementById('out');
var c = document.getElementById("cursor");
window.count = 0;
window.word_count = 0;
setTimeout(function () {
c.style.visibility = 'visible';
function aLoop() {
setTimeout(function () {
if(window.count < a.length){
return lettersPrint(a[window.count]);
}
}, 50);
}
function lettersPrint(word) {
if (window.word_count < word.length) {
setTimeout(function () {
d.innerHTML += word[window.word_count];
window.word_count++;
return lettersPrint(word);
}, 100);
}
else if( window.count < (a.length - 1) ){
setTimeout(function () {
d.classList.add("selected");
}, 1000);
setTimeout(function () {
window.count++;
word_count = 0;
d.classList.remove("selected");
d.innerHTML = '';
return aLoop();
}, 2000);
}
else{
window.count = 0;
aLoop();
}
}
aLoop();
}, 1000);
.typer-txt {
font-size: 2vw;
color: #378bd8;
display: inline-block;
}
#cursor {
float: right;
color: #b9b9b9;
animation: pulse 0.5s infinite;
visibility: hidden;
}
#out {
display: inline;
}
.selected {
background-color: #378bd8;
color: white;
}
#-webkit-keyframes h1-slide-up {
0% {top:100px; opacity: 0;}
100% {top:0px; opacity: 1;}
}
#keyframes pulse {
0% {
opacity: 0
}
100% {
opacity: 1;
}
}
<div class="typer-txt remove" id="typer-txt"><span id="cursor">|</span><div id="out" class=""></div></div>
this is first time i deal with a recursive function so i might have messed something. any help would be much appreciated.
You are not resetting the word count when you are on the last word. I've updated your code and refactored the highlight and erase portion into its own function
var a = ["Saab", "Volvo", "BMW", "renault"];
var d = document.getElementById('out');
var c = document.getElementById("cursor");
window.count = 0;
window.word_count = 0;
setTimeout(function () {
c.style.visibility = 'visible';
function aLoop() {
setTimeout(function () {
debugger;
if(window.count < a.length){
return lettersPrint(a[window.count]);
}
}, 50);
}
function highlightAndErase(winCount) {
setTimeout(function () {
d.classList.add("selected");
}, 1000);
setTimeout(function () {
window.count = winCount
word_count = 0;
d.classList.remove("selected");
d.innerHTML = '';
return aLoop();
}, 2000);
}
function lettersPrint(word) {
// previously was being missed after the last word due to the word_count not being reset
if (window.word_count < word.length) {
setTimeout(function () {
d.innerHTML += word[window.word_count];
window.word_count++;
return lettersPrint(word);
}, 100);
}
else if( window.count < (a.length - 1) ){
highlightAndErase(++window.count)
}
else{
// previously was not resetting the word_count var
highlightAndErase(0)
}
}
aLoop();
}, 1000);
Two problems:
You need a window.word_count = 0 next to window.count = 0 at line 38.
I believe word_count at line 30 needs to be window.word_count.
This will fix the skipped array item, but will introduce a new problem, which I'm sure you'll notice. I'll leave solving that item up to you.
You should have to reset some things in the else clause:
var a = ["Saab", "Volvo", "BMW", "renault"];
var d = document.getElementById('out');
var c = document.getElementById("cursor");
window.count = 0;
window.word_count = 0;
setTimeout(function () {
c.style.visibility = 'visible';
function aLoop() {
setTimeout(function () {
if(window.count < a.length){
return lettersPrint(a[window.count]);
}
}, 50);
}
function lettersPrint(word) {
if (window.word_count < word.length) {
setTimeout(function () {
d.innerHTML += word[window.word_count];
window.word_count++;
return lettersPrint(word);
}, 100);
}
else if( window.count < (a.length - 1) ){
setTimeout(function () {
d.classList.add("selected");
}, 1000);
setTimeout(function () {
window.count++;
word_count = 0;
d.classList.remove("selected");
d.innerHTML = '';
return aLoop();
}, 2000);
}
else{
setTimeout(function () {
d.classList.add("selected");
}, 1000);
setTimeout(function(){
window.count = 0;
window.word_count = 0;
d.classList.remove("selected");
d.innerHTML = '';
aLoop();
}, 2000)
}
}
aLoop();
}, 1000);
Try to separate things in functions to understand better what you are doing! Sometimes recursive things are kinda messy if you don't separate and name things
i have image gallery ant i set up setinterval, now i want that it should be stopped after two or tree circle.
This is my html Code:
<div id="slider">
<img src="http://imgsrc.hubblesite.org/hu/gallery/db/spacecraft/24/formats/24_web.jpg">
<img src="http://imgsrc.hubblesite.org/hu/gallery/db/spacecraft/27/formats/27_web.jpg">
<img src="http://imgsrc.hubblesite.org/hu/gallery/db/spacecraft/32/formats/32_web.jpg">
<img src="http://imgsrc.hubblesite.org/hu/gallery/db/spacecraft/33/formats/33_web.jpg">
</div>
css:
#slider {
width: 400px;
height: 300px;
position: relative;
overflow: hidden
}
#slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 0.25s
}
and Javascript:
var pics;
var current = 0; // first next() moves to pics[0], the first image
window.addEventListener("load", function() {
pics = document.querySelectorAll("#slider img");
});
setInterval(function() {
var nextImage = (current + 1) % pics.length;
pics[current].style.opacity = 0;
pics[nextImage].style.opacity = 1;
current = nextImage;
}, 3000);
Here's your answer: Stop setInterval call in JavaScript
Save the interval ID when you create it, keep track of the number of times your slides have rotated, and then cancel the interval.
Use a counter variable to track the number of cycles & clear the timer based on that limit value.
JS Code:
var counter = 0;
var limit = 3 ;
var timer;
timer =setInterval(function () {
if(counter === 3){
clearInterval(timer);
return;
}
counter++;
//do some stuff here after 1 second delay
},1000);
You could use setTimeout instead.
var pics;
var current = 0; // first next() moves to pics[0], the first image
var stop = 3; //define when you want to stop
window.addEventListener("load", function() {
pics = document.querySelectorAll("#slider img");
});
function switchImage()
{
var nextImage = (current + 1) % pics.length;
pics[current].style.opacity = 0;
pics[nextImage].style.opacity = 1;
current = nextImage;
stop--;
if(stop != 0)
setTimeout(switchImage,3000);
}
setTimeout(switchImage,3000);
You can do like this.
var refreshIntervalId = setInterval(function() {
var nextImage = (current + 1) % pics.length;
pics[current].style.opacity = 0;
pics[nextImage].style.opacity = 1;
current = nextImage;
}, 3000);
clearInterval(refreshIntervalId);
I'm trying to write my own animations using JavaScript.
I wrote a function for fadeIn() as below, it changes the display property followed by a change in value of opacity. But it doesn't seem to be working.
What am I doing wrong?
function fadeIn(obj, defDisp) {
obj.style.opacity = 0;
obj.style.display = defDisp;
var opVal = 0;
while (opVal < 1) {
obj.style.opacity = opVal;
opVal += 0.1;
}
}
defDisp = Default value for display property
Without a timing interval, this will likely execute too fast for you to see it. The while loop, without a timeout feature, will execute in far less than a second, and you won't see it happen. It's like asking a computer to count to 10, it will do it in less than a millisecond.
Try using a setTimeout
http://www.w3schools.com/jsref/met_win_settimeout.asp
while(opVal < 1) {
setTimeout(function(){
obj.style.opacity = opVal;
opVal += 0.1;
}, 3000);
}
Alter the timer (3000 in this case) to something that makes your fade work for you. Every 1000 is a one second and your loop runs 10 times, so in this case it would be 30 seconds, likely too slow.
I would probably stick with a CSS transition however, as they tend to render better on all browsers.
var el = document.getElementById('fadein');
fadeIn(el);
function fadeIn(ele, defDisp) {
ele.style.opacity = 0;
ele.style.display = defDisp;
var opVal = 0;
var t = setInterval(function(){
if(opVal >= 1){
clearInterval(t);
}
ele.style.opacity = opVal;
opVal += 0.1;
}, 100);
}
#fadein{ background: #ccc; border:1px solid #ddd; padding: 10px }
<div id="fadein">Hello</div>
Use a function that calls itself after a delay.
function fadeIn(obj, defDisp) {
obj.style.opacity = 0;
obj.style.display = defDisp;
var last = +new Date(); // Keep track of the time to calculate the opacity
var fadeStep = function () {
obj.style.opacity = +obj.style.opacity + (new Date() - last) / 800;
last = +new Date();
if (+obj.style.opacity < 1) {
setTimeout(fadeStep, 16);
}
};
fadeStep();
}
var el = document.getElementById('box');
fadeIn(el, 'block');
#box{ padding: 1em; background: #009afd; color: #ffffff; display: none; }
<div id="box">Hello</div>
If you want the fade to be faster, replace 800 by anything lower and vice-versa.
Because html render and for loop use the same thread, so when you doing the for-loop,you can't see any changes until the function complete. You have to use a setTimeout or setInterval (or requestAnimationFrame which is introduced from html5) so you browser can have the control to change the properties on the page:
You can see a example from the snippet, although the second that use a setTimeout is faster than the first one, which use for loop, the first one will not change its color as browser not able to change color during for-loop.
And if you choose to use requestAnimationFrame like I do in the snippets, you can have a smooth animation while the time can also be controlled precisely.
function fadeIn() {
this.style.opacity = 0;
this.style.display = 'block';
var opVal = 0;
console.time("count");
while(opVal < 1) {
this.style.opacity = opVal;
opVal += 0.000001;
}
console.timeEnd("count");
}
// Accept target as the target to apply anim, time is total anim time in ms.
function fadeInAlt(target, time) {
var opacity = 0;
var last = window.performance.now();
console.time("count2");
target.style.opacity = opacity;
target.style.display = 'block';
var fadeInFunc = function(timeStamp) {
if (opacity < 1) {
// Define the change by passed time.
var timePassed = timeStamp - last;
opacity += timePassed / time;
target.style.opacity = opacity;
last = timeStamp;
requestAnimationFrame(fadeInFunc);
} else {
console.timeEnd("count2");
return;
}
};
requestAnimationFrame(fadeInFunc);
}
var div = document.getElementById('test');
div.onclick = fadeIn;
var div2 = document.getElementById('test2');
div2.onclick = function() {
fadeInAlt(this, 3000);
};
#test {
background-color: red;
width: 30px;
height:30px;
}
#test2 {
background-color: blue;
width: 30px;
height:30px;
}
<div id="test"></div>
<div id="test2"></div>
A span element,
<span id="example">Start</span>
JavaScript
var texts = ["example1", "example2", "example3"];
var count = 0;
function changeText() {
$("#example").text(texts[count]);
count < 3 ? count++ : count = 0;
}
setInterval(changeText, 500);
Fiddle
How can I add animations to the newly added element to span,
I want use animations from animate.css, bounceIn while the element enters and bounceOut while the item disappears and so on till the last item in the list.
Update:
Fiddle updated with animate.css
Try utilizing jQuery UI - Bounce Effect
css
#example {
top:50px;
height:100px;
width:100px;
position:relative;
display:block;
}
js
var texts = ["example1", "example2", "example3"];
var count = 0;
function changeText() {
$("#example").delay(10)
.hide("bounce", {
times: 3
}, 1500, function () {
$(this).text(texts[count]).show("bounce", {
times: 3
}, 1500, function () {
count < 2 ? count++ : count = 0;
changeText();
});
});
}
changeText();
jsfiddle http://jsfiddle.net/989dbjn8/3/
This fiddle should work.
var texts = ["example1", "example2", "example3"];
var count = 0;
function changeText() {
$('#example').addClass('animated infinite bounce');
$("#example").text(texts[count]);
count < 3 ? count++ : count = 0;
}
setInterval(changeText, 500);