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


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 相关文章推荐
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
vue浏览器返回监听的具体步骤
Feb 03 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操作SVN版本服务器类代码
2011/11/27 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
JavaScript 事件参考手册
2008/12/24 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
js实现缓动动画
2020/11/25 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
Python函数中定义参数的四种方式
2014/11/30 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
中英双版中文教师求职信
2013/10/27 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
关爱残疾人标语
2014/06/25 职场文书