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

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

教程代码如下：

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

......代码

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

JS代码：

复制如下代码，放在js中即可或者直接放在网页的底部(记得添加)，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属性就行了，大功告成，闪人。。。

html5blog简单特效代码,个人博客网站背景视觉滚动特效代码相关推荐

博客园背景滴墨水特效
设计自己的神奇滴墨水,你只需这几步: 点开博客园后台点开设置找到"页首 HTML 代码"(页尾也可以) 输入代码保存即可 (要先申请js权限哦) 代码如下: <!DOCT ...
csdn设置自己的博客代码和博客的背景颜色
好东西,一起来分享,自己设置博客背景的一些小技巧,拿去感觉好就关注一下: 设置自己的背景颜色 <table><tr><td bgcolor=#000322> 这里是 ...
搭建个人博客网站 -- vue初学者学习总结
搭建个人博客网站 – vue技术学习开源代码:个性化个人博客系统参考项目:风丶宇的个人博客一.项目概述项目主要是基于SpringBoot + Vue 开发的前后端分离博客,本文主要涉及项目前端 ...
jav简单的个人博客网站代码_每个人都可以拥有的个人博客网站
题记 ------去过的地方越多,越知道自己想回到什么地方去! 雨又下了一夜,曾经多少次觉得下雨天是最适合睡觉的天气.而最近的雨,总感觉有些嘈杂,总怕吵醒远方睡梦中的星,晨.以至于翻来覆去睡不着.但是 ...
HTML期末大作业~简单的程序员个人博客网站模板源码(HTML+CSS)~个人主页博客web网页设计制作~HTML简单个人网页制作~Web大学生网页成品...
HTML期末大作业~ 简单的程序员个人博客网站模板源码(HTML+CSS)~学生HTML个人网页作业作品下载 ~个人主页博客网页设计制作 ~大学生个人网站作业模板 ~简单个人网页制作临近期末, 你还 ...
个人博客网站html源码_最新0成本简单使用CODING Pages搭建Gridea个人博客网站详细教程...
直接0成本简单使用CODING Pages免费搭建Gridea个人博客网站,不需要购买域名也不需要购买服务器就可以搭建自己的博客教程开始 gridea官网 gridea.devcoding 官网 e ...
个人博客网页设计_不会代码如何打造个人博客？你需要这个简单、免费的搭建工具...
每当看到其他设计师或者设计工作室的网站的时候,总想着能有一个属于自己的网页,可以做一些关于个人生活的记录.笔记,还可以同步自己的设计.绘画.摄影作品,甚至求职的时候发过去自己的网页,还有什么比这个更赞 ...
Golang--Go语言五百行后台代码实现一简约的个人博客网站-TinyBlog
博客演示地址:http://121.36.253.86/,http://yangqq.xyz/,统计了下后台代码只有415行. 已被OsChina开源社区收录,地址在https://www.oschi ...
大学生PHP个人博客网站源码简单个人动态网站设计模板 PHP毕业设计成品学生PHP MYSQL日志管理系统网页
作品介绍 PHP MYSQL个人博客网站作品使用php+mysql开发,系统编码简单,大学生PHP毕业设计水平.系统随处可见增删改查等基本操作,有批量删除之功能,涉及的知识点比较全面. 功能说明数据 ...

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

html5blog简单特效代码,个人博客网站背景视觉滚动特效代码相关推荐

最新文章

热门文章