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


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 相关文章推荐
JS 有名函数表达式全面解析
Mar 19 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
javascript中递归的两种写法
Jan 17 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 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 正则表达式常用函数
2014/08/17 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
Python pickle模块用法实例
2015/04/14 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
python mysql断开重连的实现方法
2019/07/26 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
质检部岗位职责
2013/11/11 职场文书
业务主管岗位职责范本
2013/12/25 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
家长意见书
2015/06/04 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
Java使用HttpClient实现文件下载
2022/08/14 Java/Android