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

李洋博客 2020-05-18 7.56 K阅读 2评论

温馨提示:这篇文章已超过1410天没有更新,请注意相关的内容是否还可用!

之前一直注重模块的视觉滚动特效以至于忽略了图片背景的视觉差滚动特效,今天把小清新主题更新了图片背景视觉差特效,记录下代码,有喜欢的自己参考教程自己动手操作下。这是在网络上找到的一款超级轻量级的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属性就行了,大功告成,闪人。。。

文章版权声明:除非注明,否则均为老李笔记原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 2 条评论,7561人围观)
网友昵称:Edipse
Edipse V 铁粉 UC Browser 6.2.4098.3 Windows 7 x64 沙发
2020-05-18 来自上海 回复
消灭零回复。。[Watermelon]
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 10 x64
2020-05-19 来自天津 回复
@Edipse 感谢!
取消
微信二维码
微信二维码
支付宝二维码