Question

我正在尝试创建一个代码，以便在用户滚动时为我的标题设置动画。我已经设法使用2个不同的插件创建我想要的动画：snap.svg和scrollmagic。我对这两个都不熟悉，请原谅我的高傲。

这是CodePen：http://codepen.io/anon/pen/dYbPXe

/* Animation 1 */

                    var speed = 250,
                    easing = mina.easeinout;

                [].slice.call ( document.querySelectorAll( '.header > a' ) ).forEach( function( el ) {
                    var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
                        pathConfig = {
                            from : path.attr( 'd' ),
                            to : el.getAttribute( 'data-path-hover' )
                        };

                    el.addEventListener( 'mouseenter', function() {
                        path.animate( { 'path' : pathConfig.to }, speed, easing );
                    } );

                    el.addEventListener( 'mouseleave', function() {
                        path.animate( { 'path' : pathConfig.from }, speed, easing );
                    } );
                } );


/* Animation 2 */
var scrollMagicController = new ScrollMagic();
var tween = TweenMax.to('.header-shape > path', 0.5, {
    fill: 'rgb(255, 39, 46)'    
});

var scene = new ScrollScene({
    triggerElement: '.background',
    triggerHook: '0',
    duration: 400
}).setTween(tween).addTo(scrollMagicController);
scene.addIndicators();

现在，如果您滚动页面，标题的颜色会发生变化，如果您将标题悬停，则形状会发生变化。我想将形状更改绑定到滚动，因此当用户滚动时，形状会逐渐变化以及颜色。

这可能是一件简单的事情（可能是不必要的），但我已经把太多的时间投入其中并且令我感到沮丧。感谢您的帮助。

编辑：如果我的问题不明确，请告诉我，我会尽力澄清。我真的想要这个效果:(

Answer 1

以下是我的想法： http://codepen.io/ironoxidey/pen/WrXLwM

这似乎就是你所需要的：

var tween = TweenMax.to('.header-shape > path', 0.5, {
    fill: 'rgb(255, 39, 46)',
    attr: { d : $('a').attr('data-path-hover') }
});

（从你的JS代码第25行开始，在动画2下）

使用snap.svg和scrollmagic动画形状

1 个答案: