How to Fade-in 2 images simultaneously using JS?

Question

Already tried answer - jQuery Fade Images simultaneously

I have 2 divisions with 2 different images and i want them to load after i scroll down to that section, only 1 image is fading-in after i apply the same function to both images.

var opacity = 0; 
var intervalID = 0; 
window.onload = fadeIn; 
function fadeIn()
{ 
setInterval(show, 200); 
} 
function show()
{
 var star11 = document.getElementById("star1"); 
 opacity = Number(window.getComputedStyle(star11).getPropertyValue("opacity")); 
 if (opacity < 1)
 { 
   opacity = opacity + 0.1; 
   star11.style.opacity = opacity 
 }
 else
 { 
   clearInterval(intervalID); 
 } 
 } 


var opacity = 0; 
var intervalID = 0; 
window.onload = fadeIn; 
function fadeIn()
{ 
 setInterval(show, 200); 
} 
function show()
 { 
  var star22 = document.getElementById("star2"); 
  opacity = Number(window.getComputedStyle(star22).getPropertyValue("opacity")); 
  if (opacity < 1)
 { 
  opacity = opacity + 0.1; 
  star22.style.opacity = opacity 
 }
 else
 { 
  clearInterval(intervalID); 
 } 
}

#star1{
opacity:0;
width:100px;
height:100px;
float:left;
}

#star2{
opacity:0;
width:100px;
height:100px;
float:right;
}

<div>
<img id="star1" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="star123"> 
</div> 
<div> 
<img id="star2" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="123star">
</div>

P.S - I am new to JS/JQuery.

Thank You

Have you looked at intersectionObserver to let you know when you have scrolled to a section? — A Haworth, Feb 28 '21 at 11:50
intersectionObserver will work if i want to call the function again and again, but here i want to call the function only 1 time so, suppose you scroll down the webpage - image then fade's-in and if you scroll up again it will fade-in again. (I think it works this way) — Lakshay Kalra, Feb 28 '21 at 11:55
It is entirely up to you what you do on observing an intersection, it doesn’t have to be the same thing each time. — A Haworth, Feb 28 '21 at 13:18

Nitheesh · Accepted Answer · 2021-02-28T12:07:51.213

You are declaring the function show twice. So ehat happens here is that the first function that you defined for the first star will be over written by the second function written for the second star and hence the styles for the second star only works. Function defenition is just like variable assigning. The variable name taks the latest value for which that is assigned and will neglect the previous values when define multiple times.

So what I suggest is to decalre the function only once and pass the id as a parameter.

var opacity = 0;
var intervalID = 0;
window.onload = fadeIn;
function fadeIn() {
  setInterval(() => show('star1'), 200);
  setInterval(() => show('star2'), 200);
}
function show(starId) {
  var star = document.getElementById(starId);
  opacity = Number(
    window.getComputedStyle(star).getPropertyValue("opacity")
  );
  if (opacity < 1) {
    opacity = opacity + 0.1;
    star.style.opacity = opacity;
  } else {
    clearInterval(intervalID);
  }
}

#star1 {
  opacity: 0;
  width: 100px;
  height: 100px;
  float: left;
}

#star2 {
  opacity: 0;
  width: 100px;
  height: 100px;
  float: right;
}

<div>
  <img
    id="star1"
    src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
    alt="star123"
  />
</div>
<div>
  <img
    id="star2"
    src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
    alt="123star"
  />
</div>

Update

Handling scroll events.

I have refered this answer to prepare the javascript/jquery solution for scroll

$(document).ready(function () {
  $(window).scroll(function () {
    console.log("Scroll");
    triggerScrollListner("star1");
    triggerScrollListner("star2");
  });
});
function triggerScrollListner(id) {
  var hT = $(`#${id}`).offset().top,
    hH = $(`#${id}`).outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();
  if (wS > hT + hH - wH) {
    setInterval(() => show(id), 200);
  }
}

var opacity = 0;
var intervalID = 0;
function show(starId) {
  var star = document.getElementById(starId);
  opacity = Number(
    window.getComputedStyle(star).getPropertyValue("opacity")
  );
  if (opacity < 1) {
    opacity = opacity + 0.1;
    star.style.opacity = opacity;
  } else {
    clearInterval(intervalID);
  }
}

body {
  height: 1000px;
}
#star1 {
  opacity: 0;
  width: 100px;
  height: 100px;
  float: left;
}

#star2 {
  opacity: 0;
  width: 100px;
  height: 100px;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div>
  <img
    id="star1"
    src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
    alt="star123"
  />
</div>
<div>
  <img
    id="star2"
    src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
    alt="123star"
  />
</div>

More generic solution with multiple stars

Since there was only one row, the visualiztion is a little hard. In this example I have added multiple rows and have made a little bit more visual.

$(document).ready(function () {
  $(window).scroll(function () {
    triggerScrollListner("star1");
    triggerScrollListner("star2");
    triggerScrollListner("star3");
    triggerScrollListner("star4");
  });
});
function triggerScrollListner(id) {
  var hT = $(`#${id}`).offset().top,
    hH = $(`#${id}`).outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();
  if (wS > hT + hH - wH) {
    setInterval(() => show(id), 200);
  }
}

var opacity = 0;
var intervalID = 0;
function show(starId) {
  var star = document.getElementById(starId);
  opacity = Number(
    window.getComputedStyle(star).getPropertyValue("opacity")
  );
  if (opacity < 1) {
    opacity = opacity + 0.1;
    star.style.opacity = opacity;
  } else {
    clearInterval(intervalID);
  }
}

.star {
  opacity: 0;
  width: 100px;
  height: 100px;
}

.container1, .container2 {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  flex-direction: row;
}

.container2 {
  margin-top: 1500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="container1">
    <img
      id="star1"
      class="star"
      src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
      alt="star123"
    />
    <img
      id="star2"
      class="star"
      src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
      alt="123star"
    />
</div>
<div class="container2">
    <img
      id="star3"
      class="star"
      src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
      alt="star123"
    />
    <img
      id="star4"
      class="star"
      src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
      alt="123star"
    />
</div>

What about Scroll ?, So that when i scroll down where the image is placed it loads the function then only. — Lakshay Kalra, Feb 28 '21 at 11:41

score 0 · Answer 2 · answered Feb 28 '21 at 11:31

Just fiddled around into the code

Needed only 1 function and changed code in js only.

var opacity = 0; 
var intervalID = 0; 
window.onload = fadeIn; 
function fadeIn()
{ 
  setInterval(show, 200); 
} 
  function show()
{
  var star11 = document.getElementById("star1");
  var star22 = document.getElementById("star2"); 
  opacity = 
Number(window.getComputedStyle(star22).getPropertyValue("opacity"));
  opacity = 
Number(window.getComputedStyle(star11).getPropertyValue("opacity")); 
  if (opacity < 1)
  { 
    opacity = opacity + 0.1; 
    star11.style.opacity = opacity 
    star22.style.opacity = opacity
  }
  else
  { 
   clearInterval(intervalID); 
  } 
}

How to Fade-in 2 images simultaneously using JS?

2 Answers2