Hey! Ich habe nun eine Animation auf meiner Webseite eingebaut. Nun ist meine Frage: Die Aninmation kommt, wenn die Webseite neu geladen/geöffnet wird. Jedoch soll die Animation des Bildes erst kommen, wenn ich runterscrolle und bei diesem animierten Inhalt bin. Wie kann ich das machen?
Code
<html>
<head>
<script src="/js_webseite/jquery.js"></script>
<style>
*{
margin-left:0px;
padding:0px;
}
body{
height:1500px;
overflow:scroll;
}
#inhalt{
display:none;
position:fixed;
top:0px;
left:0px;
background:red;
height:80px;
width:80px;
animation:start 5s linear forwards infinite;
text-align:center;
font-weight:900;
}
span{
font-size:30px;
}
@keyframes start{
0%,100%{
position:fixed;
left:100vw;
}
50%{
position:fixed;
left:0;
}
}
</style>
</head>
<body>
<div id="inhalt"><span id="mitte"></span>
<div id="box" >
</div> </div>
<script>
function someAction(e) {
var text = document.getElementById('inhalt');
if (e.deltaY > 0) {
$('#inhalt').fadeIn();
$('#mitte').html('Run');
}else if (e.deltaY < 0) {
$('#mitte').html('Stop');
$('#inhalt').fadeOut();
}
}
window.addEventListener('mousewheel', someAction, false);
</script>
</body>
</html>