1

Estoy intentando incluir el Parallax de Materialize, pero la imagen simplemente no aparece, pero sí se genera el espacio en donde debería estar.

He leído en un montón de sitios, incluso en stackoverflow en ingles donde hago lo que dicen y pero el problema persiste, incluso vi vídeos en youtube donde hago exactamente lo mismo que ellos, pero nada.

<div class="parallax-container" >
    <div class="parallax" ><img src="{{ asset('img/parallax-1.jpg') }}"></div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.parallax');
            var instances = M.Parallax.init(elems);
        });
    </script>    
0

1 respuesta 1

1

Hola hice pruebas con materializecss en mi pc y funciona perfecto. La clase parallax oculta la imagen via css y se muestra despues de inicializar el componente. podrias probar sacando class="parallax" para ver si se carga bien la imagen.

Pueden estar pasando 4 cosas:

  1. Que el querySelectorAll no haga match con la clase (que no veo que sea el caso).
  2. Que la url de la imagen no sea valida.
  3. Que no hayas incluido la libreria css de materializecss.
  4. Que la imagen la estes cargando desde JS entonces la imagen se carga luego de ejecutar la instancia. Lo cual deberia asociar un evento load a la imagen para ejecutar el codigo materializecss una vez cargue la imagen. quizas puedas probar con un setTimeout para verificar

        document.addEventListener('DOMContentLoaded', function() {
         var elems = document.querySelectorAll('.parallax');
           var instances = M.Parallax.init(elems);
          
        });
  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="parallax-container">
              <div class="parallax"><img src="https://materializecss.com/images/parallax1.jpg"></div>
            </div>
            <div class="section white">
              <div class="row container">
                <h2 class="header">Parallax</h2>
                <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
              </div>
            </div>
            <div class="parallax-container">
              <div class="parallax"><img src="https://materializecss.com/images/parallax2.jpg"></div>
            </div>

2
  • El link de la imagen es correcto, efectivamente si quito "parallax" se muestra la imagen. Quizás por estar usando Laravel, se genera algún error que no me visualiza la imagen con parallax. Commented el 7 ago. 2020 a las 2:44
  • 1
    agrega el tag que estas usando laravel. intenta agregar class .parallax{ position:static; } o agrega el style position:static!important. Tambien intenta cambiar el z-index. Son 2 posibles errores que encontre asociado a laverel con parallax.
    – toto
    Commented el 7 ago. 2020 a las 11:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.