jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

components

Browse source
This commit is contained in:
Ilya Kantor 2019-04-02 14:01:44 +03:00
parent 304d578b54
commit 6fb4aabcba
344 changed files with 669 additions and 406 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
7-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
7-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

7
7-animation/2-css-animations/2-animate-logo-bezier-css/solution.md Normal file
View file

@ -0,0 +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".
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)

38
7-animation/2-css-animations/2-animate-logo-bezier-css/solution.view/index.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img {
display: block;
cursor: pointer;
}
</style>
<style>
#flyjet {
width: 40px;
height: 24px;
transition: all 3s cubic-bezier(0.25, 1.5, 0.75, 1.5);
}
#flyjet.growing {
width: 400px;
height: 240px;
}
</style>
</head>
<body>
<img id="flyjet" src="https://en.js.cx/clipart/flyjet.jpg">
<script>
flyjet.onclick = function() {
flyjet.classList.add('growing');
};
</script>
</body>
</html>

13
7-animation/2-css-animations/2-animate-logo-bezier-css/task.md Normal file
View file

@ -0,0 +1,13 @@
importance: 5
---
# Animate the flying plane (CSS)
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.