如何在垂直滚动条上使用Stellar.js从侧面移动/动画元素？ [英] How to move/animate elements in from the side with Stellar.js on a vertical scroll?

问题描述

我正在使用 Stellar.js jQuery插件来创建视差滚动效果，但是我不确定Stellar是否支持我要完成的任务。我有基本的视差滚动影响正常工作（很大程度上基于来自TutsPlus的本教程）。

I'm using Stellar.js jQuery plugin to create a parallax scroll affect, but I'm not sure if Stellar supports what I am trying to accomplish. I have the basic parallax scrolling affect working properly (largely based on this tutorial from TutsPlus).

我想要完成的是当用户向下滚动页面时，某些元素从所有不同的角度移动/动画到视图中 - 被绑定到滚动位置。例如，当用户向下滚动页面时，苹果从屏幕的右上方位置进入视图，并且当用户继续向下滚动页面时，苹果在对角线路径中朝向左下方位置移动。屏幕。如果用户向上滚动，苹果将以向后的方式沿着相同的路径继续。 Stellar可以实现吗？我必须使用不同的插件吗？我可以使用另一个插件WITH Stellar来实现这种效果吗？

What I am trying to accomplish is to have it so while the user scrolls down the page, certain elements move/animate into the view from all different angles--being tied to the scroll position. For example, as the user scrolls down the page, an apple enters the view from the top right position of the screen, and as the user continues to scroll down the page, the apple moves in a diagonal path towards the bottom left position of the screen. Should the user scroll back up, the apple would continue along this same path in a backwards fashion. Is this possible with Stellar? Do I have to use a different plugin? Can I use another plugin WITH Stellar to achieve this affect?

任何有关此问题的帮助将不胜感激。如果您需要更多信息，请告诉我。

Any help on this would be greatly appreciated. If you need any more info, please let me know.

谢谢！

推荐答案

Stellar.js支持创建位置属性插件你写自定义定位逻辑。

Stellar.js supports the creation of position property plugins which allow you to write custom positioning logic.

我写了一个名为'apple'的示例插件，它做了类似你想要的东西：

I've written a sample plugin, called 'apple', which does something resembling what you want:

$.stellar.positionProperty.apple = {
    setTop: function($el, newTop, originalTop) {
        $el.css({
            'top': newTop,
            'left': $el.hasClass('apple') ? originalTop - newTop : 0
        });
    },
    setLeft: function($el, newLeft, originalLeft) {
        $el.css('left', newLeft);
    }
};

你会注意到它包含一个三元组，如果元素具有的话，它只应用'left'值'apple'类：

You'll notice it includes a ternary which only applies the 'left' value if the element has the 'apple' class:

'left': $el.hasClass('apple') ? originalTop - newTop : 0

这是一个如何为每个元素应用不同定位逻辑的示例。

This is an example of how you might apply different positioning logic for each element.

现在，您可以像这样使用插件：

So now, you can use the plugin like so:

$.stellar({
    horizontalScrolling: false,
    positionProperty: 'apple'
});

显然，你需要调整它以适合你的目的，但这应该足以得到你开始了。

Obviously, you'll need to tweak this to suit your purposes, but this should be enough to get you started.

你可以在JSFiddle上看到这个演示的演示 。

这篇关于如何在垂直滚动条上使用Stellar.js从侧面移动/动画元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！