Como animar titulos em css

Como animar titulos em css

O pessoal de front-end responsável pelo site amy-movie.com revelam como foi criado o ecra de abertura do site utilizando renderização por css e transições tween.

A sequência de titulo do site

Na página de abertura do site amy-movie.com assistimos à animação de um texto no canto superior esquerdo. Vamos ver como o site consegue fazer isto, sugerindo algumas técnicas para a animação. Como ressalva, à que manter em mente que esta é apenas uma forma de conseguir o efeito, sendo que existem várias outras também válidas, como na maioria das coisas em webdesign o único limite é a imaginação.

Ligação às bibliotecas

001 <!-- Place in the head of your page -->    
002 <script src="https://cdnjs.    cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>    
003 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

Código HTML

Estrutura básica HTML par ao elemento. Temos uma tag <h2> formatada com a class ‘visuallyhidden’ – este não será visivel no browser mas é útil em termos de optimização SEO.
Numa div principal colocamos cada linha do titulo dentro de paragrafos <p>, ambos os elementos são formatados via css. A partir daqui podemos dar inicio à animação.

001 HTML:    
002 <h2 class="visuallyhidden">A heart-breaking journey, a ground-breaking motion picture</h2>    
003 <div class="teaser__title">    
004 <p class="line">A heart-breaking</    p>    
005 <p class="line">journey</p>    
006 <p class="line">a ground-breaking</    p>    
007 <p class="line">motion picture</p>
008 </div>    
009 CSS:    
010 /* Class shown for additional     reference */    
011 .visuallyhidden {    
012 position: absolute;    
013 overflow: hidden;    
014 clip: rect(0 0 0 0);    
015 height: 1px;    
016 width: 1px;    
017 margin: -1px;    
018 padding: 0;    
019 border: 0    
020 }    

Estilizar os titulos

001 CSS:    
002 // Aparecencia    
003 .teaser__title {    
004 color: #FFF;    
005 font: normal 90px/110px AkzidenzGroteskBQ, sans-serif;    
006 letter-spacing: 8px;    
007 position: relative;    
008 text-transform: uppercase;    
009 }    
010     
011 .teaser__title .line {
012 clear: both;    
013 color: inherit;    
014 float: left;    
015 margin: 0 0 5px;    
016 position: relative;    
017 visibility: hidden;    
018 }    

Adicionar pseudo-elemento

001 CSS:    
002     
003 .teaser__title .line::after {
004 left: 0;    
005 position: absolute;    
006 top: auto;    
007 background: #FFF;    
008 bottom: 0;    
009 content: " ";    
010 display: block;    
011 height: 7px;    
012 -webkit-transition: width 300ms     cubic-bezier(.77, 0, .175, 1);    
013 -moz-transition: width 300ms     cubic-bezier(.77, 0, .175, 1);    
014 -ms-transition: width 300ms cubic-    bezier(.77, 0, .175, 1);    
015 -o-transition: width 300ms cubic-bezier(.77, 0, .175, 1);    
016 transition: width 300ms cubic-bezier(.77, 0, .175, 1);    
017 width: 0;    
018 }    
019    
020 .teaser__title .line.is--enabled::after {    
021 width: 100%    
022 }
023 

 Animação JS e GSAP

Vamos utilizar jquery para aceder aos elementos DOM, embora se possa fazer o mesmo com javascript. Em seguida trabalhamos com a biblioteca GSAP da Greensock (greensock.com(gsap) para definir a timeline de tween da animação do titulo. Isto irá iniciar o desenho da linha préviamente criada no css, basta chamar a função.

Leave a Reply

Your email address will not be published. Required fields are marked *