Un pic de animatie nu strica…

Am introdus la blog un mic efect de animatie si vreau sa va arat codurile si daca doriti le puteti implementa si la voi. Site-ul de unde va puteti alege un efect si fisierul ce trebuie introdus in site il gasiti aici. Tot acolo se gasesti un link spre fisierul de care avem nevoie in ghithub, link. Descarcati toate fisierele si o sa avem nevoie doar de animate.min.css pe care il veti introduce in tema via ftp.

Urmatoarea funtie se adauga in functions.php pentru a ne putea folosi de el…

function animate_scripts() {

 wp_enqueue_style( 'animate.min', get_stylesheet_directory_uri() . '/animate.min.css' );   

}
add_action( 'wp_enqueue_scripts', 'animate_scripts' );

Odata ce am facut acest lucru trebuie sa mai introducem un pic de jQuery in footer.php ca tot sa capete forma. Indetificati divurile care le doriti sa le animati cu inspect element si odata indetificate le puneti in codul jQuery.

Codul meu este acesta.

<script>
jQuery(window).scroll(function(){
  if (jQuery("body").scrollTop() > 150) {
    jQuery("#main.content-part").addClass("animated fadeInLeft");
  } else {
    jQuery("#main.content-part").removeClass("animated fadeInLeft");
  }
});

jQuery(window).scroll(function(){
  if (jQuery("body").scrollTop() > 150) {
    jQuery("#sidebar.sidebar").addClass("animated fadeInRight");
  } else {
    jQuery("#sidebar.sidebar").removeClass("animated fadeInRight");
  }
});  

</script>

Dar atentie acest e codul de baza pe care o sa il folositi.

<script>
jQuery(window).scroll(function(){
  if (jQuery("body").scrollTop() > 100) {
    jQuery("DIVULMEU").addClass("animated fadeInLeft");
  } else {
    jQuery("DIVULMEU").removeClass("animated fadeInLeft");
  }
});

</script>

Inlocuiti DIVULMEU cu cel dorit si tot va merge foarte bine. Va puteti alege ce efect doriti si inlocuitii fadeInLeft in cod… pentru alte nelamuriri va stau la dispozitie.