如果元素距视口顶部300px，则更改其CSS属性

Question

嗨，我不懂javascript，但是我试着写这个……这改变了元素的属性……根据它相对于浏览器窗口的位置。视口。

我花了两天时间，现在它可以工作了，但是只需要一个元素，因为您只能使用一个ID，我希望它可以用于所有具有相同类的元素。

每个元素必须是自治的，因此它们不必相互影响。

例如，如果称为Primo的元素处于某个位置，则只能修改其旋转 同样，如果称为Secondo的元素处于某个位置，则只能修改其旋转 预先感谢您的帮助

function getViewportOffset($e) {
  var $window = $(window),
    scrollLeft = $window.scrollLeft(),
    scrollTop = $window.scrollTop(),
    offset = $e.offset(),
    rect1 = { x1: scrollLeft, y1: scrollTop, x2: scrollLeft + $window.width(), y2: scrollTop + $window.height() },
    rect2 = { x1: offset.left, y1: offset.top, x2: offset.left + $e.width(), y2: offset.top + $e.height() };
  return {
    left: offset.left - scrollLeft,
    top: offset.top - scrollTop,
    insideViewport: rect1.x1 < rect2.x2 && rect1.x2 > rect2.x1 && rect1.y1 < rect2.y2 && rect1.y2 > rect2.y1
  };
}
$(window).on("load scroll resize", function() {
  var viewportOffset = getViewportOffset ($("#primo"));
  var valueprimo = viewportOffset.top - 350;
      if  (viewportOffset.top < 130)  {
        document.getElementById("primo").style.transform = "rotatez(-55deg) rotate(-45deg)  translate(0,0)";
    } else if (viewportOffset.top > 343) {
        document.getElementById("primo").style.transform = "rotatez(0deg) rotate(-45deg)  translate(0,0)";
    } else if (viewportOffset.top > 130) {
        document.getElementById("primo").style.transform = "rotatez(" + valueprimo / 4 + "deg) rotate(-45deg)  translate(0,0)";
    }
});

body {height: 2048px}
.element {position: absolute;
  top: 400px; left: 30px;
  width: 107px;
  height:107px;
  background-color: #707070}
#secondo {position: absolute;
  top: 450px; left: 150px;
}
#terzo {position: absolute;
  top: 550px; left: 270px;
}
#quarto {position: absolute;
  top: 650px; left: 150px;
}
#quinto {position: absolute;
  top: 450px; left: 510px;
}
#sesto {position: absolute;
  top: 350px; left: 630px;
}
#settimo {position: absolute;
  top: 650px; left: 450px;
}

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="primo" class="element" name="element"></div>
<div id="secondo" class="element" name="element"></div>
<div id="terzo" class="element" name="element"></div>
<div id="quarto" class="element" name="element"></div>
<div id="quinto" class="element" name="element"></div>
<div id="sesto" class="element" name="element"></div>
<div id="settimo" class="element" name="element"></div>

    <script  src="js/index.js"></script>

Answer 1

尝试使用.each()函数，如下所示：

function getViewportOffset($e) {
  var $window = $(window),
      scrollLeft = $window.scrollLeft(),
      scrollTop = $window.scrollTop(),
      offset = $e.offset(),
      rect1 = { x1: scrollLeft, y1: scrollTop, x2: scrollLeft + $window.width(), y2: scrollTop + $window.height() },
      rect2 = { x1: offset.left, y1: offset.top, x2: offset.left + $e.width(), y2: offset.top + $e.height() };
  return {
    left: offset.left - scrollLeft,
    top: offset.top - scrollTop,
    insideViewport: rect1.x1 < rect2.x2 && rect1.x2 > rect2.x1 && rect1.y1 < rect2.y2 && rect1.y2 > rect2.y1
  };
}
$(window).on("load scroll resize", function() {
    $(".element").each(function(){
          var viewportOffset = getViewportOffset ($(this));
          var valueprimo = viewportOffset.top - 350;
          if  (viewportOffset.top < 130)  {
             $(this).css("transform", "rotatez(-55deg) rotate(-45deg)  translate(0,0)");
          } 
          else if (viewportOffset.top > 343) {
                $(this).css("transform", "rotatez(0deg) rotate(-45deg)  translate(0,0)");
          } 
          else if (viewportOffset.top > 130) {
                $(this).css("transform", "rotatez(" + valueprimo / 4 + "deg) rotate(-45deg)) translate(0,0)");
          }
    });
});

