首页 / 技术问答 / Html问答列表 / 问答详情

Html 每次在视口中运行动画

我有这个代码

//new IntersectionObserver();
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    //console.log(entry)
    if (entry.isIntersecting) {
      entry.target.firstChild.classList.add('tag');
    } else {
      entry.target.firstChild.classList.remove('tag');
    }
  })
})

const hiddenElements = document.querySelectorAll("h1");
hiddenElements.forEach((el) => observer.observe(el));
html {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
}

section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /*scroll-margin: 5vh;*/
  min-height: 100vh;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag {
  color: #0000;
  --g: linear-gradient(beige 0 0) no-repeat;
  background: var(--g), var(--g);
  background-size: 0% 100%;
  -webkit-background-clip: padding-box, text;
  background-clip: padding-box, text;
  animation: t 1.2s .5s both, b 1.2s 1.3s both;
}

p1 {
  line-height: 25px;
  color: beige;
  overflow-wrap: wrap;
  word-wrap: break-word;
  hyphens: auto;
  max-width: 60vw;
  font-size: 1,5vw;
  margin-top: 1vh;
  margin-right: 1vw;
  margin-left: 1vw;
  text-align: justify;
}

h1 { color: beige; 
  font-family: 'Open Sans Condensed', sans-serif; 
  font-size: 4vh;
  font-weight: 700;
  line-height: 50px; margin: 0 0 0;
  padding: 20px 30px;
  text-align: center;
  text-transform: uppercase; 
}

@keyframes t {
  to {
    background-size: 150% 100%
  }
}

@keyframes b {
  to {
    background-position: -200% 0, 0 0
  }
}

.hidden {
  opacity: 0;
}


@keyframes t{
  to {background-size: 150% 100%}

}
@keyframes b {
  to {background-position:-200% 0,0 0}
}

