如何在特定的视图上使用关键帧

Question

我有一个固定的标题，我正在使用关键帧来改变它的颜色。但是，此目的仅用于特定部分中的CSS滑块，称之为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仅适用于section 0，即只使用section0上的关键帧。非常感谢任何帮助。

谢谢：）

Answer 1

您可以使用Waypoints.js之类的js库向滑块添加特定类。将动画添加到该类。使用航点，您可以查看div是否在特定部分上，然后将适当的类应用于该部分。你可以这样做：

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

那么你的CSS会看起来像这样。

.color-header
{
   animation-name:colourful
}

修改 另一种方法是：您可以在导航菜单的列表项上附加事件处理程序。然后你可以检查这个项目是否是＆＃39; home＆＃39;项目。如果是它，将类添加到标题中。如果没有，请删除该课程。如果您复制粘贴此内容，请务必添加ID：＆＃39; navlist＆＃39;你的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}
 }