Question

想要有视差效果我正在使用plugin.currently我使用enllax.js作为插件的视差效果但没有得到任何视差效果。任何人都告诉我代码中有什么问题。提前谢谢。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My page</title> 
<title>jQuery Parallax Plugin Demo</title>
 <link rel="stylesheet" href="s.css" type="text/css">
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-2.1.4.js"></script>
   <script type="text/javascript" src="scripts/jquery.enllax.js"></script>
    <script type="text/javascript">
  (function($){

            //Plugin activation
            $(window).enllax();

        $('#a').enllax();

         $('#first').enllax({
              type: 'background', // 'foreground'
               ratio: 0.5,
               direction: 'vertical' // 'horizontal'
           });
      $('#second').enllax({
              type: 'background', // 'foreground'
               ratio: 1.0,
               direction: 'vertical' // 'horizontal'
           });
      $('#third').enllax({
              type: 'background', // 'foreground'
               ratio: 1.5,
               direction: 'vertical' // 'horizontal'
           });
      $('#fourth').enllax({
              type: 'background', // 'foreground'
               ratio: 2.0,
               direction: 'vertical' // 'horizontal'
           });

        })(jQuery);
    </script>

</head>

    <body>
 <div id="a">

    <div id="first" class="dem1" data-enllax-ratio=".5" data-enllax-direction="horizontal" style="z-index:99">


       This is my first div to display image.

        <img src="images/r1.jpg" data-enllax-ratio=".5" data-enllax-type="foreground"/>








   </div>


    <div id="second" class="dem1" data-enllax-ratio="1.0" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">


       This is my second div to display image.


   <img src="images/r2.jpg" data-enllax-ratio="1.0" data-enllax-type="foreground"/>






   </div>


   <div id="third" class="dem1" data-enllax-ratio="1.5" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">


       This is my third div to display image.





   <img src="images/rc.jpg" data-enllax-ratio="1.5" data-enllax-type="foreground"/>



   </div>


   <div id="fourth" class="dem1" data-enllax-ratio="2.0" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">
      <img src="images/rr.jpg" data-enllax-ratio="2.0" data-enllax-type="foreground"/>



       This is my fourth div to display image.



   </div>

        </div>

 </body>
</html>

 body {
            font-family: 'Open Sans', sans-serif;
            color: #444;
            line-height: 1.4;
            overflow-x: hidden;
           /* background: url(http://subtlepatterns.com/patterns/geometry2.png);*/
        }
        .text-center {
            text-align: center;
        }

        }
        .dem1 {
            height: 400px;
            background-size: cover;
            box-sizing: border-box;
            padding: 100px;
        }
        }.box {
            width: 90%;
            margin: 0 auto;
            background: #efefef;
            padding: 100px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            box-shadow: 0 0 1px #777;
            margin-bottom: 15px;
        }.b2 {
            background: #dedede;
        }.dl {
            margin-top: 200px;
            padding: 100px;
        }
        .fork-mmk {
            position: fixed;
            top: 0px;
            right: 0px;
            z-index: 99999;
        }

Answer 1

如果您使用简单激活，则不需要任何其他操作。所以，我建议你只使用：

<script type="text/javascript">
(function($){
  $(window).enllax();
});
</script>

通过data-attribute配置你的enllax元素。你可以看到他的Github项目https://github.com/mmkjony/enllax.js

使用enllax作为视差效果的插件

1 个答案: