1. Home
  2. Marco HTML
  3. Animations

Animations

Marco offers the ability to use animation on all elements. You can animate own element by adding a class presented below.
 

Animation classes:

 

img-wrapper
class animating a image
animate-text
class animating a text
animate-second
you can use only with class “animate-text”. It’s delay animation for e.g. second line text
mosaic-item
you can use only for mosaic element

Example of use (about.html)

 

... 
   TEXT ANIMATION
   <div class="header animate-text">
       <h3>Our goal is to server amazing food to<span class="italic-header">everyone</span></h3>
       ...
   </div>  
   <div class="content animate-text animate-second">
       <p>Duis dignissim gravida ante, sed volutpat tortor lacinia at. Ut eu purus in erat laoreet ultrices. Donec neque magna, iaculis sed commodo nec, venenatis eu orci. </p>
       ...
   </div> 

   IMAGE ANIMATION
   <div class="image-content">
       <span class="img-wrapper">
          <img src="assets/img/about/1.jpg"/>
       </span>
   </div>  
  
...
Was this article helpful to you? Yes No