Genesis Framework

Como usar Smoove para hacer Scroll Animations en WordPress y Gensis Framework

 

¡Hola! En este vídeo tutorial, aprenderás a  instalar  Smoove para darle efectos a tu web mientras haces scroll, vamos a utilizar WordPress, Gensis framework,un child theme gratuito y Smoove.

Ok, en el vídeo yo ya tengo instalado un child theme gratuito el cual puedes descargar desde aquí también puedes ver toda su documentación aquí.

Génesis framework lo puedes comprar desde  la pagina de estudiopress.

Puedes descargar Smoove desde aquí .

En el vídeo yo muestro el child theme instalado, el área de widgets completo y también el menú  en este vídeo enseño a como configurar el área de menú de cualquier childtheme.

 

En el área de widget en Header Right tengo un menú personalizado:menu personalizado

En el widget de Slider tengo un slider sencillo con este plugin:

slider

 

 

En el  widget  Home top Message, home action, pre footer 1 y  pre footer 2   tengo un  widget  de texto.

texto

 

Y por ultimo en los   widget Home bottom 1, Home bottom 2 y home bottom 3 tengo un  widget de genesis genesis-fature-page.

homebottom1

 

Ok, el código que agregue en el documento  functions.php es el siguiente lo copias y lo pegas: 

//* Enqueue Smoove on non handhelds
add_action( 'wp_enqueue_scripts', 'load_smoove' );
function load_smoove() {

if ( wp_is_mobile() ) {
return;
}

wp_enqueue_script( 'smoove', get_stylesheet_directory_uri() . '/js/jquery.smoove.min.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'smoove-init', get_stylesheet_directory_uri() .'/js/smoove-init.js' , array( 'smoove' ), '1.0.0', true );

}

Todo el codigo que agregue en el archivo js  smoove-init.js es el siguiente  :

jQuery(function( $ ){

$('.home-top-message .widget').smoove({
rotate: '360deg'
});

$('.home-action').smoove({
move: '-50px, 100px'
});

$ ( '.home-bottom-1 .widget' ) .smoove ({
move: '-300px',
});

$('.home-bottom-2 .widget').smoove({

moveY: '300px'
});

$('.home-bottom-3 .widget').smoove({

move: '300px'
});

$('.pre-footer-1 .widget').smoove({

rotateX:'90deg',
moveZ:'-400px',
transformOrigin:'bottom'
});

$('.pre-footer-2 .widget').smoove({

rotate:'150deg',
moveX:'-400px',
transformOrigin:'right'
});

})

 

Ahora puedes empezara jugar, y utilizar esta herramienta para sus próximos proyectos.

El tutorial original esta en ingles y es sridharkatakam.com  te dejo el link del tuto.

 

 

 

comparte este post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email