• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

163
Vistas
¿Por qué mi mix-blend-mode no puede cargar la interactividad deseada?

He estado tratando de emular (en Webflow) este ingenioso 'desplazamiento de texto fluido' del siguiente codepen: https://codepen.io/robin-dela/pen/KKPYoBq

Como puede ver, si sigue el enlace, hay una buena cantidad de HTML, CSS (SCSS) y JS (Babel), pero creo que el fragmento de código pertinente es el siguiente CSS:

 <style> body { position: fixed; height: 100%; overflow: hidden; } canvas { position: absolute; width: 100%; height: 100vh; top: 0; left: 0; } .mask { position: absolute; z-index: 2; background: white; height: 100vh; width: 100vw; mix-blend-mode: screen; /* THE mix-blend-mode ABOVE DISPLAYS IN RED */ } svg { width: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>

Cuando publico mi sitio, aparece el texto 'CREATIVO', pero sin el elemento fluido interactivo. Estoy casi seguro de que tiene algo que ver con el modo de mezcla, ya que ese es el único código que aparece en rojo. He visto preguntas similares formuladas aquí y probé todos los métodos ofrecidos (cambiar el fondo del cuerpo a blanco, en lugar de transparente; agregar el código como un bloque de código en lugar de la etiqueta del encabezado interior, pero aún no se ha hecho nada). funciona Realmente agradecería cualquier ayuda.

Mi página de solo lectura de Webflow se puede encontrar aquí: https://preview.webflow.com/preview/hen-ry?utm_medium=preview_link&utm_source=designer&utm_content=hen-ry&preview=f7f278a8af346d820c843647397c8d76&pageId=6238983c269c21e6d0507afe&workflow=preview

almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda