Pregunta sobre Elementor Website Builder de Wordpress:

Parallax en Elementor

Un usuario preguntó 👇

¡Hola! Muy sorprendente sin paralaje. ¿Cómo poner efecto de paralaje en secciones y columna? Pruebe con un lápiz amarillo enchufable, pero por alguna razón no funciona. ¿Quizás hay un plugin compatible con elementor o …?

(@boazpojo)

Hace 4 años, 1 mes

Hola @benjober, No se requieren plugins adicionales. Simplemente cree un elemento, en Estilo establezca una imagen de fondo para él y en Apéndice seleccione Fijo.

(@benjober)

Hace 4 años, 1 mes

Sí, sé que la estabilidad está ahí, pero quiero ese tipo de paralaje. Aquí hay un ejemplo:
http://demos.artbees.net/jupiter5/new-parallax-effect/

(@boazpojo)

Hace 4 años, 1 mes

Hola @benjober, No tenemos un efecto incorporado como este. Probablemente haya un plugin que se pueda agregar a Elementor.

(@ 12steprecovery)

Hace 4 años, 1 mes

Hola @benjober

Investigué cómo el tema de Sydney https://en-gb.wordpress.org/themes/sydney/ obtuvo su efecto de paralaje (ver http://demo.athemes.com/sydney/) explora la posibilidad de agregarlo a otro tema usando Elementor.

Descubrí que Sydney está usando jQuery-Parallax https://github.com/IanLunn/jQuery-Parallax.

Así que tomé prestado un código de Sydney y lo agregué a las funciones theme.php de mi hijo de la siguiente manera:

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');
}

Colocando el selector CSS ‘paralaje’ en la pestaña Avanzado siguiendo las instrucciones de @boaz

Simplemente cree un artículo, en Estilo configure una imagen de fondo para él y en Adjunto seleccione Fijo.

tendrá el efecto de paralaje que estás buscando.

(@benjober)

Hace 4 años, 1 mes

Gracias

(@irogsinta)

Hace 4 años

Hola @ 12steprecovery, gracias por compartir cómo agregaste parallux. Lamento decirlo, pero soy relativamente nuevo en esto, así que me pregunto si podría explicarlo un poco más. Por ejemplo, descargué el código en el enlace de github pero no estoy seguro de qué hacer con él. Estoy pensando que necesito cargar los 3 archivos javascript en algún lugar de mi sitio de WordPress, pero no estoy seguro de cómo. Espero que pueda darme una idea.

Sello

(@joeleade)

Hace 3 años, 8 meses

¡Eres mi héroe, @ 12steprecovery! Me acaba de ahorrar un minuto, no a veces prueba y error. ¿Puedo enviarte algo de dinero? En serio 🙂 Gracias amigo.

(@vertiges)

Hace 3 años, 8 meses

Hola, gracias por compartir @ 12steprecovery. Desafortunadamente, no funciona con tabletas y teléfonos (pero funciona muy bien con computadoras de escritorio). Encuentro espacios en blanco arriba y / o debajo del fondo.

Acerca de

Esta respuesta fue modificada hace 3 años, 8 meses por.

(@vertiges)

Hace 3 años, 8 meses

Gracias Lyle, definitivamente lo comprobaré 😉

(@ terre-terre)

Hace 3 años, 4 meses

Hola, utilicé este método para dos de mis sitios, funcionó muy bien.

Pero dado que el elemento 1.5 del paralaje no funciona tan bien como el código de este hilo, el fondo no sigue tan bien como debería.

¿Alguien tiene la misma pregunta? El elemento puede haber realizado cambios en su estructura idk.

¡Gracias!

(@joeleade)

Hace 3 años, 4 meses

Sí, @elemntor ha agregado una pequeña transición al fondo. Publicaré CSS para resolver eso lo antes posible. ¡Salud!

(@cgdannie)

Hace 3 años, 4 meses

La solución más sencilla es desactivar la transición a los elementos que contienen el paralaje de la clase. Simplemente agregue el siguiente código a la hoja de estilo de su tema (style.css):

.parallax {
    transition: none !important;
}

Pero recuerde que esto deshabilitará las nuevas transiciones para el borde, el radio del borde y la sombra del cuadro para estos elementos.

Esta respuesta fue modificada hace 3 años, 4 meses por.

(@snifflevalve)

Hace 3 años, 4 meses

@cgdannie –

BRILLANTE !!! 🙂 ¡Eso funciona perfectamente!

@ terre-terre: publique la SEC en @cgdannie y funcionará muy bien.

¡Salud! Lyle

(@ terre-terre)

Hace 3 años, 4 meses

Gracias funciona 🙂

(@ terre-terre)

Hace 3 años, 2 meses

¡Oye, soy yo de nuevo! xD

¿Alguien ha tenido un problema con el paralax desde la última actualización de un elemento?

El cálculo del espacio entre la parte superior del contenedor y la parte superior del fondo parece ser incorrecto, lo que genera un espacio en blanco 🙁

Invertir pero aún fracasó .. gracias

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *