The goal is for the pictures to transition into each other.
I started it off with the first picture having 1 opacity and the other three having a 0 opacity.
How could I go about making it start transitioning from the start and then continuing the transition loop every 12 seconds. I don't want to wait 12 seconds to start the transition
Here is my HTML with inline CSS
<img id="01BrunetteGirl" style="width:100%; opacity:1;" src="images/brunettesmiling.jpg" alt="">
<img id="02ManAndWife" style="width:100%; opacity:0;" src="images/manandwife.jpg" alt="" />
<img id="03GlassesMan" style="width:100%; opacity:0;" src="images/manwithglasses.jpg" alt="">
<img id="04BlondeGirl" style="width:100%; opacity:0;" src="images/blondegirlsmile.jpg" alt="" />
And here is my Javascript
<script>
$(document).ready(function() {
setInterval(function() {
setTimeout(function() {
document.getElementById("01BrunetteGirl").style.opacity = "0";
document.getElementById("02ManAndWife").style.opacity = "1";
document.getElementById("03GlassesMan").style.opacity = "0";
document.getElementById("04BlondeGirl").style.opacity = "0";
}, 3000);
setTimeout(function() {
document.getElementById("01BrunetteGirl").style.opacity = "0";
document.getElementById("02ManAndWife").style.opacity = "0";
document.getElementById("03GlassesMan").style.opacity = "1";
document.getElementById("04BlondeGirl").style.opacity = "0";
}, 6000);
setTimeout(function() {
document.getElementById("01BrunetteGirl").style.opacity = "0";
document.getElementById("02ManAndWife").style.opacity = "0";
document.getElementById("03GlassesMan").style.opacity = "0";
document.getElementById("04BlondeGirl").style.opacity = "1";
}, 9000);
setTimeout(function() {
document.getElementById("01BrunetteGirl").style.opacity = "1";
document.getElementById("02ManAndWife").style.opacity = "0";
document.getElementById("03GlassesMan").style.opacity = "0";
document.getElementById("04BlondeGirl").style.opacity = "0";
}, 12000);
}, 12000);
});
</script>
Change your code like below
var currentImageIndex = 0;
setInterval(function() {
var imageArrayIds = ["01BrunetteGirl", "02ManAndWife", "03GlassesMan", "04BlondeGirl"];
if(currentImageIndex > 3) {
currentImageIndex = 0;
}
for(var index in imageArrayIds) {
document.getElementById(imageArrayIds[index]).style.opacity = (currentImageIndex == index ? "1" : "0");
}
currentImageIndex++;
}, 3000);
Working Demo
Working Demo with jQuery animate effect
Late, and there's a good accepted answer, but you could build on Kundan's approach and automatically iterate through the images without first defining them in an array. Furthermore, by simply changing the image's classname instead we can move all the presentational properties such as opacity and the animation to the stylesheet thus allowing you to pick and choose the display and animation styles independently of the JavaScript.
View the jsFiddle or check out the snippet below.
Or check out this jsFiddle with different style and animation (but no change to JS)
var images = document.querySelectorAll("#images img"),
i=images.length-1;
(function next(){
i++;
images[i-1].className="";
if(i>=images.length){i=0;}
images[i].className="active";
setTimeout(function(){next();},3000);
})();
#images img{
position:absolute;
width:100%;
opacity:0;
transition: all 1.0s;
-moz-transition: all 1.0s;
-webkit-transition: all 1.0s;
-webkit-transform:rotate(180deg) scale(0.2);
transform:rotate(180deg) scale(0.2);
}
#images img.active {
opacity:1;
-webkit-transform:rotate(0deg) scale(1);
transform:rotate(0deg) scale(1);
}
<div id="images">
<img src="http://www.placehold.it/200&text=brunettesmiling.jpg" alt="brunette smiling" />
<img src="http://www.placehold.it/200&text=manandwife.jpg" alt="man and wife" />
<img src="http://www.placehold.it/200&text=manwithglasses.jpg" alt="man with glasses" />
<img src="http://www.placehold.it/200&text=blondegirlsmile.jpg" alt="blonde girl smile" />
</div>
FYI. You can do this entirely in CSS. I wouldn't recommend it but its there as an option.
You can set a very small initial delay-time (e.g. 100) and set it to your desired delay-time within the function:
var delay = 100;
function foo() {
document.getElementById("01BrunetteGirl").style.opacity = "1";
document.getElementById("02ManAndWife").style.opacity = "0";
document.getElementById("03GlassesMan").style.opacity = "0";
document.getElementById("04BlondeGirl").style.opacity = "0";
delay = 12000;
setTimeout(foo, delay);
}
Related
I want to make h1 disappear and after 3 sec appear again. It disappears but dont appear again.
Or do i need inline style for it? And any other useful loop for this except if?
let head1 = document.querySelector(".asd")
let head1style = getComputedStyle(head1);
let head1disp = head1style.display;
let changedisp = function() {
if (head1disp === "block") {
head1.style.display = "none";
} else if (head1disp === "none") {
head1.style.display = "block"
} else {
console.log("Something Wrong!")
}
};
setInterval(changedisp, 3000);
h1 {
display: block;
}
<body>
<h1 class="asd">Look at me!</h1>
<script src="app.js"></script>
</body>
</html>
You don't need JavaScript for that in a modern browser. CSS animations with keyframes are fully capable of delivering the same effect:
<style>
#keyframes fade-out-in {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.box {
animation: fade-out-in 5000ms;
/* wait time at the beginning */
animation-delay: 2000ms;
}
</style>
<div class="box">
Hello World
</div>
You will probably need to adjust the timing. Learn more about CSS keyframe animations in this fantastic article - https://www.joshwcomeau.com/animation/keyframe-animations/
You can use setTimeout to do it once.
const h1 = document.querySelector('h1');
h1.style.display = 'none';
setTimeout(() => h1.style.display = 'block', 3000);
Or you can use setInterval to do it every 3 seconds.
const h1 = document.querySelector('h1');
function switchDisplay() {
if (h1.style.display === 'block') h1.style.display = 'none';
else h1.style.display = 'block';
}
setInterval(switchDisplay, 3000);
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);
}
}
}
Hi I'm still beginner at CSS, html and JS. I tried to do a transition ease-out for the property left, cuz I.m doing an animated galery for my future purposes. I tested it in the browser, the images where changing but the transition didn't happened.
Here is my "index.html":
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="galery">
<img class="galery_comp" src="img/leaf.jpg">
<img class="galery_comp" src="img/spital.jpg">
<img class="galery_comp" src="img/nature.jpg">
<img class="galery_comp" src="img/forest.jpg">
</div>
<br>
<button type="button" id="back"><-- Back</button>
<button type="button" id="next">Next --></button>
<script src="Galery.js"></script>
<script src="sketch.js"></script>
</body>
</html>
Here is my "style.css":
div.galery{
display: flex;
transition: left 0.4s ease-out; /* This is where i tried */
}
img{
width: 600;
height: 500;
display: none;
}
Here is my "Galery.js":
function Galery(){
this.imgs = document.getElementsByClassName('galery_comp');
this.currentImage = 0;
this.offSet = 0;
var hide = false;
this.sleep = function(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
this.init = function(){
this.imgs[0].style.display = "block"
}
this.next = function(){
this.currentImage++;
if (this.currentImage >= this.imgs.length)
{
this.currentImage = 0;
for (var i = 0; i < this.imgs.length; i++){
this.imgs[i].style.left = 0;
this.imgs[i].style.display = "none";
}
}
this.imgs[this.currentImage].style.display = "inline";
this.offSet=0;
}
this.slideNext = function(){
this.imgs[this.currentImage].style.left = -parseInt(window.getComputedStyle(this.imgs[0], null).width) - this.offSet;
this.imgs[this.currentImage].style.display = "none";
this.offSet = 10;
this.next();
}
this.slideBack = function(){
if (this.currentImage === 0){
this.currentImage = this.imgs.length;
for (var i = 0; i < this.imgs.length; i++){
this.imgs[i].style.left = -parseInt(window.getComputedStyle(this.imgs[0], null).width);
this.imgs[i].style.display = "none";
}
}
this.currentImage--;
this.imgs[this.currentImage].style.display = "inline";
this.imgs[this.currentImage].style.left = 0;
if (this.currentImage + 1 < this.imgs.length)
this.imgs[this.currentImage + 1].style.display = "none";
}
}
And finally here is my sketch.js:
var galery = new Galery();
galery.init();
document.getElementById('next').addEventListener("click", function(){
galery.slideNext();
});
document.getElementById('back').addEventListener("click", function(){
galery.slideBack();
});
Did i made something wrong? Or i should use another tehnique. If you want to test it you can use whatever images you want and how many you want(only keep the "galery_comp" class for the js)
Any answear apreciated!
You should add the transition to your img.
Your also setting (in your js) the display to none.
So you're basically removing the img before the transition can be seen. displayis also a non-transitionable attribute
Instead of display, try using opacity and setting it to either 0 or 1 (depending wether you want to show it or not)
then you could also add a transition for your opacity (maybe differently timed) and have a nice effect)
img{
width: 600;
height: 500;
opacity: 0;
transition: left 0.4s ease-out, opacity 0.3s ease-out;
}
var myIndex = 0;
var lastIndex = null;
var slides;
window.onload = function ()
{
slides = document.getElementsByClassName("mySlides");
slidePictures();
}
function slidePictures() {
slides[myIndex].style.display = "block";
slides[myIndex].className += " fadeIn";
console.log(slides[myIndex]);
setTimeout(function ()
{
slides[myIndex].className = "mySlides";
console.log(slides[myIndex]);
setTimeout(function ()
{
slides[myIndex].style.display = "none";
console.log("display none");
}, 1000);
}, 2000);
lastIndex = myIndex;
myIndex++;
if (myIndex >= 3)
return;
setTimeout(slidePictures, 4000);
}
.slidesDiv>img {
width: 80%;
height: 80%;
margin-left: 10%;
opacity: 0;
transition: opacity 1s;
}
.fadeIn {
opacity: 1 !important;
transition: opacity 1s;
}
<div class="slidesDiv">
<img class="mySlides" src="//placehold.it/200x80/0fb">
<img class="mySlides" src="//placehold.it/200x80/0bf">
<img class="mySlides" src="//placehold.it/200x80/fb0">
<img class="mySlides" src="//placehold.it/200x80/0fb">
<h1 id="indicator"> Indicator </h1>
</div>
So my issue is that, the image fades in the first time, but then doesn't fade out afterwards, nor does it disappear?
It's definitely problem with the setTimeout functions and I'm wondering what I'm doing/assuming incorrectly.
I edited your code a bit for cleanliness and I also removed the extra transition from .fadeIn as you already had it part of slidesDiv>img.
In your example your program flow is a bit hard to understand, and you are using a lot of variables which are not clear where they come from (like slides and myIndex) so that was part of the reason why it was difficult to figure why it was failing.
Hopefully I understood correctly what you were trying to achieve and the below should work for you. It's definitely not the best in terms of readability and you might be able to extract some of the nested setTimeouts into other functions, but I didn't want to modify too much of your initial code:
var myIndex = 0;
var lastIndex = null;
var slides;
window.onload = function() {
slides = document.querySelectorAll(".mySlides");
slidePictures(slides);
}
function slidePictures(slides) {
var time = 0;
slides.forEach((slide) => {
setTimeout(() => {
slide.style.display = "block";
slide.className += " fadeIn";
setTimeout(function() {
slide.className = "mySlides";
setTimeout(function() {
slide.style.display = "none";
}, 1000);
}, 2000);
}, time);
time += 4000;
});
}
.slidesDiv>img {
width: 80%;
height: 80%;
margin-left: 10%;
opacity: 0;
transition: opacity 1s;
}
.fadeIn {
opacity: 1 !important;
}
Please see this Pen for complete example: http://codepen.io/rarmatei/pen/apramB
var myIndex = 0;
var lastIndex = null;
var slides;
window.onload = function ()
{
slides = document.getElementsByClassName("mySlides");
slidePictures();
}
function slidePictures() {
slides[myIndex].style.display = "block";
slides[myIndex].className += " fadeIn";
console.log(slides[myIndex]);
setTimeout(function ()
{
slides[myIndex].className = "mySlides";
console.log(slides[myIndex]);
setTimeout(function ()
{
slides[myIndex].style.display = "none";
console.log("display none");
// Move indexes here
lastIndex = myIndex;
myIndex++;
}, 1000);
}, 2000);
if (myIndex >= 3)
return;
setTimeout(slidePictures, 4000);
}
.slidesDiv>img {
width: 80%;
height: 80%;
margin-left: 10%;
opacity: 0;
transition: opacity 1s;
}
.fadeIn {
opacity: 1 !important;
transition: opacity 1s;
}
<div class="slidesDiv">
<img class="mySlides" src="//placehold.it/200x80/0fb">
<img class="mySlides" src="//placehold.it/200x80/0bf">
<img class="mySlides" src="//placehold.it/200x80/fb0">
<img class="mySlides" src="//placehold.it/200x80/0fb">
<h1 id="indicator"> Indicator </h1>
</div>
It's pretty hard to tell what you're trying to achieve from your code. I assume that you want the pictures to fade in, and after a certain delay to fade out again?
For that I would highly suggest you to use jQuery. Here's a fiddle I made.
The slidePictures function would now just look like this:
function slidePictures() {
$(".mySlides").each(function(element){
console.log(this);
// 2000 is the duration of the fading in milliseconds
$(this).fadeIn(2000, function(){
// fadeout is delayed 4000 milliseconds
$(this).delay(4000).fadeOut(2000);
});
});
}
If that's not what you need, please provide additional information.
grwag
I have this slideshow JS code that switches images in a div depending on the time we want. However, how can I add a fade in/fade out effect instead of a basic transition with no animation? I am doing this without jQuery, just plain javascript. Here is the link: https://en.khanacademy.org/computer-programming/js-library-exatreojs-slideshow-library/2950604004
here is the code:
var slideShow = function(container, time) {
container = document.getElementById(container);
this.images = [];
this.curImage = 0;
for (i = 0; i < container.childElementCount; i++) {
this.images.push(container.children[i]);
this.images[i].style.display = "none";
}
// Handle going to to the next slide
var nextSlide = function() {
for (var i = 0; i < this.images.length; i++) {
this.images[i].style.display = "none";
}
this.images[this.curImage].style.display = "block";
this.curImage++;
if (this.curImage >= this.images.length) {
this.curImage = 0;
}
window.setTimeout(nextSlide.bind(document.getElementById(this)), time);
// old code: window.setTimeout(nextSlide.bind(this), time);
};
nextSlide.call(this);
};
slideShow("slideshow", 1000);
// old code: slideShow(document.getElementById("slideshow"), 1000);
<div id="slideshow">
<img src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" alt="Rainbow lorakeets" />
<img src="https://www.kasandbox.org/programming-images/animals/butterfly.png" alt="Butterfly" />
<img src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="Cat" />
<img src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" alt="Crocodiles" />
<img src="https://www.kasandbox.org/programming-images/animals/fox.png" alt="Fox" />
</div>
You could try this method, if you don't mind that display is always block and I just change opacity of image. So the container has to be relatively positioned and imgs should be absolute
var slideShow = function(container, time) {
container = document.getElementById(container);
this.images = [];
this.curImage = 0;
for (i = 0; i < container.childElementCount; i++) {
this.images.push(container.children[i]);
this.images[i].style.opacity = 0;
}
// Handle going to to the next slide
var nextSlide = function() {
for (var i = 0; i < this.images.length; i++) {
if (i!=this.curImage) this.images[i].style.opacity = 0;
}
this.images[this.curImage].style.opacity = 1;
this.curImage++;
if (this.curImage>=this.images.length) this.curImage=0;
window.setTimeout(nextSlide.bind(document.getElementById(this)), time);
// old code: window.setTimeout(nextSlide.bind(this), time);
};
nextSlide.call(this);
};
slideShow("slideshow", 1000);
// old code: slideShow(document.getElementById("slideshow"), 1000);
img {
transition: opacity 0.5s;
position:absolute;
top:0;
}
<div id="slideshow">
<img src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" alt="Rainbow lorakeets" />
<img src="https://www.kasandbox.org/programming-images/animals/butterfly.png" alt="Butterfly" />
<img src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="Cat" />
<img src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" alt="Crocodiles" />
<img src="https://www.kasandbox.org/programming-images/animals/fox.png" alt="Fox" />
</div>