jquery文本动画淡入效果插件reveal-it.js

原创
2015/03/16 13:09
阅读数 14

dreamweaver免费视频教程:

51RGB Dreamweaver板块

加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费视频 绝对干货!

 

jquery文本动画淡入效果插件reveal-it.js

 

51RGB小编Q群162542073整理了一个堆叠切换图片效果插件分享出来大家参考使用。

1立即在页面加载

<div class="container">

    <div class="row">

        <div class="col-xs-12">

            <p>Box 1: Reveal Immediately</p>

            <div class="box1">

                <h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>

            </div>

        </div>

    </div>

</div>

 

jQuery(function () {

    //Box 1: reveal immediately - on page load

    //NOTE: id does refer to an element id, It is used to

    //      uniquely refer to the element to be revealed.

    var options1 = {

        id: 'box1'

    };

    $('.box1').initReveal(options1);

});

2,指定的延迟后:设置背景颜色。

<div class="container" style="background-color: #555;">

    <div class="row">

        <div class="col-xs-12">

            <p>Box 2: Reveals after 3000ms delay</p>

            <div class="box2">

                <h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>

            </div>

        </div>

    </div>

</div>

var options2 = {

    id: 'box2'

    , delay: 3000

    , background: '#555'

};

$('.box2').initReveal(options2);

3:点击事件——如。Onclick

<div class="container">

    <div class="row">

        <div class="col-xs-12">

            <p>Box 3: Reveal on click event</p>

            <div>

                <div class="box3">

                    <h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>

                </div>

            </div>

  

            <button class="btn btn-primary btn-reveal">Reveal!</button>

        </div>

    </div>

</div>

var options3 = {

    id: 'box3'

    , auto: false

};

var box3 = $('.box3');

box3.initReveal(options3);

  

$('.btn-reveal').on('click', function () {

    box3.performReveal(options3);

});

4:当元素卷轴到视窗

<div class="container">

    <div class="row">

        <div class="col-xs-12">

            <p>Box 4: Reveal when element scrolls into the viewport</p>

            <div>

                <div class="box4">

                    <h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>

                </div>

            </div>

        </div>

    </div>

</div>

var options4 = {

    id: 'box4'

    , auto: false

    , trigger: 'on-visible'

};

$('.box4').initReveal(options4);

代码下载地址:

51RGB

 

光看文字怎么够 来看在线视频 手把手教你做网站!

Adobe官方讲师万晨曦指导 轻松幽默学习网站开发

Dreamweaver视频直达网址 51RGB Dreamweaver板块


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部