jquery 当第二个文本动画时，如何使背景透明？

im9ewurl 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(115)

我想做一个排版动画，我想动画的第二个文本是彩色的，也有多个文本动画。在这个动画中，我想用光标移动效果一个接一个地显示和隐藏文本。但在这方面，我有一个问题，使背景透明，因为在背景中，我想运行的视频也，所以它是强制性的，使跨度的背景透明，使它看起来永久隐藏

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>

jquery

来源：https://stackoverflow.com/questions/76670020/how-it-is-possible-to-make-background-transparent-when-secont-text-animate

2条答案

按热度按时间

sg3maiej1#

您可以只对文本本身进行动画处理：

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>

赞(0）回复(0）举报 2023-08-04

vecaoik12#

这就是我设法做到的。这个想法是改变包含红色文本的框的宽度。所以没有什么要掩盖的，因为当文本溢出框的宽度时，文本将被隐藏。

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>

它并不完美，因为两个红色文本的长度不一样，动画忽略了这一点，但我认为它看起来仍然很好。

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 当第二个文本动画时，如何使背景透明？

2条答案

相关问题

热门标签

最新问答