Merge pull request #287 from longo-andrea/article/js-animations

JavaScript animations

Author: longo-andrea

Diff for: 7-animation/3-js-animation/1-animate-ball/solution.md

@@ -1,8 +1,8 @@
-To bounce we can use CSS property `top` and `position:absolute` for the ball inside the field with `position:relative`.
+Per il rimbalzo potete utilizzare la proprietà CSS `top` e `position:absolute` sulla palla dentro il campo con `position:relative`.
 
-The bottom coordinate of the field is `field.clientHeight`. The CSS `top` property refers to the upper edge of the ball. So it should go from `0` till `field.clientHeight - ball.clientHeight`, that's the final lowest position of the upper edge of the ball.
+Le coordinate del fondo del campo sono `field.clientHeight`. La proprietà CSS `top` fa riferimento al bordo alto della palla. Quindi dovrebbe andare da `0` fino a `field.clientHeight - ball.clientHeight`, questa è la posizione finale, quella più bassa rispetto al bordo alto della palla.
 
-To get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
+Per dare l'effetto di "rimbalzo" possiamo utilizzare la funzione di temporizzazione `bounce` in modalità `easeOut`.
 
 Here's the final code for the animation:
 

Diff for: 7-animation/3-js-animation/1-animate-ball/task.md

@@ -2,8 +2,8 @@ importance: 5
 
 ---
 
-# Animate the bouncing ball
+# Fate rimbalzare la palla
 
-Make a bouncing ball. Click to see how it should look:
+Fate rimbalzare la palla. Clicca per vedere come dovrebbe apparire l'animazione:
 
 [iframe height=250 src="solution"]

Diff for: 7-animation/3-js-animation/2-animate-ball-hops/solution.md

@@ -1,18 +1,18 @@
-In the task <info:task/animate-ball> we had only one property to animate. Now we need one more: `elem.style.left`.
+Nell'esercizio <info:task/animate-ball> era richiesto di animare una sola proprietà. Ora dovete animarne una in più: `elem.style.left`.
 
-The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
+La coordinata orizzontale varia secondo un'altra regola: non deve limitarsi a rimbalzare, ma deve anche scorrere verso destra.
 
-We can write one more `animate` for it.
+Potete scrivere un ulteriore `animate` per questo.
 
-As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better.
+Potreste utilizzare la funzione di temporizzazione `linear`, ma qualcosa come `makeEaseOut(quad)` renderà l'animazione migliore.
 
-The code:
+Il codice:
 
 ```js
 let height = field.clientHeight - ball.clientHeight;
 let width = 100;
 
-// animate top (bouncing)
+// anima top (rimbalzo)
 animate({
   duration: 2000,
   timing: makeEaseOut(bounce),
@@ -21,7 +21,7 @@ animate({
   }
 });
 
-// animate left (moving to the right)
+// anima left (sposta verso destra)
 animate({
   duration: 2000,
   timing: makeEaseOut(quad),

Diff for: 7-animation/3-js-animation/2-animate-ball-hops/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Animate the ball bouncing to the right
+# Fate rimbalzare la palla verso destra
 
-Make the ball bounce to the right. Like this:
+Fate rimbalzare la palla verso destra. Come nell'esempio:
 
 [iframe height=250 src="solution"]
 
-Write the animation code. The distance to the left is `100px`.
+Scrivete il codice relativo all'animazione. La distanza da sinistra è `100px`.
 
-Take the solution of the previous task <info:task/animate-ball> as the source.
+Prendete la soluzione dell'esercizio precedente <info:task/animate-ball> come punto di partenza.