Workshop 18: CSS Animations & cool effects

Visual Engineering
Jun. 21, 2016

More Related Content


Workshop 18: CSS Animations & cool effects

  1. Front End Workshops CSS Animations & cool effects Toni Camí & Jorge López
  2. Cool Effects Examples
  3. Parallax effect
  4. CSS Transitions
  5. CSS Transitions allows property changes in CSS properties to occur smoothly over a specified duration.
  6. Transition-duration: Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time. Transition-property: Specifies the name or names of the CSS properties to which transitions should be applied. Transition-delay: Defines how long to wait between the time a property is changed and the transition actually begins. Transition-timing-function: Specifies a function to define how intermediate values for properties are computed. Timing functions determine how intermediate values of the transition are calculated. Most timing functions can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier. Easyng website
  7. Transition-property CSS
  8. Transformations
  9. CSS Transform property allow you to visually manipulate an element by skewing, rotating, translating or scaling.
  10. scale: affects the size of the element. This also applies to the font-size, padding, height, and width of an element, too. skewX and skewY: tilts an element to the left or right, like turning a triangle into a parallelogram. There is no shorthand skew property. translate: moves an element sideways or up and down. rotate: rotates the element clockwise from its current position. Transformations-properties CSS
  11. CSS Animations
  12. CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints. Advantages: 1. No JS is required. 2. Animations run well, rendering… 3. The browser optimize performance and efficiency. For example, reducing the update frequency of animations running in tabs that aren't currently visible.
  13. animation-delay Configures the delay between the time the element is loaded and the beginning of the animation sequence. animation-direction Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself. animation-duration Configures the length of time that an animation should take to complete one cycle. animation-iteration-count Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely. animation-name Specifies the name of the @keyframes at-rule describing the animation's keyframes.
  14. animation-play-state Lets you pause and resume the animation sequence. animation-timing-function Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves. animation-fill-mode Configures what values are applied by the animation before and after it is executing. Animation-properties CSS
  15. Keyframes
  16. Keyframes are used to specify the values for the animating properties at various points during the animation. @keyframes identifier (which will be referenced using animation-name: identifier) { CSS style rules }
  17. ● Keyframes use a <percentage> to indicate the time during the animation sequence at which they take place. ● 0% Start / 100% End. ● These two times are so important, they have special aliases: from and to. ● No negative ● No higher than 100%; ● You can optionally include additional keyframes that describe intermediate steps between the start and end of the animation.
  18. Hover
  19. <body> <div> <button class="trigger"> Menu <span></span> </button> </div> </body> </html>
  20. .trigger { position: relative; background: #444; width: 120px; height: 120px; border: none; border-radius: 50%; /* img replace */ overflow: hidden; text-indent: 100%; color: transparent; white-space: nowrap; cursor: pointer; } .trigger span, .trigger span::before, .trigger span::after { position: absolute; width: 44px; height: 4px; background: white; border-radius: 4px; } .trigger span { top: calc(50% - 2px); left: calc(50% - 22px); transition: transform .3s; } .trigger span::before, .trigger span::after { content: ''; left: 0; transition: transform .3s, width .3s; } .trigger span::before { bottom: 12px; } .trigger span::after { top: 12px; } .trigger:hover span { transform: rotate(180deg); } .trigger:hover span::before { width: 50%; transform: translateX(-2px) translateY(5px) rotate(-45deg); } .trigger:hover span::after { width: 50%; transform: translateX(-2px) translateY(-5 px) rotate(45deg); }
  21. Background video
  22. Example <div class="fullscreen-bg"> <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video"> <source src="video/big_buck_bunny.webm" type="video/webm"> <source src="video/big_buck_bunny.mp4" type="video/mp4"> <source src="video/big_buck_bunny.ogv" type="video/ogg"> </video> </div>
  23. .fullscreen-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; } .fullscreen-bg__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (min-aspect-ratio: 16/9) { .fullscreen-bg__video { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .fullscreen-bg__video { width: 300%; left: -100%; } } @media (max-width: 767px) { .fullscreen-bg { background: url('../img/videoframe.jpg') center center / cover no-repeat; } .fullscreen-bg__video { display: none; } } CSS
  24. Parallax effect
  25. Speed, movement & position. Elements behavior depends on the scroll. You can add to Backgrounds, divs or sprites. ONLY CSS WITH JS Example Example download
  26. <section id="home" data-type="background" data-speed="10" class="pages"> <article>I am absolute positioned</article> </section> <section id="about" data-type="background" data-speed="10" class="pages"> <article>Simple Parallax Scroll</article> </section> #about { background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); box-shadow: 0 0 50px rgba(0,0,0,0.8); } #about article { height: 458px; position: absolute; text-align: center; top: 150px; width: 100%; } #home { background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; } #home article { height: 458px; position: absolute; text-align: center; top: 150px; width: 100%; }
  27. <div id="parallax-bg3"> <img id="bg3-1" src="img/balloon.png" width="529" height="757" alt="Montgolfier hot air balloon"/> <img id="bg3-2" src="img/balloon2.png" width="603" height="583" alt="Frameless parachute"/> <img id="bg3-3" src="img/balloon3.png" width="446" height="713" alt="Blanchard's air balloon"/> <img id="bg3-4" src="img/ground.png" width="1104" height="684" alt="Landscape with trees and cows"/> </div> <!-- Parallax midground clouds --> <div id="parallax-bg2"> <img id="bg2-1" src="img/cloud-lg1.png" alt="cloud"/> <img id="bg2-2" src="img/cloud-lg1.png" alt="cloud"/> <img id="bg2-3" src="img/cloud-lg1.png" alt="cloud"/> <img id="bg2-4" src="img/cloud-lg1.png" alt="cloud"/> <img id="bg2-5" src="img/cloud-lg1.png" alt="cloud"/> </div> <!-- Parallax background clouds --> <div id="parallax-bg1"> <img id="bg1-1" src="img/cloud-lg2.png" alt="cloud"/> <img id="bg1-2" src="img/cloud-lg2.png" alt="cloud"/> <img id="bg1-3" src="img/cloud-lg2.png" alt="cloud"/> <img id="bg1-4" src="img/cloud-lg2.png" alt="cloud"/> </div>
  28. CSS #parallax-bg3 { z-index: 3; position: fixed; left: 50%; /* align left edge with center of viewport */ top: 0; width: 940px; margin-left: -470px; /* move left by half element's width */ } #bg3-1 { position: absolute; top: -111px; left: 355px; } #bg3-2 { position: absolute; top: 812px; left: 321px; } JAVASCRIPT function parallaxScroll(){ var scrolled = $(window).scrollTop(); $('#parallax-bg1').css('top',(0-(scrolled*.25))+'px'); $('#parallax-bg2').css('top',(0-(scrolled*.5))+'px'); $('#parallax-bg3').css('top',(0-(scrolled*.75))+'px'); }
  29. Librerías CSS animation
  31. Examples
  32. - Example 2 Loaders: spinners-2/ - Slack-CSS-Logo-master -> logo/ Un curso interesante para iniciarse en Animaciones con CSS: animations/
  33. Thanks for your time! :)