如何在垂直滚动上使用 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 有可能吗?我必须使用不同的插件吗?我可以使用其他带有 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 支持创建 position 属性插件 允许您编写自定义定位逻辑.

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);
    }
};

您会注意到它包含一个三元组，如果元素具有 'apple' 类，则该三元组仅应用 'left' 值:

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 上查看此操作的演示<​​/a>.

You can see a demo of this in action on JSFiddle.

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