个人博客网站背景视觉滚动特效代码
2023-06-13 09:15:28 时间
之前一直注重模块的视觉滚动特效以至于忽略了图片背景的视觉差滚动特效,今天把小清新主题更新了图片背景视觉差特效,记录下代码,有喜欢的自己参考教程自己动手操作下。这是在网络上找到的一款超级轻量级的jQuery视觉滚动特效代码,该插件使用CSS background-position属性和简单的js代码来完成页内滚动时的背景图片视觉差效果,效果演示可以前往 小清新主题 查看!
教程代码如下:
首先我们需要在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属性就行了,大功告成,闪人。。。
相关文章
- 个人博客网站怎么适配手机端夜间模式或深色模式
- 使用umami搭建免费的个人博客数据统计系统
- 炎炎夏日,为自己的博客安装一台云空调吧!
- 给WordPress博客添加返回顶部和底部的教程
- 腾讯云服务器镜像市场快速搭建WordPress博客网站教程
- Z-Blog博客QQ 微信 支付宝 微博登录插件
- 从零开始的Hexo博客搭建
- Python分布式爬虫框架Scrapy 打造搜索引擎(四) - 爬取博客网站
- php个人博客系统项目网站
- [koreader]statistics插件之博客阅读统计模块
- 基于servlet的个人博客系统
- 我的博客网站备案实践
- WordPress 技巧:使用 Gravatar 作为博客的 Favicon
- 用微软Microsoft Azure云计算平台应用程序服务5分钟快速搭建博客网站
- 提升网站性能,发挥Redis插件的作用TY博客自豪之处(ty博客的redis插件)
- 优化博客网站性能使用本地Redis缓存(博客redis本地缓存)