向下滚动网站时的css动画答案

【问题标题】：css animation when scrolling down the website向下滚动网站时的css动画
【发布时间】：2017-11-01 18:40:25
【问题描述】：

我是 Web 开发的新手，我想要滚动激活动画（但只有当有人向下滚动时）。

我尝试将此代码调整为我的网站https://github.com/reinis-berzins/tutorial-files/blob/master/ScrollActivatedAnimation/scrollAnim.html，但它仅显示圆圈上方带有文本的黑色圆圈，而不是带有外圈和内部图像（文本）的图形。

任何建议将不胜感激。

.container {
  padding: 20px 0;
  text-align: center;
}

.chart {
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 25px;
  text-align: center;
}

.chart figcaption {
  padding: 50px 25px;
  width: 100px;
  height: 50px;
  border: 20px solid #c7bdbd;
  border-radius: 100px;
  line-height: 50px;
}

.chart img {
  position: absolute;
  max-width: 100px;
  max-height: 100px;
  background: white;
}

.html {
  top: 50px;
  left: 45px;
}

.html + svg .outer {
  stroke: #e34f26;
}

.css {
  top: 55px;
  left: 48px;
}

.css + svg .outer {
  stroke: #0d84ce;
}

.javascript {
  max-width: 90px;
  max-height: 90px;
  top: 45px;
  left: 45px;
}

.javascript + svg .outer {
  stroke: #f0e040;
}

.chart svg {
  position: absolute;
  top: 0;
  left: 0;
}

.outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 20;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;
}
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.chart[data-percent='100'] .outer {
  stroke-dashoffset: 0;
  -webkit-animation: show100 2s;
  animation: show100 2s;
}

.chart[data-percent='75'] .outer {
  stroke-dashoffset: 133;
  -webkit-animation: show75 2s;
  animation: show75 2s;
}

.chart[data-percent='50'] .outer {
  stroke-dashoffset: 267;
  -webkit-animation: show50 2s;
  animation: show50 2s;
}

.chart[data-percent='25'] .outer {
  stroke-dashoffset: 401;
  -webkit-animation: show25 2s;
  animation: show25 2s;
}
.chart[data-percent='10'] .outer {
    stroke-dashoffset: 483;
    -webkit-animation: show10 2s;
    animation: show10 2s;
  }

@-webkit-keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 134;
  }
}

@keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 124;
  }
}

@-webkit-keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 267;
  }
}

@keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 267;
  }
}

@-webkit-keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 401;
  }
}

@keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 401;
  }
}

@-webkit-keyframes show10 {
    from {
      stroke-dashoffset: 537;
    }
    
    to {
      stroke-dashoffset: 483;
    }
  }
  
  @keyframes show10 {
    from {
      stroke-dashoffset: 537;
    }
    
    to {
      stroke-dashoffset: 483;
    }
  }

			<section class="container">
					
					<h1>Skills</h1>

					<figure class="chart" data-percent="25">
					  <figcaption>HTML</figcaption>
					   <img class="html" src="logo/HTML5.svg">
					  <svg width="200" height="200">
						<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
					  </svg>
					</figure>

					<figure class="chart" data-percent="25">
					  <figcaption>CSS</figcaption>
					  <img class="css" src="logo/CSS3.svg">
					  <svg width="200" height="200">
						<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
					  </svg>
					</figure>                
					
					<figure class="chart" data-percent="10">
					  <figcaption>Javascript</figcaption>
					  <img class="javascript" src="logo/JS.png">
					  <svg width="200" height="200">
						<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
					  </svg>
					</figure>

【问题讨论】：

它似乎在您发布的 sn-p 中有效？

标签： html css

【解决方案1】：

在您已经从顶部滚动了所需的文档高度之后，您可能必须添加一些 JAVASCRIPT 来添加带有动画的类。为了更好地理解阅读此博客，它肯定会对您有所帮助！

Add a CSS class on scroll with Vanilla JavaScript

您也可以查看我的作品集（下面的链接），这里滚动到页面底部，当我们到达页面底部时，我触发了动画。希望对您有所帮助！

Portfolio- Scroll till the page end of this webpage

【讨论】：

【解决方案2】：

我建议研究像 ViewportCheker 这样的 JQuery 插件 - https://github.com/dirkgroenen/jQuery-viewport-checker 这是一个你可以实现的演示 http://www.web2feel.com/freeby/scroll-effects/index.html

我在很多不同的项目中都使用过它，它非常简单有效。您基本上包含脚本和 jQuery，并在您想要在页面滚动期间检查可见性的元素上调用它，例如

$('.dummy').viewportChecker({
    classToAdd: 'visible' // This call could trigger an animation
});

还有很多可用的选项，因此您可以在用户再次滚动过去时删除该类，然后它会在每次滚动进/出视图时重复动画。您还可以添加回调函数并设置偏移量以获得更好的控制。

【讨论】：