ok

iliakan · iliakan · commit aa521b90907a · 2017-03-22T11:35:49.000+03:00
diff --git a/5-animation/2-css-animations/1-animate-logo-css/solution.md b/5-animation/2-css-animations/1-animate-logo-css/solution.md
@@ -1,16 +1,17 @@
 
-CSS-код для анимации одновременно `width` и `height`:
+CSS to animate both `width` and `height`:
 ```css
-/* исходный класс */
+/* original class */
 
 #flyjet {
   transition: all 3s;
 }
-/* JS добавляет .growing *.
+
+/* JS adds .growing */
 #flyjet.growing {
   width: 400px;
   height: 240px;
 }
 ```
 
-Небольшая тонкость с окончанием анимации. Соответствующее событие `transitionend` сработает два раза -- по одному для каждого свойства. Поэтому, если не предпринять дополнительных шагов, сообщение из обработчика может быть выведено 2 раза.
+Please note that `transitionend` triggers two times -- once for every property. So if we don't perform an additional check then the message would show up 2 times.
diff --git a/5-animation/2-css-animations/1-animate-logo-css/solution.view/index.html b/5-animation/2-css-animations/1-animate-logo-css/solution.view/index.html
@@ -14,7 +14,7 @@
       height: 24px;
       transition: all 3s;
     }
-    
+
     #flyjet.growing {
       width: 400px;
       height: 240px;
@@ -24,7 +24,7 @@
 
 <body>
 
-  <img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
+  <img id="flyjet" src="https://en.js.cx/clipart/flyjet.jpg">
 
   <script>
     flyjet.onclick = function() {
@@ -34,7 +34,7 @@
       flyjet.addEventListener('transitionend', function() {
         if (!ended) {
           ended = true;
-          alert('Готово!');
+          alert('Done!');
         }
       });
 
@@ -44,4 +44,4 @@
 
 </body>
 
-</html>
+</html>
diff --git a/5-animation/2-css-animations/1-animate-logo-css/source.view/index.html b/5-animation/2-css-animations/1-animate-logo-css/source.view/index.html
@@ -12,7 +12,7 @@
     #flyjet {
       width: 40px;
       /* -> 400px */
-      
+
       height: 24px;
       /* -> 240px */
     }
@@ -21,9 +21,9 @@
 
 <body>
 
-  <img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
+  <img id="flyjet" src="https://en.js.cx/clipart/flyjet.jpg">
 
 
 </body>
 
-</html>
+</html>
diff --git a/5-animation/2-css-animations/1-animate-logo-css/task.md b/5-animation/2-css-animations/1-animate-logo-css/task.md
@@ -2,14 +2,13 @@ importance: 5
 
 ---
 
-# Анимировать самолёт (CSS)
+# Animate a plane (CSS)
 
-Реализуйте анимацию, как в демке ниже (клик на картинку):
+Show the animation like on the picture below (click the plane):
 
 [iframe src="solution" height=300]
 
-- Изображение растёт при клике с 40x24px до 400x240px .
-- Продолжительность анимации: 3 секунды.
-- По окончании вывести "Готово!".
-- Если в процессе анимации были дополнительные клики -- они не должны ничего "сломать".
-
+- The picture grows on click from 40x24px to 400x240px.
+- The animation takes 3 seconds.
+- At the end output: "Done!".
+- During the animation process, there may be more clicks. They shouldn't "break" anything.
diff --git a/5-animation/2-css-animations/2-animate-logo-bezier-css/solution.md b/5-animation/2-css-animations/2-animate-logo-bezier-css/solution.md
@@ -1,7 +1,7 @@
-Для такой анимации необходимо подобрать правильную кривую Безье.
+We need to choose the right Bezier curve for that animation. It should have `y>1` somewhere for the plane to "jump out".
 
-Чтобы она выпрыгивала вверх, обе опорные точки можно вынести по `y>1`, например: `cubic-bezier(0.25, 1.5, 0.75, 1.5)` (промежуточные опорные точки имеют `y=1.5`).
+For instance, we can take both control points with `y>1`, like: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.
 
-Её график:
+The graph:
 
-![](bezier-up.png)
+![](bezier-up.png)
diff --git a/5-animation/2-css-animations/2-animate-logo-bezier-css/solution.view/index.html b/5-animation/2-css-animations/2-animate-logo-bezier-css/solution.view/index.html
@@ -15,7 +15,7 @@
       height: 24px;
       transition: all 3s cubic-bezier(0.25, 1.5, 0.75, 1.5);
     }
-    
+
     #flyjet.growing {
       width: 400px;
       height: 240px;
@@ -25,14 +25,14 @@
 
 <body>
 
-  <img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
+  <img id="flyjet" src="https://en.js.cx/clipart/flyjet.jpg">
 
   <script>
     flyjet.onclick = function() {
       flyjet.classList.add('growing');
-    }
+    };
   </script>
 
 </body>
 
-</html>
+</html>
diff --git a/5-animation/2-css-animations/2-animate-logo-bezier-css/task.md b/5-animation/2-css-animations/2-animate-logo-bezier-css/task.md
@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Анимировать самолёт с перелётом (CSS)
+# Animate the flying plane (CSS)
 
-Модифицируйте решение предыдущей задачи <info:task/animate-logo-css>, чтобы в процессе анимации изображение выросло больше своего стандартного размера 400x240px ("выпрыгнуло"), а затем вернулось к нему.
+Modify the solution of the previous task <info:task/animate-logo-css> to make the plane grow more than it's original size 400x240px (jump out), and then return to that size.
 
-Должно получиться как здесь (клик на картинку)
+Here's how it should look (click on the plane):
 
 [iframe src="solution" height=350]
 
