Un usuario preguntó 👇
Hola, he activado el modo técnico y veo que el svg está entrando correctamente, pero cuando intento enfocar scrollbagic en cualquiera de las clases para animarlas / cambiarlas, no funciona.
Intenté insertar manualmente el mismo código svg en mi archivo de plantilla para probar y funciona como se esperaba.
¿Alguna idea de lo que está pasando?
(@benbodhi)
Hace 3 años, 5 meses
Hola,
¡Gracias por usar mi plugin!
Difícil de decir. ¿Puede proporcionar enlaces para ver ambos? Uno funciona en su archivo de plantilla y el otro no funciona mientras se alinea con mi plugin.
Entonces puedo mirar y ver si puedo ver lo que está sucediendo.
Lanzador de hilos
(@nitrokev)
Hace 3 años, 5 meses
Hola gracias por la rápida respuesta.
Coloqué los dos svgs uno al lado del otro para comparar
http://web.artisan-creative.co.uk/staging/bcp/
Es el logotipo en la parte superior de la pantalla (BCP) cuando se desplaza hacia abajo en la página y luego hace una copia de seguridad, la magia de desplazamiento debería cambiar el color de las letras en el logotipo a blanco, luego volver a su color original cuando llegue a la parte superior del Sitio web, verá que el svg incrustado en el código está funcionando, pero el que está alineado con el modo avanzado no lo está.
(@benbodhi)
Hace 3 años, 5 meses
No lo menciones.
Entiendo lo que quieres decir, pero realmente no veo por qué está sucediendo eso.
El SVG definitivamente está alineado correctamente y debería poder concentrarse en los elementos dentro de él sin ningún problema, ya que puedo modificar los elementos que solo se enfocan en las clases que tiene allí usando CSS como:
.slideUp .top-bar .style-svg .cls3 {
fill: red;
}No estoy familiarizado con scrollmagic, así que no puedo ayudar … ¿Pero en qué te estás enfocando exactamente? Tal vez, si tengo más contexto y datos, pueda ayudar con más soluciones de problemas.
También valdría la pena acceder al soporte de desplazamiento, porque técnicamente, debería poder concentrarse en el contenido del SVG alineado usando mi plugin.
Se me ocurrió que puede estar involucrado cuando se enumeran los archivos JS. Hay una opción para seleccionar un encabezado / pie de página en la configuración de mi plugin si desea intentar cambiarlo para ver si hace una diferencia al grabar el JS en línea.
Esta respuesta fue modificada hace 3 años, 5 meses por. Lanzador de hilos
(@nitrokev)
Hace 3 años, 5 meses
Gracias
Probé un encabezado y pie de página para los scripts, y los scripts svg se cargan antes que scrollmagic.
Este es el código de desplazamiento mágico
// build tween
var tween = new TimelineMax()
.add(TweenMax.to(".cls1", 0.5, {fill:"#ffffff", ease:Linear.easeNone}), 0)
.add(TweenMax.to(".cls3", 0.5, {fill:"#ffffff", ease:Linear.easeNone}), 0)
.add(TweenMax.to(".cls4", 0.5, {fill:"#ffffff", ease:Linear.easeNone}), 0)
.add(TweenMax.to(".cls5", 0.5, {fill:"#ffffff", ease:Linear.easeNone}), 0)
.add(TweenMax.to(".cls2", 0.5, {fill:"#ffffff", autoAlpha: 0.4, ease:Linear.easeNone}), 0)
;
// build scene
var scene = new ScrollMagic.Scene({
triggerElement: "body",
triggerHook: 0,
offset: 100,
tweenChanges: true})
.setTween(tween)
.addTo(controller);Básicamente, concéntrese en las clases .cls y cambie el relleno durante medio segundo después de desplazarse 100px desde la parte superior de la pantalla.
(@benbodhi)
Hace 3 años, 5 meses
Para ser honesto, no tengo idea de por qué no funcionaría en el SVG en línea. No veo si difiere del incrustado en la plantilla, excepto en algunas clases.
Puede estar relacionado con su orientación, puede requerir más especificidad, como:
svg.replaced-svg .cls4
Este es ciertamente un caso extraño como lo veo ahora.
(@benbodhi)
Hace 3 años, 5 meses
Buena suerte con esto
Lanzador de hilos
(@nitrokev)
Hace 3 años, 5 meses
No temas, tuve que agregar el código svg a la plantilla ya que el sitio tiene que estar disponible la semana que viene. Tendré tiempo para tocar el violín después
(@benbodhi)
Hace 3 años, 5 meses
No hay problema, me interesa saber qué está pasando. Buena suerte con el lanzamiento, espero que salga bien 🙂
Dejaré este boleto abierto ahora.
(@benbodhi)
Hace 3 años, 3 meses
Estoy a punto de cerrar este hilo por inactividad. Póngase en contacto si necesita más ayuda.
Lanzador de hilos
(@nitrokev)
Hace 3 años, 3 meses
No se preocupe, no pude poner nada a trabajar, siento que scrollmagic se está cargando antes de que su enchufe esté conectado incluso cuando uno está en el pie de página y otro en el encabezado
(@benbodhi)
Hace 3 años, 3 meses
Es muy extraño. ¿Hablaste con los desarrolladores de Magic Scroll?
Lanzador de hilos
(@nitrokev)
Hace 3 años, 2 meses
Hola de nuevo, publiqué sobre esta pregunta en el foro mágico de scroll y obtuve esta respuesta
“Desea asegurarse de que sus SVG de inyección se carguen antes de agregar el controlador. Así que envuelve tu código relacionado con scrollmagic en su lugar y llama a esa función tan pronto como se inyecten los SVG. Como: var mySVGsToInject = document.querySelectorAll (‘img.inject-me’); SVGInjector (mySVGsToInject, injectorOptions, function (totalSVGsInjected) {STARTanimation ();}); Recibí ayuda sobre un problema similar en 2015 y hay un código:
https://greensock.com/forums/topic/11909-iconic-svginjector-preventing-gsap-animations/ ”;
No ayuda en absoluto porque creo que tienes que usar SVGInjector.js, pero me pregunto si había una forma de hacer referencia a una intranet en javascript, entonces esto podría modificarse para permanecer con tu inliner de carga, ¿qué piensas?
Lanzador de hilos
(@nitrokev)
Hace 3 años, 2 meses
También vi esta publicación sobre su apoyo https://wordpress.org/support/topic/call-inline-function-via-js/
Supongo que si esto se implementa, ¿ayudaría también a mi pregunta?
(@benbodhi)
Hace 3 años, 2 meses
Esto podría ayudar, no puedo estar seguro exactamente.
Sin embargo, mi plugin agrega clases únicas a los archivos SVG reemplazados, por lo que puede concentrarse en ellos para alentar scrollbagic más adelante …
¿Solucionó tu problema??
0 / 0