body {height: 2048px}
.element {position: absolute;
  top: 400px; left: 30px;
  width: 107px;
  height:107px;
  background-color: #707070}
#secondo {position: absolute;
  top: 450px; left: 150px;
}
#terzo {position: absolute;
  top: 550px; left: 270px;
}
#quarto {position: absolute;
  top: 650px; left: 150px;
}
#quinto {position: absolute;
  top: 450px; left: 510px;
}
#sesto {position: absolute;
  top: 350px; left: 630px;
}
#settimo {position: absolute;
  top: 650px; left: 450px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="primo" class="element" name="element"></div>
<div id="secondo" class="element" name="element"></div>
<div id="terzo" class="element" name="element"></div>
<div id="quarto" class="element" name="element"></div>
<div id="quinto" class="element" name="element"></div>
<div id="sesto" class="element" name="element"></div>
<div id="settimo" class="element" name="element"></div>

Answer 2

您可以在数组中提供滚动时要动画化的元素的ID，其下/上滚动位置以开始/停止动画，animation属性的初始/最终值以及要为其动画的信息或对象，然后遍历它，例如像这样：

var settings = {
   primo: {
      minTop: 130,
      maxTop: 350,
      // animates rotation from -55 deg to 0
      valAtMin: -55,
      valAtMax: 0,
      transformTemplate: "rotatez({X}deg) rotate(-45deg)  translate(0,0)"
   },
   secondo: {
      minTop: 20,
      maxTop: 160,
      // animates rotation from 175 deg to -30deg
      valAtMin: 175,
      valAtMax: -30,
      transformTemplate: "rotatez({X}deg) rotate(-45deg)  translate(0,0)"
   },
   terzo: {
      minTop: 50,
      maxTop: 180,
      // this time, animates the horizontal shift from 0 to 90px
      valAtMin: 0,
      valAtMax: 90,
      transformTemplate: "rotate(-45deg) translate({X}px,0)"
   }
}

// no need to redefine this on each call
var $window = $(window);
 
function getViewportOffset($e) {
  var scrollLeft = $window.scrollLeft(),
      scrollTop = $window.scrollTop(),
      offset = $e.offset(),
      rect1 = { x1: scrollLeft, y1: scrollTop, x2: scrollLeft + $window.width(), y2: scrollTop + $window.height() },
      rect2 = { x1: offset.left, y1: offset.top, x2: offset.left + $e.width(), y2: offset.top + $e.height() };
  return {
    left: offset.left - scrollLeft,
    top: offset.top - scrollTop,
    insideViewport: rect1.x1 < rect2.x2 && rect1.x2 > rect2.x1 && rect1.y1 < rect2.y2 && rect1.y2 > rect2.y1
  };
}

$(window).on("load scroll resize", function() {
   for (var id in settings) {
      var elem = $('#'+id);
      if (!elem) continue; // skip if element with this id doesn't exist
      var elemSettings = settings[id];
      var offsetTop = getViewportOffset(elem).top;
      var value;
      // calculate the value proportionally to scrolling position between limits
      if (offsetTop <= elemSettings.minTop) value = elemSettings.valAtMin;
      else if (offsetTop >= elemSettings.maxTop) value = elemSettings.valAtMax;
      else value = elemSettings.valAtMin + (elemSettings.valAtMax - elemSettings.valAtMin) * (offsetTop - elemSettings.minTop) / (elemSettings.maxTop - elemSettings.minTop);
      // store the current value in the same object
      elemSettings.value = value;
   }

   // if this is the first call, start the animation 
   if (!animationStarted) requestAnimationFrame(doAnimation);     
});

// a small performance optimization:
// use requestAnimationFrame for animation to avoid too frequent redrawings
function doAnimation() {
   for (var id in settings) {
      var elem = $('#'+id);
      if (!elem) continue; // skip if element with this id doesn't exist
      var elemSettings = settings[id];
      elem.css('transform', elemSettings.transformTemplate.replace('{X}', elemSettings.value));
   }
   requestAnimationFrame(doAnimation);
}

animationStarted = false;

body {height: 2048px}
.element {position: absolute;
  top: 400px; left: 30px;
  width: 107px;
  height:107px;
  background-color: #707070}
#secondo {position: absolute;
  top: 450px; left: 150px;
}
#terzo {position: absolute;
  top: 550px; left: 270px;
}
#quarto {position: absolute;
  top: 650px; left: 150px;
}
#quinto {position: absolute;
  top: 450px; left: 510px;
}
#sesto {position: absolute;
  top: 350px; left: 630px;
}
#settimo {position: absolute;
  top: 650px; left: 450px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="primo" class="element" name="element"></div>
<div id="secondo" class="element" name="element"></div>
<div id="terzo" class="element" name="element"></div>
<div id="quarto" class="element" name="element"></div>
<div id="quinto" class="element" name="element"></div>
<div id="sesto" class="element" name="element"></div>
<div id="settimo" class="element" name="element"></div>