我已经构建了一个SVG,我想要动画,它有三个部分/图层,每个图层都有预定义的路径数量。使用不透明度在用户上滚动的SVG路径按顺序动画
SVG是一个圆形标志类型的东西,在圆的顶部有单词,在剩余空间周围有破折号,然后键入圆的中间。
喜欢这一点,但更简单: http://pixelcurse.com/wp-content/uploads/2015/11/logo-badges-8.jpg
我想要做的是这样的:SVG的
- 设置不透明度为0它进入视前
- 检测时,SVG开始进入视口
- 根据滚动位置(向下滚动)顺序更改前两个
<g>
块中每个路径的不透明度 - 当向上滚动顺序颠倒
我一直在试图与什么,但未能做到这两天打开和关闭。我成功地使用简单的jquery动画和css动画(请参阅下面的代码),但无法使用滚动位置播放这些动画。
我有另一个想法,但后来意识到这将是非常繁琐的,而不是相反的工作是有多个if/else基于滚动位置,但我不希望这有一个明确的数字,由于不同的决议,这将必须努力。
HTML:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">
<g id="mainsvg">
<g id="top-circle-words">
<path/>
<path/>
<path/>
<path/>
<path/>
<path/>
<path/>
<path/>
<path/>
<path/>
</g>
<g id="bot-circle-dashes">
<path/>
<path/>
<path/>
<path/>
<path/>
<path/>
<path/>
<path/>
<path/>
<path/>
<path/>
</g>
<g id="middle-words">
<path/>
<path/>
</g>
</g>
</svg>
CSS - 动画尝试 - 作品,但无法控制的 - 只是起到负载:
svg {width:100%;max-width:50%;margin:50% auto;display:block;}
@-webkit-keyframes animIn { 0% { opacity: 0; } 100% { opacity:1; } }
@-webkit-keyframes animOut { 0% { opacity: 1; } 100% { opacity:0; } }
.animIn { -webkit-animation: animIn 500ms 1.5s normal backwards; -webkit-animation-fill-mode: both; }
.animOut { -webkit-animation: animOut 500ms 3s reverse backwards; -webkit-animation-fill-mode: both; }
g#top-circle-words path:nth-child(1) { -webkit-animation-delay: 50ms }
g#top-circle-words path:nth-child(2) { -webkit-animation-delay: 100ms }
g#top-circle-words path:nth-child(3) { -webkit-animation-delay: 150ms }
g#top-circle-words path:nth-child(4) { -webkit-animation-delay: 200ms }
g#top-circle-words path:nth-child(5) { -webkit-animation-delay: 250ms }
g#top-circle-words path:nth-child(6) { -webkit-animation-delay: 300ms }
g#top-circle-words path:nth-child(7) { -webkit-animation-delay: 350ms }
g#top-circle-words path:nth-child(8) { -webkit-animation-delay: 400ms }
g#top-circle-words path:nth-child(9) { -webkit-animation-delay: 450ms }
g#top-circle-words path:nth-child(10) { -webkit-animation-delay: 500ms }
g#bot-circle-dashes path:nth-child(1) {-webkit-animation-delay: 550ms }
g#bot-circle-dashes path:nth-child(2) {-webkit-animation-delay: 600ms }
g#bot-circle-dashes path:nth-child(3) {-webkit-animation-delay: 650ms }
g#bot-circle-dashes path:nth-child(4) {-webkit-animation-delay: 700ms }
g#bot-circle-dashes path:nth-child(5) {-webkit-animation-delay: 750ms }
g#bot-circle-dashes path:nth-child(6) {-webkit-animation-delay: 800ms }
g#bot-circle-dashes path:nth-child(7) {-webkit-animation-delay: 850ms }
g#bot-circle-dashes path:nth-child(8) {-webkit-animation-delay: 900ms }
g#bot-circle-dashes path:nth-child(9) {-webkit-animation-delay: 1s }
g#bot-circle-dashes path:nth-child(10) {-webkit-animation-delay: 1.1s }
g#bot-circle-dashes path:nth-child(11) {-webkit-animation-delay: 1.2s }
g#middle-words {-webkit-animation-delay: 300ms; -webkit-animation-duration: 2s}
JS - 期运用。每();
$("g#top-circle-words path, g#bot-circle-dashes path").each(function(index) {
$(this).delay(20*index).animate({opacity: 1}, 50);
});
$("g#middle-words").delay(50).animate({opacity: 1}, 500);
所以,如果你把上面的代码,它应该工作,这是它的控制,我不能得到正确的?您可以使用CSS查看,如果您将.animIn类手动添加到您想要在不使用JQ的情况下进行动画的所有元素,也可以使用。
我发现就在这里另一篇文章所述OP是具有类似的问题(有点)作为我,我努力去适应这是标记为正确的代码,但无法得到,要么工作?
$(function() {
var prevRange = -1;
var range = -1;
$(document).on('scroll', function() {
var top = $(document).scrollTop();
if (top >= 2200 && top < 2401) {
range = Math.floor(top/10)-220;
} else {
range = -1;
}
if(range != prevRange) {
prevRange = range;
var leftPx = (826 - range*5) + "px";
$('path').stop().animate({left: leftPx}, 300, "easeOutQuad");
}
});
});
另外这是我写的,但我可以看到这是有,如果我使用多个IF语句工作疼痛:
// $(document).ready(function() {
// $(window).scroll(function() {
// if ($(this).scrollTop() > 100){
// $('g#top-circle-words path:nth-child(1)').css({ 'opacity': '.5' });
// }
// else {
// $('path').css({
// 'opacity': '.9',
// "border": "0"
// });
// }
// console.log($(document).scrollTop());
// });
// });
任何人都可以请帮我这 - 在做我的大脑在 - 道歉,因为我还在学习JS和JQ,所以如果有人可以建议我采取正确的方向或提供一些解释的见解,我会很感激。
感谢松弛聊天和上述回复@shshaw! 我得到它的工作使用以下代码: \t \t \t \t \t //建立吐温 \t \t \t \t \t变种吐温= TweenMax.staggerFromTo( “路径”,2,{ \t \t \t \t \t \t不透明度:0 \t \t \t \t \t},{ \t \t \t \t \t \t不透明度:1, \t \t \t \t \t \t易于:Back.easeOut \t \t \t \t \t},1); \t \t \t \t \t //建立场景 \t \t \t \t \t VAR场景=新ScrollMagic.Scene({ \t \t \t \t \t \t \t triggerElement: “#mainsvg”, \t \t \t \t \t \t \t持续时间:400 \t \t \t \t \t \t}) \t \t \t \t \t \t .setTween(吐温) \t \t \t \t \t \t .addIndicators({ \t \t \t \t \t \t \t名: “惊人” \t \t \t \t \t \t})//添加指标(需要插件) \t \t \t \t \t \t .addTo(controller); – PixelsPencil