web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
滚动
jQuery固定背景视觉滚动特效插件
分类：
滚动
日期：
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
在页面中引入jquery和paraLasic.1.1.js文件。 ```html <script src="js/jquery.min.js"></script> <script src="js/paraLasic.1.1.js""></script> ``` ##### HTML结构 使用一个div元素来作为背景图片的容器。为容器添加paralasic class类，并设置data-paralasic属性。 ```html <div class="paralasic" data-paralasic="0.5"></div> ``` ##### CSS样式 为div元素设置CSS属性如下： ```html .paralasic { background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(../images/demo.jpg); background-attachment: fixed; background-size: cover; background-size: 100vw; background-position: center top; background-repeat: no-repeat; background-color: #000000; } ``` ##### Javascript 实现固定背景视觉滚动特效的js代码非常简单，它只是简单的修改background-position属性值，来实现视觉差滚动效果。 ```html var paralasicValue = $('.paralasic').attr('data-paralasic'); $('.paralasic').css('background-position', 'center top -' + scrollTop * paralasicValue + 'px'); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
