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

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相当基本。非常感谢!!

（适用感谢@罗伊）更新：

这是关于工作js的更新，它从引导程序中定位网格col div（tile3），并在滚动200px后返回到它的原始/目标位置。

现在我需要帮助弄清楚如何阻止它，这意味着一旦我滚动到200px以下并且元素处于它的位置它就会停留在那里。 此外，当我在该“线”上方滚动时，它应该开始将元素移回到它的起始位置，如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)"
});

这是一个工作小提琴：https://jsfiddle.net/ktccxr6j/3/。

还要注意，safari仍然要求transform加-webkit-前缀，以便它正常工作（尽管它应该很快就会改变）。 jQuery为您处理，但不是您的初始CSS。

修改 在您发表评论后，我构建了这个小助手（scrollAnim）。我希望你会发现它很有用。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;