Animacje CSS i JavaScript
Guidelines for animation
- Use CSS keyframe animation or CSS transitions, if at all possible. The browser can optimize painting and compositing bigtime here.
- If needs to be it’s JS-based animation, use
requestAnimationFrame
. AvoidsetTimeout
,setInterval
. - Avoid changing inline styles on every frame (jQuery
animate()
-style) if you can, declarative animations in CSS can be optimized by the browser way more. - Using 2D transforms instead of absolute positioning will typically provide better FPS by way of smaller paint times and smoother animation.
- Use Timeline Frame’s mode to investigate what is slowing down your behavior
- “Show Paint Rects” and “Render Composited Layer Borders” are good pro-moves to verify where your element is being rendered.
When you change elements, the browser may need to do a layout, which involves calculating the geometry (position and size) of all the elements affected by the change. If you change one element, the geometry of other elements may need to be recalculated. For example, if you change the width of the element any of its children may be affected. Due to the way elements overflow and affect one another, changes further down the tree can sometimes result in layout calculations all the way back up to the top. Source
Efekty i animacje CSS - hovery przycisków, linków; efekty przejść, obrotów
- Animate.css - efekty przyciągające uwagę, efekty przejść, wejść, zanikania, obrotów, powiększania itd.
- Hover.css - efekty hover, w tym przesunięć, zmian teł, zmian obramowań itd.
- CreativeButtons - efekty hover przycisków
- CreativeLinkEffects - efekty hover linków menu
- IconHoverEffects - efekty hover ikon
Właściwości CSS do tworzenia animacji
transform: translate/rotate/skew etc.
animation
+@keyframes
@keyframes
Box poruszający się z góry na dół.
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
/* Standard syntax */
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px; background: yellow;}
100% {top: 0px;}
}
Efekty i animacje scroll - pojawianie się elementów, animacje, parallax
- ScrollReveal.js - proste animacje scroll
- fullPage.js - fullscreen scrolling websites
- ScrollMagic.js - interakcje i animacje scroll
- Parallax.js - simple parallax scrolling
- Skrollr - stand-alone parallax scrolling
Animacje SVG
- vivus - efekt rysowania SVG
Animacje HTML5 Canvas
- EaselJS - prosty silnik animacji elementów canvas
Slider
- slick - prosty i uniwersalny slider jQuery
jQuery
Biblioteki JS złożonych animacji
- Tween.js - prosty silnik animacji
- Anime.js - silnik animacji
- Opis animacji w frameworku GreenSock Animation Platform (GSAP) po polsku
- SpiritJS (w przygotowywaniu - stan na 2017-06-02)
- Przykłady