插件 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.

CDNJS Build Status Dependency 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

Name Type Default Description
min_width integer 768 Disable smoove on screens with less pixel width.
min_height integer none Disable smoove on screens with less pixel height.
offset integer or string 150 Distance to the bottom of the screen before object glides into view e.g. 10%.
opacity integer (0-100) 0 The opacity of the object before it comes into view.
perspective integer 1000 3D perspective in pixels.
transformOrigin string 50% 50% Origin of the transform in pixel, percentage or keyword (left, right, top or bottom).
skewY angle none 2D skew along Y-axis e.g. 90deg.
move string none 2D move along the X- and the Y-axis e.g. 100px,50%.
move3d string none 3D move along the X-, Y- and the Z-axis e.g. 10px,10px,10px.
moveX string none Move the object along its X axis e.g. 10px or 10%.
moveY string none Move the object along its Y axis e.g. 10px or 10%.
moveZ string none Move the object along its Z axis e.g. 10px or 10%.
rotate string none 2D rotation e.g. 90deg.
rotate3d string none 3D rotation along X-, Y- and Z-axis e.g. 1,1,1,90deg.
rotateX string none 3D rotation along X-axis e.g. 90deg.
rotateY string none 3D rotation along Y-axis e.g. 90deg.
rotateZ string none 3D rotation along Z-axis e.g. 90deg.
scale decimal or string none 2D scale on X- and Y-axis (x,y) (e.g. 2.5 or 2,0.5).
scale3d string none 3D scale on X-, Y- and Z-axis (x,y,z) (e.g. 2,3,0.5).
scaleX decimal none 2D scale on X-axis.
scaleY decimal none 2D scale on Y-axis.
skew angle none 2D skew along X- and the Y-axis (e.g. 90deg,90deg).
skewX angle none 2D skew along X-axis e.g. 90deg.
skewY angle none 2D 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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了