Animation 2
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?
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<html>
<head>
<script src="/js_webseite/jquery.js"></script>
<style>
body{
display:flex;
flex-direction:column;
height:1500px;
}
header{
background:#27abcd;
height:500px;
}
nav{
height:200px;
background:green;
}
#inhalt{
display:inline-block;
position:absolute;
top:400px;
left:0px;
background:red;
height:80px;
width:80px;
animation:start 5s linear forwards infinite;
text-align:center;
font-weight:900;
animation-play-state:paused;
}
span{
font-size:30px;
}
@keyframes start{
0%,100%{
left:0;
}
50%{
left:100%;
}
}
</style>
</head>
<body>
<header></header>
<nav></nav>
<div id="inhalt"><span id="mitte"></span></div>
<script>
function someAction(e) {
var $win = $(window).scroll(function() {
if($win.scrollTop() > 200) {
$('#inhalt').css("animation-play-state", "running");
$('#mitte').html('Run');
}else{
$('#mitte').html('Stop');
$('#inhalt').css("animation-play-state", "paused");
}
})
}
window.addEventListener('mousewheel', someAction, false);
</script>
</body>
</html>