Repozytorium Web Developera

Animacje CSS i JavaScript

Guidelines for animation

  1. Use CSS keyframe animation or CSS transitions, if at all possible. The browser can optimize painting and compositing bigtime here.
  2. If needs to be it’s JS-based animation, use requestAnimationFrame. Avoid setTimeout, setInterval.
  3. 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.
  4. Using 2D transforms instead of absolute positioning will typically provide better FPS by way of smaller paint times and smoother animation.
  5. Use Timeline Frame’s mode to investigate what is slowing down your behavior
  6. “Show Paint Rects” and “Render Composited Layer Borders” are good pro-moves to verify where your element is being rendered.

Source

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

Właściwości CSS do tworzenia animacji

@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

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