h1 { color: beige; 
  font-family: 'Open Sans Condensed', sans-serif; 
  font-size: 4vh;
  font-weight: 700;
  line-height: 50px; margin: 0 0 0;
  padding: 20px 30px;
  text-align: center;
  text-transform: uppercase; 
}
<!DOCTYPE html5>
<html>   
    <head>
        <html lang="cz"></html>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="styly.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
      
      <!-- 1. okn - Úvod -->
      <section style="display: flex;">
        <img class="logo" src="Original.svg" id="logo"> <!-- logo  -->
        <p3> <!--  -->
          text tmsdlnvlsůsnskf
        </p3>
        
        

        <p2> 
          „text text text text text text text text text text text“
        </p2>
        <div class="sipky_d">
          <div class="sipka_d"></div>
          <div class="sipka_d"></div>
          <div class="sipka_d"></div>
         </div>
      </section>

      <!-- 2. window -->
      <section>
        <div class="sipky_n">
          <div class="sipka_n"></div>
          <div class="sipka_n"></div>
          <div class="sipka_n"></div>
        </div>

        <img class="profile_photo" src="foto.jpg" id="pfp">
        <p1 style="float: right;">
          text text text text text text text text text text text
        </p1>
        <div class="links">
          <button class="button" onclick="window.open('tel:')">Call</button>
          <button class="button" onclick="window.location.href='mailto:mail'">e-mail</button>
          <button class="button" onclick="window.location.href='www.google.com'">Facebook</button>
       </div>

        <p4>text text text text text text text text text text text</p4>

       <div class="sipky_d">
        <div class="sipka_d"></div>
        <div class="sipka_d"></div>
        <div class="sipka_d"></div>
       </div>
       
      </section>

      <!-- 3. window -->
      <section>
       <div class="sipky_n">
        <div class="sipka_n"></div>
        <div class="sipka_n"></div>
        <div class="sipka_n"></div>
       </div>

        
        <p1>  
          <h1><span class="tag">Text that I want to animate</span></h1>
          <br><br>text text text text text text text text text text text
          <br><br>text text text text text text text text text text text
          <br><br>text text text text text text text text text text text 
        </p1>

          <div class="sipky_d">
            <div class="sipka_d"></div>
            <div class="sipka_d"></div>
            <div class="sipka_d"></div>
          </div>

      </section>
  
      <!-- 4. window -->
      <section>
      <div class="sipky_n">
        <div class="sipka_n"></div>
        <div class="sipka_n"></div>
        <div class="sipka_n"></div>
      </div>


       <p1> 
         <br><br>text text text text text text text text text text text
         <br><br>text text text text text text text text text text text
         <br><br>text text text text text text text text text text text
         </p1>

         <div class="sipky_d">
          <div class="sipka_d"></div>
          <div class="sipka_d"></div>
          <div class="sipka_d"></div>
         </div>
      </section>

      <!-- 5. window -->
      <section>
        <div class="sipky_n">
          <div class="sipka_n"></div>
          <div class="sipka_n"></div>
          <div class="sipka_n"></div>
        </div>

        <p1>
          <br><br>text text text text text text text text text text text
          <br><br>text text text text text text text text text text text
          <br><br>text text text text text text text text text text text
          <br><br>text text text text text text text text text text text
          <br><br>text text text text text text text text text text text
          <br><br>text text text text text text text text text text text
          <br><br>text text text text text text text text text text text
          <br><br>Správní právo
          <br><br>text text text text text text text text text text text
        </p1>

        <div class="sipky_d">
          <div class="sipka_d"></div>
          <div class="sipka_d"></div>
          <div class="sipka_d"></div>
         </div>
      </section>

      <!-- 6. window -->
      <section>
            <div class="sipky_n">
              <div class="sipka_n"></div>
              <div class="sipka_n"></div>
              <div class="sipka_n"></div>
            </div>
            <p1>
              <br><br>text text text text text text text text text text text
              <br><br>text text text text text text text text text text text
              <br><br>text text text text text text text text text text text
              <br><br>text text text text text text text text text text text
              <ul>
                <li>text text text text text text text text text text text</li>
                <li>text text text text text text text text text text text</li>
                <li>text text text text text text text text text text text</li>
              </ul>
            </p1>
            <div class="sipky_d">
              <div class="sipka_d"></div>
              <div class="sipka_d"></div>
              <div class="sipka_d"></div>
             </div>
      </section>

      <!-- 7. window -->
      <section>
        <div class="sipky_n">
          <div class="sipka_n"></div>
          <div class="sipka_n"></div>
          <div class="sipka_n"></div>
        </div>
        <p1>
          <br><br>Jtext text text text text text text text text text text
        
        <br><br>
        <div class="map-responsive">
            <iframe src="" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
        <br><br>
        
          text text text text text text text text text text text
          <br><br>
          text text text text text text text text text text text
        </p1>
        <div class="sipky_d">
          <div class="sipka_d"></div>
          <div class="sipka_d"></div>
          <div class="sipka_d"></div>
         </div>
      </section>
  
      <!-- 8. window -->
      <section style="scroll-padding: -50vh;">
        <div class="sipky_n">
          <div class="sipka_n"></div>
          <div class="sipka_n"></div>
          <div class="sipka_n"></div>
        </div>
        <p1>
          <br><br>text text text text text text text text text text text
          <br><br>text text text text text text text text text text text

          text text text text text text text text text text text
          <br><br>text text text text text text text text text text text
          <br><br>text text text text text text text text text text text
          <br><br>text text text text text text text text text text text
          <br><br>text text text text text text text text text text text
          <br><br>text text text text text text text text text text text
          <br><br>text text text text text text text text text text text
        </p1>
        <div style="margin-left: 18vw;"></div> 
      </section>

      <div style="scroll-margin-block-end: -20vh;"></div>
    </body>

</html>

我想在动画每次进入视区时运行它.在主要的html主体中，我有几个<section>个元素和一个滚动捕捉功能.动画播放正确且工作正常，但仅播放一次.我希望它在每次进入视区时都能播放.

我在JS中try 了几个教程，当动画进入视区时播放它们，但都不起作用.

我在Java脚本中添加了观察者，并在HTML中引用了该脚本.动画播放一次.当我向上或向下滚动时，动画不会播放，只有文本.动画看起来只播放了一次，然后再也不会播放了，除非我刷新页面.

