Depot43-Unterlagen - Event fortlaufend

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Event fortlaufend</title>
	<style>
        #rot {
            position:relative;
            width:50px;
            height:50px;
            background-color:  red;
            cursor:pointer;
            animation: myanim-for 20s 1;
            animation-play-state: paused;
	   animation-fill-mode: forwards
        }
        #rot.animGofor {
            animation-play-state: running;
        }
	#rot.animGoback {
            animation-play-state: running;
        }
        button {
            width: 120px;
            height: 20px;
            margin-top:40px;
            color: black;
            cursor:pointer;
        }
        button:active {
            color: red;
        }

        
        /* KeyFrames die Angaben für die Animation *****************************/
       
        @keyframes myanim-for {
            0% {left:0px;}
            100% {left:1000px;}
        }
	@keyframes myanim-back {
            0% {left:1000px;}
            100% {left:0px;}
        }
	</style>
</head>
<body>
        <div id="rot" class=""></div>
        <button id="playfor" onclick="startfor()">Vorwärts</button>
	<button id="playback" onclick="startback()">Rückwärts</button>

        <script>
        var klick = 0;
        function startfor() {
            if(klick == 0) {
                document.getElementById("rot").className = "animGofor";
                klick = 1;
            } else {
                document.getElementById("rot").className = "";
                klick = 0;
            }  
        } 
	function startback() {
            if(klick == 0) {
                document.getElementById("rot").className = "animGoback";
                klick = 1;
            } else {
                document.getElementById("rot").className = "";
                klick = 0;
            }  
        } 
	</script>
</body>
</html>


 

            

Beachte

Eine Klassenzuweisung mit Javascript braucht keine zusätzliche Bibliothek.
Hier wird die Klasse in einer Bedingung geladen/entladen und zusätzlich die Anschrift des Buttons gesteuert.

Der Code für den Button ruft die Funktion auf:

<button id="play">

Die Funktion lädt die Klasse und erzeugt die Anschrift des Buttons

     var klick = 0;
        function startFunction() {
            if(klick == 0) {
                document.getElementById("rot").className = "animGo";
                document.getElementById("play").innerHTML = "Stoppen";
                klick = 1;
            } else {
                document.getElementById("rot").className = "";
                document.getElementById("play").innerHTML = "Starten";
                klick = 0;
            }  
        }

Für eine einzelne Animation oder ein Werbebanner, ist dies meist die einfachste Lösung.