script per modificare proprietà css

wods

script per modificare proprietà css

salve io non conosco il liguaggio javascript, ma ho provato a scrivere questo...in pratica modifica le proprità di un elemento in basse alla posizione che si trova rispetto alla finestra del broswer cioè la viewport.
ora ci ho messo due giorni e funziona, ma solo per un elemento con un ID, ma vorrei che fuzionasse per tutti gli elemeti con la stessa classe.
ogni elemento deve essere autonomo, cioè non devono influenzarsi tra loro se per esempio il primo elemento si trova in una posizione deve modificare solo la sua rotazione
così come il secondo elemento se si trova in una posizione deve modificare solo la sua rotazione
Grazie in anticipo dell'aiuto

js

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

html


<!DOCTYPE html>
<html>

<head>
  <title>Thdh</title>
      <link rel="stylesheet" href="css/style.css">
</head>

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




</body>

</html>

css

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