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;
}
x entrambe visibili in cima a tutte le pagine