-В качестве исходного документа возьмите решение предыдущей задачи.
+Take the solution of the previous task as the source.
diff --git a/5-animation/3-js-animation/1-animate-ball/solution.md b/5-animation/3-js-animation/1-animate-ball/solution.md
@@ -1,20 +1,21 @@
-В HTML/CSS, падение мяча можно отобразить изменением свойства `ball.style.top` от 0 и до значения, соответствующего нижнему положению.
+To bounce we can use CSS property `top` and `position:absolute` for the ball inside the field with `position:relative`.
 
-Нижняя граница элемента `field`, в котором находится мяч, имеет значение  `field.clientHeight`. Но свойство `top` относится к верху мяча, поэтому оно меняется до `field.clientHeight - ball.clientHeight`.
+The bottom coordinate of the field is `field.clientHeight`. But the `top` property gives coordinates for the top of the ball, the edge position is `field.clientHeight - ball.clientHeight`.
 
-Для создания анимационного эффекта лучше всего подойдет функция `bounce` в режиме `easeOut`.
+So we animate the `top` from `0` to `field.clientHeight - ball.clientHeight`.
 
-Следующий код даст нам нужный результат:
+Now to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
+
+Here's the final code for the animation:
 
 ```js
 let to = field.clientHeight - ball.clientHeight;
 
 animate({
   duration: 2000,
   timing: makeEaseOut(bounce),
-  draw: function(progress) {
+  draw(progress) {
     ball.style.top = to * progress + 'px'
   }
 });
 ```
-
diff --git a/5-animation/3-js-animation/1-animate-ball/solution.view/index.html b/5-animation/3-js-animation/1-animate-ball/solution.view/index.html
@@ -35,7 +35,7 @@
       animate({
         duration: 2000,
         timing: makeEaseOut(bounce),
-        draw: function(progress) {
+        draw(progress) {
           ball.style.top = to * progress + 'px'
         }
       });
@@ -48,4 +48,4 @@
 
 </body>
 
-</html>
+</html>
diff --git a/5-animation/3-js-animation/1-animate-ball/source.view/index.html b/5-animation/3-js-animation/1-animate-ball/source.view/index.html
@@ -2,18 +2,18 @@
 <html>
 
 <head>
-  <script src="https://js.cx/libs/animate.js"></script>
+  <script src="https://en.js.cx/libs/animate.js"></script>
   <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
 
 
   <div id="field">
-    <img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
+    <img src="https://en.js.cx/clipart/ball.svg" width="40" height="40" id="ball">
   </div>
 
 
 </body>
 
-</html>
+</html>
diff --git a/5-animation/3-js-animation/1-animate-ball/task.md b/5-animation/3-js-animation/1-animate-ball/task.md
@@ -2,9 +2,8 @@ importance: 5
 
 ---
 
-# Анимируйте мяч
+# Animate the bouncing ball
 
-Сделайте так, чтобы мяч подпрыгивал. Кликните по мячу, чтобы увидеть, как это должно выглядеть.
+Make a bouncing ball. Click to see how it should look:
 
 [iframe height=250 src="solution"]
-
diff --git a/5-animation/3-js-animation/2-animate-ball-hops/solution.md b/5-animation/3-js-animation/2-animate-ball-hops/solution.md
@@ -1,17 +1,18 @@
-В задаче <info:task/animate-ball> создаётся подпрыгивающий мяч. Нам нужно всего лишь добавить еще одну анимацию для `elem.style.left`.
+In the task <info:task/animate-ball> we had only one property to animate. Now we need one more: `elem.style.left`.
 
-Горизонтальная координата меняется по другому закону, нежели вертикальная. Она не "подпрыгивает", а постоянно увеличивается, постепенно сдвигая мяч вправо.
+The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
 
-Поэтому мы не можем добавить её в тот же `animate`, нужно делать отдельный.
+We can write one more `animate` for it.
 
-В качестве временной функции для перемещения вправо мы могли бы применить для неё `linear`, но тогда горизонтальное движение будет отставать от скачков мяча. Более красиво будет что-то типа `makeEaseOut(quad)`.
+As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better.
 
-Код:
+The code:
 
 ```js
 let height = field.clientHeight - ball.clientHeight;
 let width = 100;
 
+// animate top (bouncing)
 animate({
   duration: 2000,
   timing: makeEaseOut(bounce),
@@ -20,6 +21,7 @@ animate({
   }
 });
 
+// animate left (moving to the right)
 animate({
   duration: 2000,
   timing: makeEaseOut(quad),
@@ -28,4 +30,3 @@ animate({
   }
 });
 ```
-
diff --git a/5-animation/3-js-animation/2-animate-ball-hops/task.md b/5-animation/3-js-animation/2-animate-ball-hops/task.md
@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Анимируйте падение мяча с отскоками вправо
+# Animate the ball bouncing to the left
 
-Заставьте мяч падать вправо. Кликните, чтобы увидеть в действии.
+Make the ball bounce to the left. Like this:
 
 [iframe height=250 src="solution"]
 
-Напишите код, который будет анимировать мяч. Дистанция вправо составляет `100px`.
+Write the animation code. The distance to the right is `100px`.
 
-В качестве исходного кода возьмите решение предыдущей задачи <info:task/animate-ball>.
+Take the solution of the previous task <info:task/animate-ball> as the source.
diff --git a/5-animation/3-js-animation/article.md b/5-animation/3-js-animation/article.md
diff --git a/5-animation/3-js-animation/move-raf.view/index.html b/5-animation/3-js-animation/move-raf.view/index.html
diff --git a/5-animation/3-js-animation/text.view/index.html b/5-animation/3-js-animation/text.view/index.html
diff --git a/5-animation/3-js-animation/width.view/index.html b/5-animation/3-js-animation/width.view/index.html
diff --git a/figures.sketch b/figures.sketch
