javascript - 在滚动时在两个预设位置之间移动对象

Question

我想学习如何在本网站的主屏幕上复制这种效果https://overv.io/

• traget(小册子)从某个固定的地方开始，然后平移/旋转到 0
• 一旦到达原始位置，再向下滚动将不会改变任何位置
• 向上滚动，将元素移回其指定的位置。

这是我认为应该看起来像的东西..

window.onscroll = function() {
    var speed = 1; //this should be adapted to the height of div
    var startdeg = 130; //
    var startx = 300;
    var starty =-300;
    var scroll = $(window).scrollTop(); //using scrolling as variable
    var deg = (startdeg - scroll) / speed;
    var translatex = startx - scroll/ speed;
    var translatey = starty - scroll/ speed;
    //Here should be some conditioner or maybe a do-while loop to stop transforming once it reached it's original location?
    $(".logo").css({
        "transform": "translate("translatex+"px,"translatey+"px) rotate("+deg+"deg)",
    });   
};

https://jsfiddle.net/aavelyn/ktccxr6j/1/

PS:我对 javascript 和 jquery 相当基础，但我可以完全理解所提供的代码。非常感谢!!

(感谢@Roy)更新:

这是一个工作 js 的更新，它从 bootstrap 定位一个 grid col div (tile3)，让它在我滚动 200px 后返回到它的原始/目标位置。

现在我需要帮助弄清楚如何停止它，这意味着一旦我滚动到 200 像素以下并且元素处于它的位置，它就会停留在那里。此外，当我滚动到该“线”上方时，它应该开始将元素移回其起始位置，如 overv.io

谢谢你的帮助!

window.onscroll = function() {

    var scrollHeight = 200;


    var speed = 1; //this should be adapted to the height of div
    var startdeg = 130; //
    var startx = 300;
    var starty =-300;


    var scroll = $(window).scrollTop(); //using scrolling as variable
    var deg = (startdeg - (startdeg/scrollHeight*scroll)) / speed;
    var translatex = (startx - (startx/scrollHeight*scroll))/ speed;
    var translatey = (starty - (starty/scrollHeight*scroll))/ speed;

    //Here should be some conditioner or maybe a do-while loop to stop transforming once it reached it's original location?
    $("#tile3").css({
        "transform": "translate(" +translatex+"px,"+translatey+"px) rotate("+deg+"deg)"
    });


};

Answer 1

您的转换字符串格式不正确。您忘记了一些 + 符号，以便您的字符串有效地与您的变量连接(即在 translatex 之前和 translatey 之前)。

您正在寻找的是:

$(".logo").css({
    "transform": "translate(" + translatex + "px," + translatey + "px) rotate(" + deg + "deg)"
});

这是一个有效的 fiddle :https://jsfiddle.net/ktccxr6j/3/ .

另请注意，safari 仍然需要您在 transform 前加上 -webkit- 才能正常工作(不过应该会很快更改)。 jQuery会为您处理它，但不会为您处理初始 CSS。

编辑:根据您的评论，我构建了这个小 helper (scrollAnim)。我希望你会发现它有用。

function scrollAnim(target, scrollStart, scrollEnd, transforms){
    target = $(target);
    var scrollLength = scrollEnd - scrollStart;
    
    // Using jQuery's `on` method instead of `window.onscroll` allows to
    // add more than one handler (i.e. we can do this several times).
    $(window).on("scroll", function(){
    	var scroll = $(window).scrollTop();
        // Get the progress of the animation in function of the scroll.
        var progress = (scroll - scrollStart) / scrollLength;
        // Restrict it to the [0,1] interval.
        progress = Math.max(0, Math.min(1, progress));
        
        // Build the transform css string using the properties of `transforms`.
        var cssTransform = "";
        for(var transformName in transforms){
            var transform = transforms[transformName];
            var transformUnit = transform.unit || "";
            // Calculate this property value in accordance with the current
            // scroll progress.
            var transformValue = (transform.end - transform.start) * progress + transform.start;
            // Append it to the transform string.
            cssTransform += transformName + "(" + transformValue + transformUnit + ") ";
        }
        target.css("transform", cssTransform);
    });
}

// The `transforms`'s property names must be proper css transform properties.
scrollAnim(".logo", 90, 490, {
    translateX: {
        start: 100,
        end: 300,
        unit: "px"
    },
    translateY: {
        start: 100,
        end: 490,
        unit: "px"
    },
    rotate: {
        start: 180,
        end: 0,
        unit: "deg"
    }
});

.background{
    height:2000px;   
}
.logo{
    width:50px;
    height:70px;
    background:#ccc;
    color:#fff;
    text-align:center;
    font-size:20px;
    transform:translate(100px,100px) rotate(180deg);
    -webkit-transform:translate(100px,100px) rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">
    <div class="logo">
       <p>Logo</p>
    </div>
    
</div>