Soporte » Temas y plantillas » Efecto Ken Burns en Slide Show

  • Resuelto Cristobal

    (@cristobal-paez)


    BUenos dias a todos!! Estoy intentando agregar el efecto Ken Burns en mi Slide Show. Pero la verdad que estoy BASTANTE PERDIDO!. Es cuestion codigos en el CSS o mas complicado? Si me señalan por donde investigar ya me apaño. MUCHAS GRACIAS!!!
    http://www.verbo10.com

Viendo 15 respuestas - 1 de 15 (de 67 total)
  • Cristobal

    (@cristobal-paez)

    Buen dia! Sigo investigando y estuve tratando con estos pasos: http://www.css-101.org/articles/ken-burns_effect/css-transition.php
    Pero Al parecer debo modificar o agragar Scrip y ahi se me complico demasiado. Ya clave dos veces mi Local Host!. Y la verdad no estoy seguro que estos pasos sean los adecuados para mi tema

    Dame un tiempo para mirarlo más de cerca y ver cómo se puede implementar. Te comemnto que no creo que puedas utilizar el tutorial de css-101.com porque el código HTML del slider es muy distinto del que usan en su demo.
    Una duda: el slider que tienes ahora es parte de tu tema o lo incorporaste a través de un plugin?

    Cambio: Otra cosa a tomar en cuenta es que, por el momento, las imágenes que se muestran en tu slideshow son exactamente del mismo tamaño que el contenedor en el que se encuentran, lo que no sirve para un efecto Kenburns. Para que funcione, tendrían que ser bastante más grandes que el contenedor.

    Cristobal

    (@cristobal-paez)

    hola Marventus! El slider es parte del Theme. Las imagenes las recorto yo antes de subirlas (1008×380) porque no sabia como reducir la altura del Slider sin modificar el ancho. Seguro hay una forma correcta.

    El turorial Css-101 fue lo que encontre y lo uncio que logre fue colgar el local host…

    SALUDOS!!!!

    Hola, Cristobal.
    Recién ahora pude dedicarle un poco de tiempo a esto y logré implementar el tutorial con varios cambios.
    La demo está disponible aquí. Usé tus mismas imágenes con sus respectivos tamaños para que te sea más sencillo.
    Una aclaración, para estar seguro de que te sirva: logré el efecto usando una propiedad de CSS3 llamada transition. No todos los navegadores pueden leer propiedades CSS3 o esta propiedad en particular (esto afecta a los más antiguos sobre todo). Aquí te paso un cuadro de compatibilidad de esta propiedad.
    Avísame si te sirve.
    Saludos!

    Cristobal

    (@cristobal-paez)

    BUen dia Marventus!!! esta tarde lo pruebo y apenas tenga resultados te aviso!!! GRRRRRAAACCCCCIIIIIIAAAASSSSS!!!!!!!

    Cristobal

    (@cristobal-paez)

    Buen dia Marventus! Estoy frente al demo y no se que hacer, me da verguenza pero es la verdad. Lo de CSS lo pillo pero lo de JAVA Y HTML no se como implementarlo en mi web. En tu mensaje pones “…logré implementar el tutorial.” El tutorial es el demo?
    Perdona por tantas preguntas y pero un minimo cambio que hago en la web me toma horas y horas de leer y esfuerzo y cuando las cosas se complican un poco ni se por donde empezar.

    SALUDOS!!!

    Hola, Cristobal.
    Lo que quise decir es que, como no tengo acceso a tu servidor, creé una demo de tu página con el HTML y le hice las modificaciones necesarias (a la demo) para que funcione el efecto. Pero no las hice en tu sitio. Es decir, la demo es simplemente una prueba que hice para ver si se podía implementar el efecto de acuerdo al tutorial al que linkeaste en tu primer post, y efectivamente se puede, con algunos cambios importantes.
    Si la demo te gusta, y no te molesta que esté hecha en CSS 3 (por el tema de la compatibilidad con navegadores antiguos que te mencionaba antes), te puedo decir cómo implementarla en tu sitio.

    Cristobal

    (@cristobal-paez)

    Buenas tardes Marventus, gracias por la traduccion! Me permito
    hacerte unas preguntas.
    1-La incopatibilidad es algo preocupante, pero los navegadores viejos terminaran por actualizarse y ser compatibles…es asi?
    2-Estos “…cambios importantes” que mencionas, afectarian la velocidad de mi web?
    3-En el demo la imagen vibra al hacer el Zoom…tambien sucederia eso en la version real?

    De todas formas podria probarlo yo en mi Local host y ver que resultado me da.

    Muchas gracias Marventus!!!!

    Hola.
    1. Por navegadores antiguos me refiero a versiones anteriores de navegadores. Igual, si te fijas en el cuadro que te pasé, verás que es bastante compatible en líneas generales, por lo que no creo que sea un problema.
    2. Los “cambios importantes” son los que tuve que hacerle al tutorial para que funcione como lo ves en la demo. No harían falta más cambios para hacerlo funcionar.
    3. La vibración ocurre sólo al principio y en JSFiddle. No me vibró en la prueba que hice en mi instalación local.

    Cristobal

    (@cristobal-paez)

    hola, pues lo hagamos!!!

    Ok. Antes que nada, necesito que me confirmes si ésta es la estructura de directorios de tu tema, porque creo que tengo una versión más nueva del tema que la tuya:
    admin
    docs
    images
    js
    languages
    library
    – admin
    – classes
    – css
    – extensions
    – functions
    – images
    – js

    Cristobal

    (@cristobal-paez)

    donde lo miro?

    Cristobal

    (@cristobal-paez)

    lo encontre…dame un seg

    Cristobal

    (@cristobal-paez)

    Si, es el mismo orden

    Ok, perfecto. Aquí van las instrucciones:
    1. En library/css/, crea una nueva hoja de estilos (le vamos a poner custom.css) y pega este código adentro:

    /* START Custom Changes */
    .featured-post{
        height:380px!important;
        overflow:hidden!important;
    }
    .featured-post a img{
    	-webkit-transition-property: -webkit-transform;
    	-webkit-transition-duration: 8s;
    	-moz-transition-property: -moz-transform;
    	-moz-transition-duration: 8s;
    	-ms-transition-property: -ms-transform;
    	-ms-transition-duration: 8s;
    	-o-transition-property: -o-transform;
    	-o-transition-duration: 8s;
    	transition-property: transform;
    	transition-duration: 8s;
    	/* slide 1 */
    	-webkit-transform-origin: bottom left;
    	-moz-transform-origin: bottom left;
    	-ms-transform-origin: bottom left;
    	-o-transform-origin: bottom left;
    	transform-origin: bottom left;
    }
    .featured-post .slide-2 a img{
    	-webkit-transform-origin: top left;
    	-moz-transform-origin: top left;
    	-ms-transform-origin: top left;
    	-o-transform-origin: top left;
    	transform-origin: top left;
    }
    .featured-post .slide-3 img{
    	-webkit-transform-origin: bottom left;
    	-moz-transform-origin: bottom left;
    	-ms-transform-origin: bottom left;
    	-o-transform-origin: bottom left;
    	transform-origin: bottom left;
    }
    .featured-post .slide-4 a img{
    	-webkit-transform-origin: center left;
    	-moz-transform-origin: center left;
    	-ms-transform-origin: center left;
    	-o-transform-origin: center left;
    	transform-origin: center left;
    }
    .featured-post .slide-5 a img{
    	-webkit-transform-origin: bottom left;
    	-moz-transform-origin: bottom left;
    	-ms-transform-origin: bottom left;
    	-o-transform-origin: bottom left;
    	transform-origin: bottom left;
    }
    .featured-post .slide-6 a img{
    	-webkit-transform-origin: top right;
    	-moz-transform-origin: top right;
    	-ms-transform-origin: top right;
    	-o-transform-origin: top right;
    	transform-origin: top right;
    }
    .current img{
    	-webkit-transform: scale(1.5);
    	 -moz-transform: scale(1.5);
    	-ms-transform: scale(1.5);
    	-o-transform: scale(1.5);
    	transform: scale(1.5);
    }
    /* END Custom Changes */

    2. En js/, crea un nuevo script (llamado custom.js), y pega este código adentro:

    /* CUSTOM SCRIPTS */
    var jqu = jQuery.noConflict();
    
    jqu( function () {
    
    	/* Remove a class from the body tag if JavaScript is enabled */
    	jqu( 'body' ).removeClass( 'no-js' );
    
    	/* Masonry */
    	var $container = jqu( '.hfeed-more');
    	var width = $container.width();
    	$container.imagesLoaded( function() {
    		$container.masonry( {
    			temSelector: '.hentry',
    			columnWidth: width * 0.4787234042553191,
    			gutterWidth: width * 0.0425531914893617,
    			isResizable: true,
    		} );
    	} ); 		
    
    	/* Cycle */
    	jqu( '#featured-content' ).cycle( {
    		slideExpr: '.featured-post',
    		fx: 'fade',
    		speed: 500,
    		timeout: slider_settings.timeout,
    		cleartypeNoBg: true,
    		pager: '#slide-thumbs',
    		slideResize:   true,
    		containerResize: false,
    		fit: 1,
    		prev: '#slider-prev',
    		next: '#slider-next',
    		pagerAnchorBuilder: function( idx, slide ) {
    			// return selector string for existing anchor
    			return '#slide-thumbs li:eq(' + idx + ') a';
        	},
    		before: function(){
    			jqu(this).siblings('.featured-post.current').removeClass('current');
    		},
    		after: function(){
    			jqu(this).addClass('current');
    		}
    	} );
    
    	/* FitVids */
    	jqu( ".entry-content" ).fitVids();	
    
    } );
    jqu(window).load(function() {
        //jqu('.featured-post > a').wrap('<div class="feat-img-wrap" />');
    	var i = 2;
    	jqu('.featured-post > a').not(":first").each(function(){
    		jqu(this).wrap('<div class="slide-'+i+'" />');
    		++i;
    	});
    });

    3. En library/functions/, crea un archivo llamado user-functions.php, y pega el siguiente código adentro:

    <?php
    function v10_custom_scripts() {
        /* Registro de estilos */
        wp_deregister_script('oxygen_footer_scripts');
        wp_register_script('v10_custom_js', get_template_directory_uri() . '/js/custom.js', array( 'jquery', 'oxygen_imagesloaded', 'oxygen_masonry', 'oxygen_cycle', 'oxygen_fancybox', 'oxygen_fitvids' ), '', true );
        wp_register_style('v10_custom_css', get_template_directory_uri() . '/library/css/custom.css', array(), '', 'all');
        /* Llamado de estilos */
        wp_enqueue_script('v10_custom_js');
        wp_enqueue_style('v10_custom_css');
    }
    add_action('wp_enqueue_scripts', 'v10_custom_scripts');

    4. Abre el archivo functions.php dentro del directorio principal del tema, y pega el código siguiente justo antes de la etiqueta de cierre de PHP (?>):

    require_once('library/functions/user-functions.php');

    Guarda todos los cambios. Con eso ya debería estar para tu localhost. Para implementarlo online, es sólo cuestión de subir los archivos modificados y los nuevos.
    Cuando logres implementarlo, avísame y te pasaré algunos consejos sobre cómo usarlo y personalizarlo.

Viendo 15 respuestas - 1 de 15 (de 67 total)
  • El debate ‘Efecto Ken Burns en Slide Show’ está cerrado a nuevas respuestas.