essai avec Animation CSS

eracom-gr461 · Sep 22, 2017 · 2e83719 · 2e83719
1 parent 2bf37f4
commit 2e83719
Show file tree

Hide file tree

Showing 2 changed files with 129 additions and 45 deletions.
diff --git a/index-cercle.html b/index-cercle.html
@@ -5,52 +5,107 @@
         <title>The JS Clocks</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="css/normalize.css">
-        <link rel="stylesheet" href="css/style.css">
-        <script defer src="js/clocks.js"></script>
         <style>
-        svg {
-          border: 1px solid black;
-        }
-
-        #seconde {
-          stroke: #00ff00;
-          transform: translate(50%,50%) rotate(-3deg);
-          transform-origin: 50%, 0px;
-        }
-
-        @keyframes sarabande {
-        0% {
-          transform: translate(50%,50%) rotate(0deg);
-        }
-        100% {
-          transform: translate(50%,50%) rotate(360deg);
-        }
-      }
-
-      #seconde {
-         animation: sarabande 2s infinite;
-         animation-timing-function: linear;
-      }
+
+	        body {
+					  display: flex;
+					  flex-direction: column;
+					  justify-content: center;
+					  text-align: center;
+					  height: 100%;
+					  width: 100%;
+					  position: absolute;
+					  top: 0;
+					}
+
+		      svg {
+		        border: 1px solid #ddd;
+		        background: #fff;
+		        margin: auto;
+		        height: 100%;
+		        width: auto;
+		      }
+
+	        /*
+	        * Rules for Vertical Screens
+	        */
+	        @media screen and ( max-aspect-ratio: 1/1 ) {
+	          body {
+	            background: #ccc;
+	          }
+	          svg {
+	            width: 100%;
+	            height: auto;
+	          }
+	        }
+
+
+	        @keyframes sarabande {
+		        0% {
+		          transform: translate(50%,50%) rotate(0deg);
+		        }
+		        100% {
+		          transform: translate(50%,50%) rotate(360deg);
+		        }
+		      }
+
+		      #seconde {
+		      	animation: sarabande 2s infinite;
+	        	animation-timing-function: linear;
+	        	stroke: #00ff00;
+	        	fill: none;
+	        	stroke-miterlimit: 10;
+	        	transform: translate(50%,50%) rotate(0deg);
+		      }
 
         </style>
     </head>
     <body>
 
-		<svg width="600" height="600">
-
-    		<circle id="seconde" style="fill:none;stroke-miterlimit:10;" cx="100" cy="100" r="6"/>
-
-        <circle id="minutes" style="fill:#FFFFFF;stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;" cx="300" cy="112" r="20"/>
-
-    		<g id="heures">
-    			<circle style="fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;" cx="300" cy="50" r="40"/>
-
-      				<line style="fill:none;stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;" x1="55.454" y1="300" x2="13.158" y2="300"/>
-
-      				<line style="fill:none;stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;" x1="533.466" y1="300" x2="575.762" y2="300"/>
-    		</g>
-		</svg>
-
+			<svg id="vector" width="600" height="600" viewbox="0 0 600 600">
+
+	    		<circle id="seconde" cx="100" cy="100" r="16"/>
+
+	    		<g id="markers">
+	      		<line style="fill:none;stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;" x1="55.454" y1="300" x2="13.158" y2="300"/>
+
+	      		<line style="fill:none;stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;" x1="533.466" y1="300" x2="575.762" y2="300"/>
+	    		</g>
+			</svg>
 
+			<script>
+
+
+				// coloriser un élément SVG
+
+				// paramètres SVG:
+				// stroke-width
+				// stroke
+
+				// document.getElementById("seconde").style.stroke = '#00ff00';
+
+				document.querySelector("#seconde").style.stroke = '#00ffff';
+				document.querySelector("#seconde").style.strokeWidth = 3;
+				// document.querySelector("#seconde").style.transform = 'translate(0,-20%) rotate(-3deg)';
+				// document.getElementById("seconde").style.display = 'none';
+				// Changer la position:
+
+				// Cloner un élément:
+
+				// Get the last <li> element ("Milk") of <ul> with id="myList2"
+				var itm = document.getElementById("seconde");
+
+				// Copy the element
+				var cln = itm.cloneNode(true);
+
+				// Change the elment
+				cln.id = 'seconde1';
+				cln.style.stroke = '#ff0000';
+				cln.style.transform = 'translate(50%,50%) rotate(-0deg)';
+
+				// Append the cloned element to something
+				document.getElementById("vector").appendChild(cln);
+
+			</script>
     </body>
 </html>
diff --git a/js/clocks.js b/js/clocks.js
@@ -6,16 +6,42 @@
  * Auteur: Mikael Elmblad, tcip.se
 */
 
-//afficher une alerte hello world
-alert("hello world");
-//afficher un message dans le console
-console.log("bonjour");
 // répéter la fonction metronone une fois par seconde
 
 var myVar = setInterval(function() {
   metronome();
 }, 1000);
 
+// coloriser un élément SVG
+
+// paramètres SVG:
+// stroke-width
+// stroke
+
+// document.getElementById("seconde").style.stroke = '#00ff00';
+
+document.querySelector("#seconde").style.stroke = '#00ffff';
+document.querySelector("#seconde").style.strokeWidth = 3;
+// document.querySelector("#seconde").style.transform = 'translate(0,-20%) rotate(-3deg)';
+// document.getElementById("seconde").style.display = 'none';
+// Changer la position:
+
+// Cloner un élément:
+
+// Get the last <li> element ("Milk") of <ul> with id="myList2"
+var itm = document.getElementById("seconde");
+
+// Copy the element
+var cln = itm.cloneNode(true);
+
+// Change the elment
+cln.id = 'seconde1';
+cln.style.stroke = '#ff0000';
+cln.style.transform = 'translate(50%,50%) rotate(-0deg)';
+
+// Append the cloned element to something
+document.getElementById("vector").appendChild(cln);
+
 
 function metronome() {
 
@@ -24,8 +50,11 @@ function metronome() {
 
   var d = new Date(); // 2: ceci produit la date
 
+  // Sélectionner la seconde et la dupliquer:
+
+
   // 2: on affiche l'heure dans notre objet "horloge"
 
-  document.getElementById("horloge").innerHTML = d.toLocaleTimeString();
+  // document.getElementById("horloge").innerHTML = d.toLocaleTimeString();
 
 }