Bit This
是一家位于西班牙马德里的代理公司。他们用视觉差滚动效果以展示公司的规制度和行为准则。5个简单的原则就将其品牌和客户包括你们紧密相连。
网站地址:http://www.bit-this.com/eng.html
该网站实现效果基础原理:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width: 100%; height: 1200px; margin: 0 auto; overflow: hidden;
}
</style>
</head>
<body>
<div style="background-color: #33CCFF; display: block; ">a</div>
<div style="background-color: aqua; ">a</div>
</body>
</html>
这段代码没有任何复杂的地方,就是2个长的很高的div。
但是添加上图片以后~~
<div style="background-color: #33CCFF; display: block;
background: url('http://www.bit-this.com/files/fondo_bit_this.gif') no-repeat fixed 50% 50% transparent;">a</div>
<div style="background-color: aqua; background: url('http://www.bit-this.com/files/fondo_femina.gif') no-repeat fixed 50% 50% transparent;">a</div>
这里最最重要的一个属性是:background-attachment属性将其设置为fixed。表示把图片保留在背景中的固定位置上。
Bit This页面中的所有的JS都是用来做自动滚动效果的。
jQuery ( function( $ ) {
$.Body = $ ( 'body' );// body对象封装
$.Window = $ ( window );// window对象封装
// 根据浏览器类型获取一个html或body对象,具体作用在下面。
$.Scroll = ( $.browser.mozilla || $.browser.msie ) ? $ ( 'html' ) : $.Body;
/*
* 具有data-controller属性的对象(也就是页面中:<body data-controller="MainBody">
* 与最后一个section <section class="story" id="story-contact"
* data-controller="contact" )进行封装。 在该对象上执行下方定义的自定义方法:Instantiate
*/
// 根据源码剖析,此方法未做任何操作
$ ( '[data-controller]' ).Instantiate ( );
/*
* 该对象供easing插件使用 http://jqueryui.com/demos/effect/easing.html
*/
var _opt = {
duration : 1200,// 时间
easing : "easeInOutExpo"
};
/*
* 当前纵向滚动条距离页面顶部距离 例如:6378
*/
console.log ( $.Scroll.scrollTop ( ) );
/*
* 根据绝对计算当前处于第几个场景 例如:5.815
*/
console.log ( ( $.Scroll.scrollTop ( ) + 600 ) / 1200 );
/*
* 场景数 例如:5
*/
$current = Math.floor ( ( $.Scroll.scrollTop ( ) + 600 ) / 1200 );
console.log ( "场景数:" + $current );
console.log ( "窗口高度:" + $.Window.height ( ) );
var $newY = $current * 1200 - ( $.Window.height ( ) - 1200 ) / 2;
console.log ( "new Y:" + $newY );
//**********这个地方实现了刷新时自动回到当前场景初始状态***********
$.Scroll.animate ( {
scrollTop : $newY
} , _opt );
$first = $ ( "#story-welcome" );
$first.show ( "slow" );
} );
分享到:
相关推荐
预处理,词法分析,语法分析,语义分析,中间代码生成
寄存器bit查看工具,显示寄存器每bit值,寄存器bit查看工具,显示寄存器每bit值,寄存器bit查看工具,显示寄存器每bit值寄存器bit查看工具,显示寄存器每bit值
非常实用的bit 分析工具,可以实现任意32位数据转换成二进制bit,每一位都可以操作
AIS信号(GMSK调制)2比特差分解调及其误码率曲线
Labview实现图片24bit转变为8bit及伪彩显示的源码
The BBC micro:bit is a small computing device for children. One of the languages it understands is the popular Python programming language. The version of Python that runs on the BBC micro:bit is ...
系统级BIT设计及BIT验证技术 系统级BIT设计及BIT验证技术
微信web开发者工具 32bit 64bit 微信web开发者工具 32bit 64bit 微信web开发者工具 32bit 64bit
This repository stores the microbit Educational Foundation's reference design. The purpose of this design is to help people turn the inventions they've made with a micro:bit into a standalone board, ...
This is a verilog code.It's function is 4 bit carry lookahead adder.
BIT3269 integrated circuit provides essential PWM features for white LED driver. It can drive up to 27 LEDs from a 5V supply. BIT3269 built-in 36V power switch with current mode control provides fast ...
本教程使用Makecode 图形化编程48个实验由简入繁一步步带你走进micro:bit世界,包括程序的说明,电路的搭建,以及传感器的使用。代表性实验有: 交通灯\ 流水灯\ 呼吸灯/RGB灯\有源蜂鸣器\无源蜂鸣器\1位数码管显示\...
设计者使用包括相关密钥不可能差分在内的多种攻击方法对算法进行了安全分析,认为对于Piccolo的相关密钥不可能差分攻击分析只能实现11轮(80 bit)和17轮(128 bit),但并未给出具体分析过程和实例。使用U-method...
7bit 短信编码简单介绍,DU模式收发短信可以使用3种编码:7-bit、8-bit和UCS2编码 通常短信内容为英文的时候使用:7-bit,8-bit编码方式 而短信内容为中文的时候则需要使用UCS2编码方式(UNICODE);7-bit、8-bit和UCS2...
microbit BBC v2固件(hex)
Midori算法是由Banik等人在AISACRYPT2015上提出的一...为了验证Midori算法的安全性,使用了相关密钥不可能差分分析Midori算法,构造了一个Midori算法的9轮区分器,进行了Midori算法的14轮攻击,总共猜测了84 bit密钥。
saleae逻辑分析仪应用软件Logic Setup 1.1.16 32bit&64bit;
BIT1628B 與 BIT1630M 雷同. 兩者用相同8052 均有 1KB XRAM. 相同包裝均為 LQFP-64 (7x7). BIT1628B 支持一路CVBS 輸入, 而 BIT1630M 支持二路CVBS 輸入. BIT1628B 不支持手機屏, 但 BIT1630M 支持手機屏. BIT1628B ...