编辑2:我添加了html的样本.该页面由几个部分组成，当用户向上或向下滚动时，这些部分会对齐到视图中.每次该部分进入视图时，文本都应该具有动画效果.

Edit3:我使用了提供的代码，并将其放入我各自的文件和代码片段中.在代码片段中，它工作得很好，但当我在浏览器中运行html文件时，它仍然只有一次动画.没有其他的js了.其他一些css代码能让它不工作吗？

编辑4:完整的html代码都在这里，它可以正常工作.即使当我将整个CSS代码粘贴到代码片段中时，它也能正常工作.我试着重做，我将html复制到新文件中，只为动画文本和脚本添加了css.它又一次只播放了一次.我try 删除"html"和"section"部分的css代码，但都不起作用.我正在考虑取消这一功能.

Edit5:我将js脚本直接放入html中，如下所示:

 <p1>  
          <h1><span class="tag">Text that I want to animate</span></h1>
          <script>
            const observer = new IntersectionObserver((entries) => {
               entries.forEach((entry) => {
               //console.log(entry)
               if (entry.isIntersecting) {
               entry.target.firstChild.classList.add('tag');
              } else {
               entry.target.firstChild.classList.remove('tag');
               }
              })
             })

         const hiddenElements = document.querySelectorAll("h1");
         hiddenElements.forEach((el) => observer.observe(el));
          </script>
          <br><br>text text text
          <br><br>text text text text
          <br><br>text text text text 
</p1>

而且它的工作完全符合预期.因此，感谢所有做出贡献的人.非常感谢A Haworth对Java脚本进行了修复！

推荐答案

除了@reyno指出的错误(应该通过查看浏览器的DevTools判断工具的控制台来发现)，Tag类以两种方式被错误地添加/重新保存-标记之前的一个圆点，以及当您希望它位于其子范围上时，它被添加到H1中.

此代码段对这些错误进行了一些简单的更正:

//new IntersectionObserver();
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    //console.log(entry)
    if (entry.isIntersecting) {
      entry.target.firstChild.classList.add('tag');
    } else {
      entry.target.firstChild.classList.remove('tag');
    }
  })
})

const hiddenElements = document.querySelectorAll("h1");
hiddenElements.forEach((el) => observer.observe(el));
.tag {
  color: #0000;
  --g: linear-gradient(beige 0 0) no-repeat;
  background: var(--g), var(--g);
  background-size: 0% 100%;
  -webkit-background-clip: padding-box, text;
  background-clip: padding-box, text;
  animation: t 1.2s .5s both, b 1.2s 1.3s both;
}

@keyframes t {
  to {
    background-size: 150% 100%
  }
}

@keyframes b {
  to {
    background-position: -200% 0, 0 0
  }
}

.hidden {
  opacity: 0;
}

div {
  height: 200vh;
}
<h1><span>My text to animate</span></h1>
<div>big div to create scrolling</div>

Html相关问答推荐

如何格式化HTML文本，使其环绕关键字

如何在不影响子列表的情况下在HTML(OL Li)上同时加数字和列表？

如何从ThymeLeaf模板中分离CSS

Chrome和Safari浏览器中的CSS3动画不同

标签数据的XPath？

如何在一行文本溢出省略号后显示文本？

当溢出到滚动条中时， bootstrap 按钮样式会更改

OnChange函数未在下拉列表中使用一个选项触发

更改Angular 为17的material Select 字段的高度？

我无法动态嵌入Instagram帖子，因为无法分配Instagram固定链接

在 html 和 css 中绘制表格内的倾斜线

使用flex wrap时，如何设置另一个元素的宽度与换行后的元素对齐？

从 Vue 应用程序的容器元素渲染 HTML

在锥形渐变进度条内创建空白的问题

如何在滚动行中显示一张图片和下一张图片的一半？

如何使用 html 和 css 为卡片创建此背景框架

为什么 `html` 上的 overflow： hidden 将滚动框移动到正文？

使用 tailwind css 将 HTML/CSS/JS 站点转换为 React App

无法在 css 的 body 标签中正确呈现(内联显示)

粘性定位的子元素忽略父母的填充

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630