固定背景实现的背景滚动特效示例分享


Posted in Javascript onMay 19, 2013

固定背景实现的背景滚动特效示例分享
分享一个来自corpse的固定背景滚动特效,使用background-attachment: fixed和导航菜单,页面会非常平滑的滚动。
HTML

<div id="cbp-fbscroller" class="cbp-fbscroller"> 
<nav> 
<a href="#fbsection1" class="cbp-fbcurrent">Section 1</a> 
<a href="#fbsection2">Section 2</a> 
<a href="#fbsection3">Section 3</a> 
<a href="#fbsection4">Section 4</a> 
<a href="#fbsection5">Section 5</a> 
</nav> 
<section id="fbsection1"></section> 
<section id="fbsection2"></section> 
<section id="fbsection3"></section> 
<section id="fbsection4"></section> 
<section id="fbsection5"></section> 
</div>

CSS
/* Set all parents to full height */ 
html, body, 
.container, 
.cbp-fbscroller, 
.cbp-fbscroller section { 
height: 100%; 
} 
/* The nav is fixed on the right side and we center it by translating it 50% 
(we don't know it's height so we can't use the negative margin trick) */ 
.cbp-fbscroller > nav { 
position: fixed; 
z-index: 9999; 
right: 100px; 
top: 50%; 
-webkit-transform: translateY(-50%); 
-moz-transform: translateY(-50%); 
-ms-transform: translateY(-50%); 
transform: translateY(-50%); 
} 
.cbp-fbscroller > nav a { 
display: block; 
position: relative; 
color: transparent; 
height: 50px; 
} 
.cbp-fbscroller > nav a:after { 
content: ''; 
position: absolute; 
width: 24px; 
height: 24px; 
border-radius: 50%; 
border: 4px solid #fff; 
} 
.cbp-fbscroller > nav a:hover:after { 
background: rgba(255,255,255,0.6); 
} 
.cbp-fbscroller > nav a.cbp-fbcurrent:after { 
background: #fff; 
} 
/* background-attachment does the trick */ 
.cbp-fbscroller section { 
position: relative; 
background-position: top center; 
background-repeat: no-repeat; 
background-size: cover; 
background-attachment: fixed; 
} 
#fbsection1 { 
background-image: url(../images/1.jpg); 
} 
#fbsection2 { 
background-image: url(../images/2.jpg); 
} 
#fbsection3 { 
background-image: url(../images/3.jpg); 
} 
#fbsection4 { 
background-image: url(../images/4.jpg); 
} 
#fbsection5 { 
background-image: url(../images/5.jpg); 
}

Javascript
/** 
* cbpFixedScrollLayout.js v1.0.0 
* http://www.codrops.com 
* 
* Licensed under the MIT license. 
* http://www.opensource.org/licenses/mit-license.php 
* 
* Copyright 2013, Codrops 
* http://www.codrops.com 
*/ 
var cbpFixedScrollLayout = (function() { 
// cache and initialize some values 
var config = { 
// the cbp-fbscroller′s sections 
$sections : $( '#cbp-fbscroller > section' ), 
// the navigation links 
$navlinks : $( '#cbp-fbscroller > nav:first > a' ), 
// index of current link / section 
currentLink : 0, 
// the body element 
$body : $( 'html, body' ), 
// the body animation speed 
animspeed : 650, 
// the body animation easing (jquery easing) 
animeasing : 'easeInOutExpo' 
}; 
function init() { 
// click on a navigation link: the body is scrolled to the position of the respective section 
config.$navlinks.on( 'click', function() { 
scrollAnim( config.$sections.eq( $( this ).index() ).offset().top ); 
return false; 
} ); 
// 2 waypoints defined: 
// First one when we scroll down: the current navigation link gets updated. 
// A `new section′ is reached when it occupies more than 70% of the viewport 
// Second one when we scroll up: the current navigation link gets updated. 
// A `new section′ is reached when it occupies more than 70% of the viewport 
config.$sections.waypoint( function( direction ) { 
if( direction === 'down' ) { changeNav( $( this ) ); } 
}, { offset: '30%' } ).waypoint( function( direction ) { 
if( direction === 'up' ) { changeNav( $( this ) ); } 
}, { offset: '-30%' } ); 
// on window resize: the body is scrolled to the position of the current section 
$( window ).on( 'debouncedresize', function() { 
scrollAnim( config.$sections.eq( config.currentLink ).offset().top ); 
} ); 
} 
// update the current navigation link 
function changeNav( $section ) { 
config.$navlinks.eq( config.currentLink ).removeClass( 'cbp-fbcurrent' ); 
config.currentLink = $section.index( 'section' ); 
config.$navlinks.eq( config.currentLink ).addClass( 'cbp-fbcurrent' ); 
} 
// function to scroll / animate the body 
function scrollAnim( top ) { 
config.$body.stop().animate( { scrollTop : top }, config.animspeed, config.animeasing ); 
} 
return { init : init }; 
})();
Javascript 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
详解JavaScript常量定义
Jan 03 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 #Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 #Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 #Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 #Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 #Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 #Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 #Javascript
You might like
PHP多个版本的分析解释
2011/07/21 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
python进程与线程小结实例分析
2018/11/11 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
go和python调用其它程序并得到程序输出
2014/02/10 Python
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python的类变量和成员变量用法实例教程
2014/08/25 Python
python写xml文件的操作实例
2014/10/05 Python
python去掉行尾的换行符方法
2017/01/04 Python
Python 专题一 函数的基础知识
2017/03/16 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
python实现低通滤波器代码
2020/02/26 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
影视制作岗位职责
2013/12/04 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
MongoDB数据库之添删改查
2022/04/26 MongoDB