El efecto de crear una sensación de movimiento sobre una imagen en WordPress, es un recurso muy llamativo que podemos aplicar en Sydney al hacer un efecto Parallax con Elementor.
Por defecto, Elementor no trae esta opción para poder configurarla a nuestro gusto.
La única posibilidad de efecto Parallax que podemos hacer directamente es fijar la imagen y dejarla estática mientras el contenido de la web se desplaza al hacer scroll.
Añadir un código para conseguir un efecto "Parallax" real
Para poder recrear el efecto que tenemos en el slider de la cabecera, tenemos que añadir un código al archivo "funtions.php" del tema Sydney, pero en un tema hijo que tengamos activado.
Como el tema hijo de Sydney ya lo creamos en su momento para modificar los créditos del pié o footer de la web, sólo tenemos que editar el archivo "funtions.php" desde el editor de temas, que se encuentra en la pestaña "Apariencia" de la administración.
Si por cualquier circunstancia, tenemos bloqueada esta opción, tendremos que acceder desde un cliente FTP, como FileZilla, o a través del gestor de archivos del servidor.
El siguiente código, recogido del foro de soporte de wordpress.org, hay que colocarlo al final del archivo "funtion.php" del tema hijo. Lo repito para no equivocarnos a la hora de elegir el archivo correcto.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | function jquery_parallax() { ?> <script language="JavaScript" type="text/javascript"> ;(function($) { 'use strict' var testMobile; var isMobile = { Android: function() { return navigator.userAgent.match(/Android/i); }, BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i); }, iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, Opera: function() { return navigator.userAgent.match(/Opera Mini/i); }, Windows: function() { return navigator.userAgent.match(/IEMobile/i); }, any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); } }; var parallax = function() { testMobile = isMobile.any(); if (testMobile == null) { $(".parallax").parallax("50%", 0.3); } }; // Dom Ready $(function() { parallax(); }); })(jQuery); /* jQuery Parallax 1.1.3 Author: Ian Lunn Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/ Dual licensed under the MIT and GPL licenses: http://www.opensource.org/licenses/mit-license.php http://www.gnu.org/licenses/gpl.html */ !function(n){var t=n(window),e=t.height();t.resize(function(){e=t.height()}),n.fn.parallax=function(o,r,i){function u(){var i=t.scrollTop();l.each(function(t,u){var l=n(u),f=l.offset().top,s=a(l);i>f+s||f>i+e||l.css("backgroundPosition",o+" "+Math.round((l.data("firstTop")-i)*r)+"px")})}var a,l=n(this);l.each(function(t,e){$element=n(e),$element.data("firstTop",$element.offset().top)}),a=i?function(n){return n.outerHeight(!0)}:function(n){return n.height()},(arguments.length<1||null===o)&&(o="50%"),(arguments.length<2||null===r)&&(r=.1),(arguments.length<3||null===i)&&(i=!0),t.bind("scroll",u).resize(u),u()}}(jQuery); </script> <?php } if (!(is_admin())) { wp_enqueue_script('jquery'); add_action('wp_head', 'jquery_parallax'); } |
Tras pegar el código, guardamos los cambios y cerramos el editor.
Cómo aplicar el efecto "Parallax" en Elementor
El proceso es muy sencillo, elegimos la sección donde tenemos la imagen de fondo y en la pestaña "Avanzado", añadimos la palabra (clase) "parallax" en la casilla de "Clases CSS".
Es posible que no se vea el resultado al momento, tenemos que guardar los cambios y hacer un visualización de la página.
Solucionar el error de transición
Este fallo se produce en ocasiones cuando la imagen es de un tamaño mayor, pero se soluciona con un pequeño ajuste en la pestaña de "CSS adicional" del personalizador de WordPress.
1 2 3 4 | /* Quitar transición de los objetos “PARALLAX” */ .parallax { transition: none !important; } |
0 comentarios