Question 206225 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How it is possible to make background transparent when secont text animate?

I want to make a typography animation where I want to animate the second text which is colored and also it has multiple text to animate. In this animation, I want to show and hide the text one after the other with a cursor-moving effect. But in this, I have an issue to make the background transparent, because in the background I want to run the video also, so it is compulsory to make the span’s background transparent so that it looks permanently hidden

const text = document.querySelector(".sec-text");
        const textLoad = () => {
            setTimeout(() => {
                text.textContent = "Real Estate";
            }, 0);
            setTimeout(() => {
                text.textContent = "The Best Deal";
            }, 4000);
        }
        textLoad();
        setInterval(textLoad, 8000);
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #010718;
    overflow: hidden;
}
.container{
    width: 360px;
    overflow: hidden;
}
.container .text{
    position: relative;
    color: #c32000;
    font-size: 30px;
    font-weight: 600;
}
.container .text.first-text{
    color: #FFF;
}
.text.sec-text:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #010718;
    border-left: 2px solid #c32000;
    animation: animate 4s steps(8) infinite;
}
@keyframes animate{
    40%, 60%{
        left: calc(100% + 4px);
    }
    100%{
        left: 0%;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="textAnim.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <span class="text first-text">Absolute</span>
        <span class="text sec-text"></span>
    </div>


  
</body>
</html>

.

Tags:

2

Answers


  1. 0

    This is what I managed to do. The idea is to vary the width of the box containing the red text. So there’s nothing to cover up because the text will be hidden when it overflows the width of the box.

    const text = document.querySelector(".sec-text");
        const textLoad = () => {
            setTimeout(() => {
                text.textContent = "Real Estate";
            }, 0);
            setTimeout(() => {
                text.textContent = "The Best Deal";
            }, 5000);
        }
        textLoad();
        setInterval(textLoad, 10000);
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #010718;
    overflow: hidden;
}
.container{
    width: 360px;
    overflow: hidden;
    color: #FFF;
}
.container .text{
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    font-size: 30px;
    font-weight: 600;
}

.text.sec-text{
    color: #c32000;
    border-right: 2px solid #c32000;
    animation: animate 5s steps(10) infinite; 
}
@keyframes animate{
    0%, 10%, 100%{
        width: 0px;
    }
    45%, 70%{
        width: 220px;
    }
}
        <div class="container">
        <span class="text first-text">Absolute</span>
        <span class="text sec-text"></span>
    </div>

    It’s not perfect because the two red texts don’t have the same length and the animation ignores that, but I think it still looks pretty good.

    Login or Signup to reply.
  2. 0

    You could just animate the text itself:

    const delay = () => new Promise(r=>setTimeout(()=>requestAnimationFrame(r), 100));

const text = document.querySelector(".sec-text");

const animate = async str => {
  
  for(const char of str){
    text.textContent += char;
    await delay();
  }
  await new Promise(r=>setTimeout(r, 1000));
  let less = str;
  do{
    less = less.slice(0, less.length - 1)
    text.textContent = less;
    await delay();
  }while(less);
  
}

(async () => {
  const arr = ['Real Estate', 'The Best Deal', 'Support 24/7'];
  let idx = 0;
  while(true){
    await animate(arr[idx++]);
    if(idx === arr.length){
      idx = 0;
    }
  }
  
})();
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #010718;
    overflow: hidden;
}
.container{
    width: 360px;
    overflow: hidden;
}
.container .text{
    position: relative;
    color: #c32000;
    font-size: 30px;
    font-weight: 600;
}
.container .text.first-text{
    color: #FFF;
}

.text.sec-text:after{
    content: "";
    position: absolute;
    top: 0;
    right: -5px;
    height: 100%;
    background-color: #010718;
    border-left: 2px solid #c32000;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="textAnim.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <span class="text first-text">Absolute</span>
        <span class="text sec-text"></span>
    </div>


  
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search