11521 sujets

JavaScript, DOM et API Web HTML5

Mon code avec Materialize

Bonjour je comprends pas pourquoi le code de la doc materialize n'affiche pas mon parallax ?
J'ai fais comme dans la doc ici : https://materializecss.com/parallax.html

Voilà le code : 


<!DOCTYPE html>
<html>
<head>

  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">


  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>

  <div class="parallax-container">
    <div class="parallax"><img src="images/test.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>

  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  <!--JavaScript at end of body for optimized loading-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

  <script>
    $(document).ready(function(){
      $('.parallax').parallax();
    });
  </script>

</body>
</html>


Merci d'avance Smiley sweatdrop
Merci
Dans la console j'ai notamment :

"Ce site semble utiliser un effet de positionnement lié au défilement. Cet effet pourrait ne pas fonctionner correctement avec le défilement asynchrone. Consultez https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects pour obtenir davantage de détails ou discuter des outils et des fonctionnalités liés."

Je me demande si c'est pas la version du navigateur ? Une idée ?

Sinon ca fonctionne très bien avec une image hébergé ailleurs comme sur ton exemple que j'ai copié !

Et je me demande aussi si il faut mettre l'initialisation car par exemple pour https://materializecss.com/collapsible.html ca fonctionne sans l'initialisation Smiley sweatdrop
woubi a écrit :


"Ce site semble utiliser un effet de positionnement lié au défilement. Cet effet pourrait ne pas fonctionner correctement avec le défilement asynchrone. Consultez https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects pour obtenir davantage de détails ou discuter des outils et des fonctionnalités liés."

Je me demande si c'est pas la version du navigateur ? Une idée ?


Et avec les autres navigateur ? est-il testable en ligne ton site ?

Je te renvoi ici : https://forum.alsacreations.com/topic-5-79598-1-Un-article-sur-le-parallax-nest-plus-dactualiteY.html
Modifié par JENCAL (17 May 2018 - 14:38)
Meilleure solution
Merci encore Smiley smile
Je n'ai que deux navigateurs et le résultat est le même sur Firefox et Chrome... Je suis sur Ubuntu mais j'imagine ca n'a rien à voir. Bon je peux pas tester avec IE.
Par contre en ajoutant : style="opacity:1" directement dans le html de l'image comme dans le code ci-dessous alors ca fonctionne !
J'ai remarqué le style opacity: 1; dans le code que tu m'as partagé sur codepen... alors j'ai testé !
Mais pourquoi ? je sais pas... Une idée ?

  <div class="parallax-container">
    <div class="parallax"><img style="opacity:1" src="images/test.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 style="opacity:1" src="images/test.jpg"></div>
  </div>
Sujet clos
Aller à