个人博客网站背景视觉滚动特效代码

之前一直注重模块的视觉滚动特效以至于忽略了图片背景的视觉差滚动特效，今天把小清新主题更新了图片背景视觉差特效，记录下代码，有喜欢的自己参考教程自己动手操作下。这是在网络上找到的一款超级轻量级的jQuery视觉滚动特效代码，该插件使用CSS background-position属性和简单的js代码来完成页内滚动时的背景图片视觉差效果，效果演示可以前往 小清新主题 查看！

教程代码如下：

首先我们需要在html中添加视觉差特效的class类和data-paralasic属性，例如：

 Markup

<div class="paralasic" data-paralasic="0.5">......代码</div>

其中“paralasic”就是类名称，然后设置“data-paralasic”属性，如果图片高度很高的话，可以设置0.5+甚至更多，如果图片小于500px建议设置小一些，例如 0.25 等，根据实际情况修改。

JS代码：

复制如下代码，放在js中即可或者直接放在网页的底部（记得添加<script>代码</script>），

 JavaScript

jQuery(window).bind('scroll', function () {
	$(window).scroll(function() {
		var scrollTop = $(window).scrollTop();
		var paralasicValue = $('.paralasic').attr('data-paralasic');
		$('.paralasic').css('background-position', '50% -' + scrollTop * paralasicValue + 'px');
	});});

其中“.paralasic”就是类的名称，然后修改对应的css即可，保存代码，刷新前台查看效果！

是不是非常简单，其实就是简单的两步，复制js代码修改class类的名称，然后在div框架添加data-paralasic属性就行了，大功告成，闪人。。。

本站提供的一切软件、教程和内容信息都来自网络收集整理与用户投稿，仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，版权争议与本站无关。用户必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！