web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
背景
简单实用的jQuery全屏背景视觉差特效
分类:
背景
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
使用该滑动开关按钮插件需要引入jQuery和jquery.parallax.min.js文件。 ```html ``` ##### HTML结构 该视觉差特效的HTML结构使用一个无序列表来作为背景图层,每一个列表项是一张图片,它们通过设置不同的data-depth属性来设置各种的运动速度。另外内容层放置在一个div.wrapper中,里面可以放置图片或文字。 ```html
``` ##### CSS样式 在使用时需要添加下面的必要的CSS样式,其中背景图层的图片可以根据实际情况进行更改。 ```html body { margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; backface-visibility: hidden; } #overlay { background-color: #000; position: fixed; width: 100%; height: 100%; z-index: 99; opacity: 0.08; } #scene { padding: 0; margin: 0; width: 115%; height: 120vh; overflow: hidden; top: -5%; left: -5%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); } main { width: 100%; height: 100vh; overflow: hidden; } .wrapper { position: absolute; top: 50%; left: 50%; z-index: 101; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); text-align: center; } .wrapper img { width: 350px; height: auto; } .layer { width: 110%; height: 120vh; overflow: hidden; } .layer2 { background-image: url(fx5wd1.png); background-size: cover; background-position: center; position: absolute; width: 100%; height: 100%; left: -5%; top: -5%; } .layer1 { background-image: url(sp94ls.jpg); background-position: center; background-size: cover; position: absolute; width: 100%; height: 100%; left: -5%; top: -5%; } @media (max-width:700px) { .layer2 { background-size: cover; background-position: center; position: absolute; width: 167%; height: 77vh; left: -69%; top: 27%; } .layer1 { background-position: center; background-size: cover; position: absolute; width: 100%; height: 115%; left: -5%; top: -1%; } .wrapper img { width: 180px; height: auto; } } ``` ##### 初始化插件 该视觉差特效依赖于jquery.parallax.js插件,关于该插件的详细介绍可以参考这里。 ```html $(document).ready(function () { $('#scene').parallax(); }); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告