html - Paralax Materialize -
$(document).ready(function() { $('.parallax').parallax(); }); <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=material+icons" rel="stylesheet"> <nav> <div class="nav-wrapper container"> <a href="#" class="brand-logo">vowel</a> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a href="collapsible.html">about us</a></li> <li><a href="">subscribe</a></li> </ul> </div> </nav> <div class="parallax-container"> <div class="parallax"> <img src="images/london.jpg"> </div> </div> <div class="row container"> <h2>title text</h2> <p>lorem ipsum</p> </div> <div class="row container"> <h2>title text</h2> <p>lorem ipsum</p> </div> <div class="parallax-container"> <div class="parallax"><img src="images/nyc.jpg"> </div> </div> <div class="row container"> <h2>title text</h2> <p>lorem ipsum</p> </div> <div class="row container"> <h2>title text</h2> <p>lorem ipsum</p> </div> <div class="parallax-container"> <div class="parallax"><img src="images/nyc.jpg"> </div> </div> <footer class="page-footer"> <div class="container"> <div class="row"> <div class="col l6 s12"> <h5 class="white-text">footer content</h5> <p class="grey-text text-lighten-4">you can use rows , columns here organize footer content.</p> </div> <div class="col l4 offset-l2 s12"> <h5 class="white-text">links</h5><ul> <li><a class="grey-text text-lighten-3" href="#!">link 1</a></li> <li><a class="grey-text text-lighten-3" href="#!">link 2</a></li> <li><a class="grey-text text-lighten-3" href="#!">link 3</a></li> <li><a class="grey-text text-lighten-3" href="#!">link 4</a></li> </ul> </div> </div> </div> <div class="footer-copyright"> <div class="container"> © 2014 copyright text <a class="grey-text text-lighten-4 right" href="#!">more links</a> </div> </div> </footer> <script type="text/javascript" src="js/materialize.min.js"></script> i know question here before couldn't solve problem @ all. don't know why paralax doesn't work. don't have css nor other scripts. thoughts might problem? downloaded jquery , put folder have website files, didn't work. tried different versions, , pasted 1 script below/above other see if can work - didn't.
are sure parallax function calling written below library files linked
<link href="css/materialize.min.css" rel="stylesheet"/> <script src="js/jquery.min.js"></script> <script src="js/materialize.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=material+icons"rel="stylesheet"> <script> $(document).ready(function() { $('.parallax').parallax(); }); </script>
Comments
Post a Comment