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


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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
5款Javascript颜色选择器
Oct 25 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
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往windows中添加用户
2006/12/06 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
js闭包的用途详解
2014/11/09 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
google广告之另类js调用实现代码
2020/08/22 Javascript
python 列表删除所有指定元素的方法
2018/04/19 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
Python argparse模块使用方法解析
2020/02/20 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
请用用Java代码写一个堆栈
2012/01/26 面试题
广播体操比赛口号
2014/06/10 职场文书
公司门卫岗位职责
2015/04/13 职场文书
面试通知短信
2015/04/20 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android