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


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简单改变表单元素背景的方法
Jul 15 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
Vue中使用vux的配置详解
May 05 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
js new Date()实例测试
Oct 31 Javascript
vue特效之翻牌动画
Apr 20 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分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
jQuery动画animate方法使用介绍
2013/05/06 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
基于vue的换肤功能的示例代码
2017/10/10 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
详解vue路由
2020/08/05 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
python 切换root 执行命令的方法
2019/01/19 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
教师自荐信范文
2013/12/09 职场文书
社区党员先进事迹
2014/01/22 职场文书
产品质量承诺范本
2014/03/31 职场文书
早读课迟到检讨书
2014/09/25 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
全陪导游词
2015/02/04 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
主婚人致辞精选
2015/07/28 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
python神经网络Xception模型
2022/05/06 Python