Animacija sadržaja

Objavljeno : 05.11.2015 Čitanja : 515

Kako biste mogli pratiti ovaj tutorial potrebno je prvo ugraditi jQuery, kako ugraditi jQuery možete pogledati ovdje.

 

Definiranje CSS stilova

 
CSS animacije
 
@keyframes come-in-left {to { margin-left: 0; } } 
@-webkit-keyframes come-in-left {to { margin-left: 0;  } } 
@keyframes come-in-right {to { margin-right: 0; } } 
@-webkit-keyframes come-in-right {to { margin-right: 0;  } }
Koristimo dvije animacije, jednu za prikaz sadržaja sa lijeve i jednu za prikaz sadržaja sa desne strane. Animacije rade na način da postave vrijednost margine lijeve/desne na 0 kako bi se sadržaj prikazao.
 
CSS klase
 
.come-in-left{
     margin-left: -200%; 
     animation: come-in-left 1s ease forwards; 
     -webkit-animation: come-in-left 1s ease forwards; } 
.come-in-right {
     margin-right: -200%; 
     animation: come-in-right 1s ease forwards; 
     -webkit-animation: come-in-right 1s ease forwards; }
Klase koje dodajemo sadržaju postavljaju sadržaj izvan dijela stranice koja je prikazana na monitoru, te nam na taj način omogućuju da se pozove sadržaj u trenutku kada se na našem ekranu pojavi dio stranice gdje se sadržaj treba nalaziti.
 

jQuery skripta

 
(function($) {

  $.fn.visible = function(partial) {
    
      var $t            = $(this),
          $w            = $(window),
          viewTop       = $w.scrollTop(),
          viewBottom    = viewTop + $w.height(),
          _top          = $t.offset().top,
          _bottom       = _top + $t.height() - 550,
          compareTop    = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;
    
    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

  };
    
})(jQuery);

$(window).scroll(function(event) {
  
  $(".animate-left").each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in-left"); 
    } 
  });
  $(".animate-right").each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in-right"); 
    } 
  });
Pomoću jQuery provjeravamo da li se klasa "animate-left" ili "animate-right" nalazi unutar dijela stranice koja je trenutno prikazana na monitoru. Ukoliko se sadržaj kojemu je pridjeljena jedna od navedene dvije klase nalazi na trenutno vidljivom dijelu monitora pridjeljuje se klasa "come-in-left" ili "come-in-right" koje animiraju pojavljivanje sadržaja sa lijeve ili desne strane ekrana.