| type |
content |
super-big-text |
**JavaScript + jQuery effects**
|
|
| content |
notes |
## JS doesn’t do effects—CSS does
- All the effects we see are created by CSS
- JavaScript has no concept of animations—it’s all CSS
- We trigger CSS into action with JS
|
That’s not entirely true, just simplified. JS can do effects with the `<canvas>` tag: it’ll do full 2D & 3D graphics and interactions.
|
|
| content |
## Trigger with classes
1. JavaScript will add a class to an element
2. The class will have associated CSS
3. That `animation` or `transition` will be triggered
|
|
| type |
html |
css |
css_lines |
css_hidden |
js |
js_hidden |
interactive |
<div></div>
|
div {
background-color: darkred;
transition: all .5s linear;
}
.is-clicked {
background-color: orange;
}
|
| num |
text |
3 |
Remember that the `transition` must **always** be on the default state—never on the `:hover` or the class that JS adds.
|
|
|
div {
height: 200px;
width: 200px;
}
|
$('div').on('click', function (e) {
$(this).toggleClass('is-clicked');
});
|
|
|
| type |
html_hidden |
css |
css_lines |
css_hidden |
js |
js_hidden |
interactive |
<div></div>
|
div {
height: 200px;
width: 200px;
}
.is-clicked {
animation: spin 1s ease;
}
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
|
| num |
text |
5 |
The `.is-clicked` class doesn’t exist anywhere in our HTML—it’s added by the JavaScript code.
It’s a fairly common convention to prefix the classes with `is-` or `js-` to denote that JavaScript is the thing that is affecting this class.
|
|
|
div {
height: 200px;
width: 200px;
background-color: darkred;
}
|
$('div').on('click', function (e) {
$(this).addClass('is-clicked');
});
|
|
|
| content |
## Events
Animations & transitions dispatch events that our JS can respond to:
- `animationstart`, `animationiteration`, `animationend`
- `transitionend`
|
|
| type |
html_hidden |
css_hidden |
js |
js_lines |
js_hidden |
interactive |
<div></div>
|
div {
height: 200px;
width: 200px;
background-color: darkred;
animation: none 1s ease;
}
.is-clicked {
animation-name: spin;
}
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
|
$('div').on('click', function (e) {
$(this).addClass('is-clicked');
});
$('div').on('animationend', function (e) {
$(this).removeClass('is-clicked');
});
|
| num |
text |
5 |
Here we’re listening to the special `animationend` event that isn’t triggered by the user, but’s triggered by the CSS when the keyframe animation completes.
This event allows us to do things after the animation has finished playing.
|
|
|
|
|
| content |
## Let’s no forget SVG!
Treat it the same as any other HTML—just add classes, transitions & animations
|
|
| type |
html |
css |
js |
js_hidden |
interactive |
<svg viewBox="0 0 200 200" width="200" height="200">
<circle fill="midnightblue" cx="100" cy="100" r="90" />
</svg>
|
circle {
transition: all 1s ease;
}
.is-clicked {
fill: purple;
}
|
$('svg').on('click', function (e) {
$('circle').toggleClass('is-clicked');
});
|
|
|
| content |
## Videos & tutorials
- [JavaScript + jQuery effects ➔](/topics/javascript-jquery-effects/)
|
|