Workshop Design Cool Effects (Parallax & others): - Cool Effects examples - CSS Transitions - Transformations - CSS Animations - Keyframes - Hover - Background video - Parallax effect - Librerías CSS animation Presentado por diseñadores Toni Camí y Jorge López

1. Front End Workshops
CSS Animations & cool effects
Toni Camí & Jorge López
jlopez@visual-engin.com
tcami@visual-engin.com

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

9. Transformations

10. CSS Transform property allow you to visually
manipulate an element by skewing, rotating,
translating or scaling.

11. 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

12. CSS Animations

13. 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.

14. 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.

15. 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

16. Keyframes

17. 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
}

18. ● 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.

19. Hover

20. <body>
<div>
<button class="trigger">
Menu <span></span>
</button>
</div>
</body>
</html>

21. .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);
}

22. Background video

23. 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>

24. .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

25. Parallax effect

26. 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

27. <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%;
}

28. <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>

29. 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');
}

30. Librerías CSS animation

31. 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/

32. Examples

33. - 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/

34. Thanks for your time!
:)