Workshop 18: CSS Animations & cool effects

Workshop 18: CSS Animations & cool effects
Front End Workshops CSS Animations & cool effects Toni Camí & Jorge López jlopez@visual-engin.com tcami@visual-engin.com
Cool Effects Examples
Parallax effect
CSS Transitions
CSS Transitions allows property changes in CSS properties to occur smoothly over a specified duration.
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
Transition-property CSS
Transformations
CSS Transform property allow you to visually manipulate an element by skewing, rotating, translating or scaling.
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
CSS Animations
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.
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.
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
Keyframes
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 }
● 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.
Hover
<body> <div> <button class="trigger"> Menu <span></span> </button> </div> </body> </html>
.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); }
Background video
Example http://dev2.slicejack.com/fullscreen-video-demo/index.html <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>
.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
Parallax effect
Speed, movement & position. Elements behavior depends on the scroll. You can add to Backgrounds, divs or sprites. ONLY CSS WITH JS Example http://jonathannicol.com/projects/parallax-scrolling/ Example download
<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%; }
<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>  <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>  <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>
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'); }
Librerías CSS animation
http://www.minimamente.com/example/magic_animations/ http://ianlunn.github.io/Hover/#effects http://daneden.github.io/animate.css/ http://h5bp.github.io/Effeckt.css/
Examples
- Example 2 Loaders: http://callmenick.com/_development/css-loaders-and- spinners-2/ - Slack-CSS-Logo-master -> http://callmenick.com/_development/slack- logo/ Un curso interesante para iniciarse en Animaciones con CSS: https://codyhouse.co/course/mastering-css-transitions-transformations- animations/
Thanks for your time! :)

Workshop 18: CSS Animations & cool effects

Check these out next

Workshop 18: CSS Animations & cool effects

Recommended

More Related Content

Slideshows for you(19)

Similar to Workshop 18: CSS Animations & cool effects(20)

More from Visual Engineering(20)

Recently uploaded(20)

Workshop 18: CSS Animations & cool effects