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

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

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

教程代码如下：

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

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

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

JS代码：

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

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属性就行了，大功告成，闪人。。。