¡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:
En el widget de Slider tengo un slider sencillo con este plugin:
En el widget Home top Message, home action, pre footer 1 y pre footer 2 tengo un widget de 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.
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.
