Question

因此，我正在建立一个需要Web动画的网站，在最初的开发中，我使用jQuery来制作动画，但是有人告诉我jQuery已经成为一种古老的做法，并决定改用普通JavaScript，但是我不确定是否正在使用最佳实践来这样做。因此，这是我的代码：

window.onscroll=function top(){
    var totalDuration=250;//total desired duration of animation
    var img=document.getElementById("image");
    var objective=document.getElementById("objective");
    var header=document.getElementsByTagName("header");
    var newHeaderHeight=.25*window.innerHeight;
    var newImageMargLeft=.15*window.innerHeight;
    var newImageMargTop=.01*window.innerHeight;
    var origHeaderHeight=window.getComputedStyle(header[0],null).getPropertyValue("height");
    var origImageMargLeft=window.getComputedStyle(img,null).getPropertyValue("margin-left");
    var origImageMargTop=window.getComputedStyle(img,null).getPropertyValue("margin-top");
    origHeaderHeight=origHeaderHeight.substring(0,origHeaderHeight.length-2);
    origImageMargLeft=origImageMargLeft.substring(0,origImageMargLeft.length-2);
    origImageMargTop=origImageMargTop.substring(0,origImageMargTop.length-2);
    var headerFactor=((newHeaderHeight-origHeaderHeight)/totalDuration);
    var imgMargLeftFactor=((newImageMargLeft-origImageMargLeft)/totalDuration)*5;
    var imgMargTopFactor=((newImageMargTop-origImageMargTop)/totalDuration)*5;
    var id=setInterval(func,250);
    function func(){
        if (window.scrollY>window.innerHeight*.1){
            if (header[0].style.height===newHeaderHeight){
                id=clearInterval();
            }
            else{
                header[0].style.height=window.getComputedStyle(header[0],null).getPropertyValue("height").substring(0,window.getComputedStyle(header[0],null).getPropertyValue("height").length-2)-headerFactor;
                img.style.marginTop=window.getComputedStyle(img,null).getPropertyValue("margin-Top")-imgMargTopFactor;
                img.style.marginLeft=window.getComputedStyle(img,null).getPropertyValue("margin-Left")-imgMargLeftFactor;
                console.log("Header: "+(parseFloat(window.getComputedStyle(header[0],null).getPropertyValue("height").substring(0,window.getComputedStyle(header[0],null).getPropertyValue("height").length-2)))-4);
                console.log("Margin Top: "+typeof(4));
                console.log("Margin Left: "+img.style.marginLeft);
            }
        }

我知道它看起来很混乱，这就是我所担心的。

我本质上是试图为标题栏设置动画，该标题栏在滚动条滚动经过某个点之后会折叠。但是，我里面有多个元素需要折叠和操纵，而不仅仅是保持缩放（即，折叠时更改边距，展开时设置为原始边缘，所有这些都应同时进行，并且从用户的角度均匀。

我有一个后续问题，是否值得使用原始JavaScript？还是我应该学习一个框架？如果是这样，哪一个，以及为什么在香草JavaScript上使用框架，即使经过我的全部研究，我仍在努力了解，如果这些框架最初是基于JavaScript构建的，那么学习这些框架对于Web开发为何如此重要位置（关于vue或反应等）

我可以正确地编写JavaScript网络动画吗？

0 个答案: