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


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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
JavaScript 特殊字符
Apr 05 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
js实现经典贪吃蛇小游戏
Mar 19 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/07/04 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
PHP反射基础知识回顾
2020/09/10 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
jQuery事件用法详解
2016/10/06 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
基于vue2.0实现简单轮播图
2017/11/27 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
微信小程序实现购物页面左右联动
2019/02/15 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python解决字符串倒序输出的问题
2018/06/25 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
Python定义一个Actor任务
2020/07/29 Python
python实现简单遗传算法
2020/09/18 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
优秀社区干部事迹材料
2014/02/03 职场文书
给领导的检讨书
2014/02/16 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
小学班主任评语
2014/12/29 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书