0

我正在尝试创建一个代码来在用户滚动时为我的标题设置动画。我已经设法使用 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();

现在，如果你滚动页面，标题的颜色会改变，如果你悬停标题，形状会改变。我想将形状变化绑定到滚动，这样当用户滚动时，形状和颜色都会逐渐变化。

这可能是一件简单的（也许是不必要的）事情，但我已经投入了太多时间，这让我很沮丧。提前感谢您的帮助。

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

4

1 回答 1

0

这是我想出的： 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 下）

于 2016-01-19T20:42:15.630 回答