Post on 14-Jan-2017
Front End WorkshopsCSS Animations & cool effects
Toni Camí & Jorge López
jlopez@visual-engin.comtcami@visual-engin.com
Cool EffectsExamples
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-delayConfigures the delay between the time the element is loaded and the beginning of the animation sequence.
animation-directionConfigures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.
animation-durationConfigures the length of time that an animation should take to complete one cycle.
animation-iteration-countConfigures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
animation-nameSpecifies the name of the @keyframes at-rule describing the animation's keyframes.
animation-play-stateLets you pause and resume the animation sequence.
animation-timing-functionConfigures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.
animation-fill-modeConfigures 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 JSExamplehttp://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>
<!-- 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>
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!
:)