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


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 全角转半角部分
Oct 28 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
一文搞懂redux在react中的初步用法
Jun 09 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编程注意事项的小结
2013/04/27 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
php生成短域名函数
2015/03/23 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
javascript forEach通用循环遍历方法
2010/10/11 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python学生管理系统
2019/01/30 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
django使用xadmin的全局配置详解
2019/11/15 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
总经理助理岗位职责
2013/11/08 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
八一建军节慰问信
2015/02/14 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
python缺失值的解决方法总结
2021/06/09 Python
使用Redis做预定库存缓存功能
2022/04/02 Redis
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS