CODEWITHSUNDEEP
javascripthtmlcss
Idris
Idris

Reputation: 518

Fade in and fade out different text in a container at the same time in a loop

const firstTitle = document.querySelector(".first-title");
const secondTitle = document.querySelector(".second-title");

const firstSubtitle = document.querySelector(".first-subtitle");
const secondSubtitle = document.querySelector(".second-subtitle");


window.onload = function() {
  setInterval(function() {

    firstTitle.classList.add('fadeOut');
    secondTitle.classList.add('fadeIn');
    firstSubtitle.classList.add('fadeOut');
    secondSubtitle.classList.add('fadeIn');

  }, 4000);
}
h1 {
  margin-bottom: 24px;
  position: relative;
}

h1 span:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

p {
  font-size: 20px;
  line-height: 27px;
  margin-bottom: 80px;
  position: relative;
}

p span:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.fadeIn {
  animation: fadeIn 1s linear infinite;
}

.fadeOut {
  animation: fadeOut 1s linear infinite;
}


/* Fade In and Fade Out Animation */

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5
  }
  100% {
    opacity: 0;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Fading</title>
</head>

<body>
  <div class="container">
    <header class="header">
      <section>
        <h1>
          <span class="first-title">Title A</span>
          <span class="second-title">Title B</span>
        </h1>
        <p>
          <span class="first-subtitle">Text A</span>
          <span class="second-subtitle">Text B</span>
        </p>
      </section>
    </header>
  </div>
</body>

</html>
From my code, I have styled it in such a way that the text in the spans inside the h1 and p tags are at the same level. This is because I want a span to fade in the exact same time the other span is fading out such that it creates a temporary overlap effect. However, I am unable to do that with my present knowledge of CSS and JavaScript.

How do I continuously fade in and fade out the two different spans in h1 and p tags simultaneously in an infinite loop such that they overlap at a point before completely fading in or fading out.

Upvotes: 0

Views: 751

Answers (1)

Emy
Emy

Reputation: 639

solution:

let title1 = document.getElementById('first-title');
let subTitle1 = document.getElementById('first-subtitle');
let title2 = document.getElementById('second-title');
let subTitle2 = document.getElementById('second-subtitle');

// Third, create variable so is can check if this element is first element or second element
let checkTimes = true;

function hapyFade() {
setTimeout(function(){ 

// Sixthly,Evry time checkTimes is reverse to aprouch toggle element
  if (checkTimes == true) {
  
  // Seventh, In the first case of variapple, hide the first element and show the second
    title1.style.opacity = subTitle1.style.opacity = 0;
    title2.style.opacity = subTitle2.style.opacity = 1;
// Sixthly too, here reverse variable   
checkTimes = false;
  } else {
  
  // Seventh too, In the second case of variapple, hide the second element and show the first
    title1.style.opacity = subTitle1.style.opacity = 1;
    title2.style.opacity = subTitle2.style.opacity = 0;
    
    // Sixthly too, here reverse variable
    checkTimes = true;
  }
  
  // Fifth, same a function inside setTimeOut so reabeate this each 2 second
  hapyFade();
}, 2000);
}

// Fourth, I created a fuction for hide show elemnt as toggle - after 2 second
hapyFade();
h1 {
  margin-bottom: 24px;
  position: relative;
}

h1 span:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  /* Secondly, Hide the second element so that only the first element is on the square at the start of the page */
  opacity: 0;
}

p {
  font-size: 20px;
  line-height: 27px;
  margin-bottom: 80px;
  position: relative;
}

p span:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
h1 span,
p span {
  transition: all .5s ease-in-out;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Fading</title>
</head>

<body>
  <div class="container">
    <header class="header">
      <section>
        <h1>
        <!-- First, here I used id so I can call it in javascript -->
          <span id="first-title">Title A</span>
          <span id="second-title">Title B</span>
        </h1>
        <p>
          <span id="first-subtitle">Text A</span>
          <span id="second-subtitle">Text B</span>
        </p>
      </section>
    </header>
  </div>
</body>

</html>

Upvotes: 2

Related Questions