古卷轴平滑打开动画jQuery特效

PetitQ 图片/图形 2018-11-17 1.73K 0 0

这是一款使用 jquery animate 动画制作的古卷轴平滑打开动画特效。该特效通过将一张完整的卷轴拆分到多个 div 中，然后通过 jquery animate 事件，配合不同的时间延迟，形成完整的卷轴打开动画。

使用方法

在页面中引入 jquery.min.js 文件。

也想出现在这里？联系我们吧

<script type="text/javascript" src="path/to/jquery.min.js"></script>

HTML 结构

该古卷轴平滑打开动画特效的基本 HMTL 结构如下：

```
<div class="content">
```
```
    <div class="l-pic-index"></div>
```
```
    <div class="r-pic-index"></div>
```
```
    <div class="l-bg-index"></div>
```
```
    <div class="r-bg-index"></div>
```
```
    <div class="main-index">
```
```
        <p class="intro-text">
```
```
            描述文本...
```
```
        </p>
```
```
    </div>
```
```
</div>
```

CSS 样式

为特效添加下面的 CSS 样式：

```
.content{
```
```
    position: relative;
```
```
    width: 900px;
```
```
    height: 460px;
```
```
    margin: 40px auto;
```
```
}
```
```
.l-pic-index{
```
```
    position: absolute;
```
```
    left: 400px;
```
```
    top: 1px;
```
```
    z-index:2;
```
```
    width:50px;
```
```
    height:460px;
```

    background: url("../images/j1.png") no-repeat right 0;

```
}
```
```
.r-pic-index{
```
```
    position: absolute;
```
```
    right: 400px;
```
```
    top: 0;
```
```
    z-index: 2;
```
```
    width:50px;
```
```
    *width:82px;
```
```
    height:460px;
```

    background: url("../images/j4.png") no-repeat left 0;

```
}
```
```
.l-bg-index{
```
```
    position: absolute;
```
```
    top: -3px;
```
```
    left: 430px;
```
```
    z-index: 1;
```
```
    width: 25px;
```
```
    height: 459px;
```

    background: url("../images/j2.png") right 0 no-repeat;

```
}
```
```
.r-bg-index{
```
```
    position: absolute;
```
```
    top:-4px;
```
```
    right: 430px;
```
```
    z-index: 1;
```
```
    width: 25px;
```
```
    height: 459px;
```

    background: url("../images/j3.png") 0 0 no-repeat;

```
}
```
```
.main-index{
```
```
    display: none;
```
```
    overflow: hidden;
```
```
    zoom:1;
```
```
    position: absolute;
```
```
    z-index: 5;
```
```
    width:530px;
```
```
    height:280px;
```
```
    left:145px;
```
```
    top:90px;
```
```
    color: #2e2e2e;
```
```
}
```
```
.intro-text{
```
```
    margin: 10px 0 0 44px;
```
```
    line-height: 1.8;
```
```
    text-indent: 30px;
```
```
}
```

JavaScript

在页面 DOM 元素加载完毕之后，通过 jquery animate 事件来制作卷轴打开动画效果。

```
$(document).ready(function(){
```
```
    //卷轴展开动画效果
```

    $(".l-pic-index").animate({'left':'95px','top':'-4px'},1300);

    $(".r-pic-index").animate({'right':'-23px','top':'-5px'},1450);

    $(".l-bg-index").animate({'width':'433px','left':'73px'},1500);

    $(".r-bg-index").animate({'width':'433px','right':'-38px'},1500,function(){

```
        $(".main-index").fadeIn(800);
```
```
    });
```
```
});
```

古卷轴平滑打开动画 jQuery 特效

已有 433 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

古卷轴平滑打开动画jQuery特效

使用方法

HTML 结构

CSS 样式

JavaScript

古卷轴平滑打开动画 jQuery 特效

相关文章

商品网格布局购物车动画界面设计

Canvas 图片倒影波纹特效代码

超炫CSS3六边形菜单动画特效

发表回复取消回复

热销模板

图片/图形

使用方法

HTML 结构

CSS 样式

JavaScript

古卷轴平滑打开动画 jQuery 特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复