阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.smoove 中文API文档

      插件 jQuery.smoove 中文API文档 https://github.com/abeMedia/jquery-smoove

      jQuery Smoove - Gorgeous CSS3 Scroll Effects

      Smoove makes it easy to implement awesome CSS3 transition effects, making your content smoothly glide into view as you scroll down the page.

      CDNJSBuild StatusDependency Status

      Setup

      Load from CDN

      The easiest way to get up and running is to load jQuery Smoove from cdnjs. Make sure jQuery is loaded first though.

      <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.10/jquery.smoove.min.js"></script>
      

      Install with Bower

      Use the following command to install jQuery Smoove using bower.

      $ bower install jquery-smoove
      

      Or simply add jquery-smoove to your project’s bower.json.

        "dependencies": {
          "jquery-smoove": "latest"
        }
      

      Download

      You can also just download the latest package.

      Usage

      jQuery Smoove needs to be activated via JavaScript.

      $('.foo').smoove(options);
      

      This will initiate jQuery Smoove on the .foo elements with the default settings. Options can however be overridden on individual objects via data-attributes as outlined in the following example.

      <div class="foo"></div>
      <div class="bar" data-move-x="-200px" data></div>
      
      <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.10/jquery.smoove.min.js"></script>
      <script>
        // Attach Smoove to elements and set default options
        $(".foo, .bar").smoove({
          offset  : '15%',
          // moveX is overridden to -200px for ".bar" object
          moveX   : '100px',
          moveY   : '100px',
        });
      </script>
      

      Also note that when defining parameters via data-attributes, CamelCase names are split with hyphens e.g. moveX becomes data-move-x.

      Options

      NameTypeDefaultDescription
      min_widthinteger768Disable smoove on screens with less pixel width.
      min_heightintegernoneDisable smoove on screens with less pixel height.
      offsetinteger or string150Distance to the bottom of the screen before object glides into view e.g. 10%.
      opacityinteger (0-100)0The opacity of the object before it comes into view.
      perspectiveinteger10003D perspective in pixels.
      transformOriginstring50% 50%Origin of the transform in pixel, percentage or keyword (left, right, top or bottom).
      skewYanglenone2D skew along Y-axis e.g. 90deg.
      movestringnone2D move along the X- and the Y-axis e.g. 100px,50%.
      move3dstringnone3D move along the X-, Y- and the Z-axis e.g. 10px,10px,10px.
      moveXstringnoneMove the object along its X axis e.g. 10px or 10%.
      moveYstringnoneMove the object along its Y axis e.g. 10px or 10%.
      moveZstringnoneMove the object along its Z axis e.g. 10px or 10%.
      rotatestringnone2D rotation e.g. 90deg.
      rotate3dstringnone3D rotation along X-, Y- and Z-axis e.g. 1,1,1,90deg.
      rotateXstringnone3D rotation along X-axis e.g. 90deg.
      rotateYstringnone3D rotation along Y-axis e.g. 90deg.
      rotateZstringnone3D rotation along Z-axis e.g. 90deg.
      scaledecimal or stringnone2D scale on X- and Y-axis (x,y) (e.g. 2.5 or 2,0.5).
      scale3dstringnone3D scale on X-, Y- and Z-axis (x,y,z) (e.g. 2,3,0.5).
      scaleXdecimalnone2D scale on X-axis.
      scaleYdecimalnone2D scale on Y-axis.
      skewanglenone2D skew along X- and the Y-axis (e.g. 90deg,90deg).
      skewXanglenone2D skew along X-axis e.g. 90deg.
      skewYanglenone2D skew along Y-axis e.g. 90deg.

      Demo

      Visit ABE Media Web Design and scroll down the page to see the plugin in action.

      © 2014 - 2017 Adam Bouqdib - http://abemedia.co.uk

      目录
      目录