javascript - 如何在特定选择上使用关键帧

Question

我有一个固定的标题，我正在使用关键帧来更改它的颜色。但是，此目的只能用于特定部分中的 CSS slider ，将其称为 section0。现在，该解决方案的问题是，当我滚动到另一个部分时，固定标题效果仍然有效，我找不到解决这个问题的方法。

我意识到应该使用 Javascript 使关键帧仅在特定的 section0 上工作，但我不知道该怎么做。

这是我的 html 代码和随附的动画关键帧 CSS:

<header>
  <nav id="headNav">
    <ul>
        <li data-menuanchor="home" class="active"><a href="#home">Home</a></li>
        <span>|</span>
        <li data-menuanchor="collections"><a href="#collections">Collections</a></li>
        <span>|</span>
        <li data-menuanchor="showroom"><a href="#showroom">Showroom</a></li>
        <span>|</span>
        <li data-menuanchor="contact"><a href="#contact">Contact</a></li>
        <span>|</span>
        <li data-menuanchor="about"><a href="#about">About</a></li>
    </ul>
  </nav>
</header>

<main id="fullPage">
<div class="section" id="section0">
  <!--Should only be animated here -->
  <div id="slider">
    <figure>
        <img src="images/eg1.jpg" alt="" title="" />
        <img src="images/eg2.jpg" alt="" title="" />
        <img src="images/eg3.jpg" alt="" title="" />        
      <img src="images/eg4.jpg" alt="" title="" />
      <img src="images/eg5.jpg" alt="" title="" /> 
    </figure>
  </div>
</div>

<div id="section1">
  <!--Some stuff here. Header should not be animated here -->
</div>

<div id="section2">
  <!--Some stuff here. Header should not be animated here -->
</div>
</main>

这是为标题设置动画的 CSS:

@keyframes colorful {
0% {  color: #162c83}
20% { color:  #162c83}
25% { color:#FFFF00}
45% { color:#FFFF00}
50% { color:#F00}
70% { color:#F00}
75% { color:#FFFF00}
95% { color:#FFFF00}
100% { color:#162c83}
}

header {animation : 15s colorful infinite}
header nav a{animation : 15s colorful infinite}

我不确定如何使 Javascript 仅适用于 section0，即仅在 section0 上使用关键帧。非常感谢任何帮助。

谢谢 :)

Answer 1

您可以使用像 Waypoints.js 这样的 js 库将特定类添加到 slider 。将动画添加到该类。使用航路点，您可以查看 div 是否在特定部分上方，然后对其应用适当的类。你可以这样做:

$('.section1').waypoint(function(){
        $('#headNav').addClass('color-header');
  });
 $('.section2').waypoint(function(){
        $('#headNav').removeClass('color-header');
 });

你的 css 看起来像这样。

.color-header
{
   animation-name:colourful
}

编辑 另一种方式:您可以在导航菜单的列表项上附加一个事件处理程序。然后您可以检查该元素是否是“主页”元素。如果是，则将类 colorful 添加到标题中。如果没有，请删除该类。如果您复制粘贴此内容，请确保将 id: 'navlist' 添加到您的 ul。

    var menu = $('header');
    $('ul#navlist li').on('click',function(){
        var link = $(this).data('menuanchor');
        console.log(link)
        if(link === 'home')
        {
          menu.addClass('colourful');
        }
        else
        {
          menu.removeClass('colourful');
        }
  });

你的 Css 应该是这样的:

 .colourful
 {
   animation-name:color;
   animation-duration:15s;
 }

 @keyframes color
 {
  0% {  color: #162c83}
  20% { color:  #162c83}
  25% { color:#FFFF00}
  45% { color:#FFFF00}
  50% { color:#F00}
  70% { color:#F00}
  75% { color:#FFFF00}
  95% { color:#FFFF00}
  100% { color:#162c83}
 }