I am trying to create an on-scroll animation but I am quite unfamiliar with JQuery. At this point I can make the div element rotate, relative to the page scroll position, but I want it to have a static value once it reaches a certain degree. So I've tried to add an if statement but I'm not sure how to go about it. Please let me know what I'm doing wrong.
$(document).ready(function(){
$(document).scroll(function(){
var scollHeight = $(document).height();
var maxRotate = 55;
var rotateVal = 2 + (($(document).scrollTop()* maxRotate) / scollHeight)*4;
$("#bag-holder").css("transform", "rotate("+(-rotateVal)+"deg)");
if($("#bag-holder").css("transform", "rotate") > 90 + "deg") {
$("#bag-holder").css("transform", "rotate(110deg)");
}
});
});*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-image: linear-gradient(to top,
#a18cd1 0%,
#fbc2eb 100%);
height: 200vh;
overflow-x: hidden;
}
#plastic-bag{
transform: scale(0.1);
transform-origin: center;
}
#bag-holder{
position: fixed;
top: -90%;
left: 0;
transform-origin: center;
z-index: 50;
}<html>
<head>
<title>Supa Ginja</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<div class="item-holder" id="bag-holder" data-type="parallax" data-depth="3">
<img id="plastic-bag" src="SupaGinja-pic.png">
</div>
</html>
Aucun commentaire:
Enregistrer un commentaire