xml地图|网站地图|网站标签 [设为首页] [加入收藏]
如何将页脚固定在页面底部,逐帧动画抖动解决
分类:web前端

20个神奇的伪Flash网站

2011/07/09 · CSS, HTML5, JavaScript · CSS, HTML5, Javascript

不要以为下面的这些网站是使用Flash做的,它们实际上是使用老式的HTML和CSS构建,也会有少许的JavaScript,同样也能达到出乎意料的动画效果。

  1. Emilie Crssrd
    该网站做了很多设计,从而看起来像Flash,图片加载动画更像Flash网站常见的效果一样 。

  2. Stefan Kanchev
    图标的淡入和淡出效果和你的鼠标经过的路径形成了完美的互动。

澳门新葡亰手机版 1

  1. Brand Republic
    该网站基于CSS元素动态地改变标准边界,创造一个3D效果,并确保Logo在强烈的背景下脱颖而出。

澳门新葡亰手机版 2

  1. Cooper
    在导航中选择项目,相关内容会滚动到当前窗口中,图片的平稳过渡,感觉非常像Flash,但它确实是使用标准的Web语言来完成 。

澳门新葡亰手机版 3

  1. 澳门新葡亰手机版,Flipboard
    支持页面动态调整,以适应您的浏览器(有些限制),你会发现一个标准的Flash效果。

澳门新葡亰手机版 4

  1. Crafty 2010
    风格和可用性之间达到一个很好的平衡。

澳门新葡亰手机版 5

  1. 20 Things I Learned About Browsers and the Web

澳门新葡亰手机版 6

  1. NL Engenharia

滑出式导航、全屏幕图像、动态调整大小,该网站拥有Flash网站的所有特点。

澳门新葡亰手机版 7

  1. Ryan C. Jones
    该网站有一个美丽的摄影组合,它利用一个简单而有效的方式来展示摄影作品。

澳门新葡亰手机版 8

  1. Studio Gang Architects
    乍一看,创意的界面类似Flash,它显示出老式的HTML也可以做动画效果。

澳门新葡亰手机版 9

  1. DIST Creative
    凭借其动画、装载图标和流动界面,这个网站是基于HTML的非常实用的动画解决方案,拥有好的Flash布局创造力。

澳门新葡亰手机版 10

  1. Messages for Japan
    该动画形式很好地突出了用户的互动。

澳门新葡亰手机版 11

  1. Atlason
    该网站内容充满屏幕,窗口式的布局更易让人喜欢。

澳门新葡亰手机版 12

  1. Bit Byte Bit
    动态的区域。

澳门新葡亰手机版 13

  1. FORM

澳门新葡亰手机版 14

  1. EEHarbor
    该网站的速度是其成功的一大原因,你不会觉得动画内容花哨。

澳门新葡亰手机版 15

  1. Wells Riley
    一个非常特别的拉绳动画效果 。

澳门新葡亰手机版 16

  1. Manchester Design Symposium
    具有超洁净和简单的界面,拥有固定不变的头部,页面下面的部分可以滚动浏览。

澳门新葡亰手机版 17

  1. Sophie Hardach
    有一些有趣的动画,如元素的移动、放大、停留,还有底部的波浪效果。

澳门新葡亰手机版 18

   20. Renato Zero
向下滚动浏览,就会出现一个新的页面。动画是快速的,仿佛感觉不到加载。

澳门新葡亰手机版 19

原文:webdesignerdepot
译文:iteye

 

赞 收藏 评论

澳门新葡亰手机版 20

如何将页脚固定在页面底部

2011/12/20 · CSS · 1 评论 · 来源: w3cplus     · CSS

来源:w3cplus

作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢?

注意了这里所说的是页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部,换句话说,就是当内容只有一点点时,Web页面显示在浏览器底部,当内容高度超过浏览器高度时,Web页面的footer部分在页面的底部,总而言之Web页面的footer部分永远在页面的底部,换句说,Footer部分永远沉底。如下图所示:

澳门新葡亰手机版 21

那么今天主要和大家一起学习如何将页脚固定在页面的底部?

 

方法一:

首先我们来看第一种方法,这种方法是来自于Matthew James Taylor的《How to keep footers at the bottom of the page》。下面我们就一起来看看Matthew James Taylor介绍的方法。

HTML Markup

XHTML

<div id="container"> <div id="header">Header Section</div> <div id="page" class="clearfix"> 页面容容部分 </div> <div id="footer">Footer Section</div> </div>

1
2
3
4
5
6
7
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
页面容容部分
</div>
<div id="footer">Footer Section</div>
</div>

其实我们可以在div#page增加所需的内容结构,如下所示:

JavaScript

<div id="container"> <div id="header">Header Section</div> <div id="page" class="clearfix"> <div id="left">Left Sidebar</div> <div id="content">Main content</div> <div id="right">Right sidebar</div> </div> <div id="footer">Footer Section</div> </div>

1
2
3
4
5
6
7
8
9
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left Sidebar</div>
<div id="content">Main content</div>
<div id="right">Right sidebar</div>
</div>
<div id="footer">Footer Section</div>
</div>

真正来说,实现这页脚永远固定在页面的底部,我们只需要四个div,其中div#container是一个容器,在这个容器之中,我们包含了div#header(头部),div#page(页面主体部分,我们可以在这个div中增加更多的div结构,如上面的代码所示),div#footer(页脚部分)

CSS Code

CSS

html,body { margin: 0; padding:0; height: 100%; } #container { min-height:100%; height: auto !important; height: 100%; /*IE6不识别min-height*/ position: relative; } #header { background: #ff0; padding: 10px; } #page { width: 960px; margin: 0 auto; padding-bottom: 60px;/*等于footer的高度*/ } #footer { position: absolute; bottom: 0; width: 100%; height: 60px;/*脚部的高度*/ background: #6cf; clear:both; } /*=======主体内容部分=======*/ #left { width: 220px; float: left; margin-right: 20px; background: lime; } #content { background: orange; float: left; width: 480px; margin-right: 20px; } #right{ background: green; float: right; width: 220px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
html,body {
margin: 0;
padding:0; height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*IE6不识别min-height*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/*等于footer的高度*/
}
#footer {
position:
absolute;
bottom: 0;
width: 100%;
height: 60px;/*脚部的高度*/ background: #6cf;
clear:both;
}
/*=======主体内容部分=======*/
#left {
width: 220px;
float: left;
margin-right: 20px;
background: lime;
}
#content {
background: orange;
float: left;
width: 480px;
margin-right: 20px;
}
#right{
background: green;
float: right;
width: 220px;
}

下面我们一起来看看这种方法的实现原理:

1. <html>和<body>标签:html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度,同时需要将html,body的margin和padding都移除,也就是html,body的margin和padding都为0;

2. div#container容器:div#container容器必须设置一个最小高度(min-height)为100%;这主要使他在内容很少(或没有内容)情况下,能保持100%的高度,不过在IE6是不支持min-height的,所以为了兼容IE6,我们需要对min-height做一定的兼容处理,具体可以看前面的代码,或者阅读Min-Height Fast Hack了解如何解决min-height在Ie6下的bug问题。另外我们还需要在div#container容器中设置一个”position:relative”以便于里面的元素进行绝对定位后不会跑了div#container容器;

3. div#page容器:div#page这个容器有一个很关键的设置,需要在这个容器上设置一个padding-bottom值,而且这个值要等于(或略大于)页脚div#footer的高度(height)值,当然你在div#page中可以使用border-bottom人水-width来替代padding-bottom,但有一点需要注意,此处你千万不能使用margin-bottom来代替padding-bottom,不然会无法实现效果

4. div#footer容器:div#footer容器必须设置一个固定高度,单位可以是px(或em)。div#footer还需要进行绝对定位,并且设置bottom:0;让div#footer固定在容器div#container的底部,这样就可以实现我们前面所说的效果,当内容只有一点时,div#footer固定在屏幕的底部(因为div#container设置了一个min-height:100%),当内容高度超过屏幕的高度,div#footer也固定在div#container底部,也就是固定在页面的底部。你也可以给div#footer加设一个”width:100%”,让他在整个页面上得到延伸;

5. 其他div:至于其他容器可以根据自己需求进行设置,比如说前面的div#header,div#left,div#content,div#right等。

优点:

结构简单清晰,无需js和任何hack能实现各浏览器下的兼容,并且也适应iphone。

缺点:

不足之处就是需要给div#footer容器设置一个固定高度,这个高度可以根据你的需求进行设置,其单位可以是px也可以是em,而且还需要将div#page容器的padding-bottom(或border-bottom-width)设置大小等于(或略大于)div#footer的高度,才能正常运行。

上面就是Matthew James Taylor介绍的如何实现页脚永远固定在页面的底部,如果大家感兴趣可以阅读原文,也可以直接点击这里查看Demo。

 

CSS技巧:逐帧动画抖动解决方案

2017/08/16 · CSS · 动画

原文出处: 凹凸实验室   

笔者所在的前端团队主要从事移动端的H5页面开发,而团队使用的适配方案是: viewport units + rem。具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局 。

笔者目前(2017.08.12)接触到的移动端适配方案中,「利用视口单位实现适配布局」是最好的方案。不过使用 rem 作为单位会遇到以下两个难点:

  • 微观尺寸(20px左右)定位不准
  • 逐帧动画容易有抖动

第一个难点的通常出现在 icon 绘制过程,可以使用图片或者 svg-icon 解决这个问题,笔者强烈建议使用 svg-icon,具体理由可以参见:「拥抱Web设计新趋势:SVG Sprites实践应用」。

第二个难点笔者举个例子来分析抖动的原因和寻找解决方案。

方法二:

这种方法是利用footer的margin-top负值来实现footer永远固定在页面的底部效果,下面我们具体看是如何实现的。

HTML Markup

XHTML

<div id="container"> <div id="page">Main Content</div> </div> <div id="footer">footer</div>

1
2
3
4
<div id="container">
<div id="page">Main Content</div>
</div>
<div id="footer">footer</div>

上面的代码是最基本的HTML Code,同时你也发现了div#footer和div#container是同辈关系,不像方法一,div#footer在div#container容器内部。当然你也可以根据你的需要把内容增加在div#container容器中,如:一个三列布局,而且还带有header部分,请看下面的代码:

XHTML

<div id="container"> <div id="header">Header Section</div> <div id="page" class="clearfix"> <div id="left">Left sidebar</div> <div id="content">Main content</div> <div id="right">Right sidebar</div> </div> </div> <div id="footer">Footer section</div>

1
2
3
4
5
6
7
8
9
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main content</div>
<div id="right">Right sidebar</div>
</div>
</div>
<div id="footer">Footer section</div>

CSS Code

CSS

html, body { height: 100%; margin: 0; padding: 0; } #container { min-height: 100%; height: auto !important; height: 100%; } #page { padding-bottom: 60px;/*高度等于footer的高度*/ } #footer { position: relative; margin-top: -60px;/*等于footer的高度*/ height: 60px; clear:both; background: #c6f; } /*==========其他div==========*/ #header { padding: 10px; background: lime; } #left { width: 18%; float: left; margin-right: 2%; background: orange; } #content{ width: 60%; float: left; margin-right: 2%; background: green; } #right { width: 18%; float: left; background: yellow; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
html,
body {
height: 100%;
margin: 0;
padding: 0;
}  
 
#container {
min-height: 100%;
height: auto !important;
height: 100%;
}
#page {
padding-bottom: 60px;/*高度等于footer的高度*/
}
#footer {
position: relative;
margin-top: -60px;/*等于footer的高度*/
height: 60px;
clear:both;
background: #c6f;
}
/*==========其他div==========*/
#header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: orange;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: yellow;
}

方法一和方法二有几点是完全相同的,比如说方法一中的1-3三点,在方法二中都一样,换句话说,方法二中也需要把html,body高度设置为100%,并重置margin,padding为0;其二div#container也需要设置min-height:100%,并处理好IE6下的min-height兼容问题;其三也需要在div#page容器上设置一个padding-bottom或border-bottom-width值等于div#footer高度值(或略大于)。那么两种方法不同之处是:

1. div#footer放在div#container容器外面,也就是说两者是同级关系,如果你有新元素需要放置在与div#container容器同级,那你需要将此元素进行绝对定位,不然将会破坏div#container容器的min-height值;

2. div#footer进行margin-top的负值设置,并且此值等于div#footer的高度值,而且也要和div#page容器的padding-bottom(或border-bottom-width)值相等。

优点:

结构简单清晰,无需js和任何hack能实现各浏览器下的兼容。

缺点:

要给footer设置固定值,因此无法让footer部分自适应高度。

大家要是对这种方法感兴趣,你也可以浏览一下《CSS Sticky Footer》和《Pure Css Sticky Footer》,或者直接点击Demo查看其源代码。

 

一个抖动的例子

做一个8帧的逐帧动画,每帧的尺寸为:360×540。

JavaScript

.steps_anim { position: absolute; width: 9rem; height: 13.5rem; background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat; background-size: 45rem 13.5rem; top: 50%; left: 50%; margin: -5.625rem 0 0 -5.625rem; animation: step 1.2s steps(5) infinite; } @keyframes step { 100% { background-position: -45rem; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.steps_anim {
  position: absolute;
  width: 9rem;
  height: 13.5rem;
  background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
  background-size: 45rem 13.5rem;
  top: 50%;
  left: 50%;
  margin: -5.625rem 0 0 -5.625rem;
  animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -45rem;
  }
}

观察在主流(手机)分辨率下的播放情况:

iPhone 6
(375×667)
iPhone 6+
(414×736)
iPhone 5
(320×568)
Android
(360×640)

四种分辨率下,可以看到除了 ip6 其它的三种分辨率都发生了抖动。ip6 不抖动的原因是适配方案是基本于 ip6 的分辨率订制的。)

方法三:

实现在页脚永远固定在页面底部的方法有很多,但是有很多方法是需要使用一些hack或借助javaScrip来实现,那么接下来要说的方法三,仅仅使用了15行的样式代码和一个简单明了的HTML结构实现了效果,并且兼容性强,别的不多说,先看代码。

HTML Code

XHTML

<div id="container"> <div id="page">Your Website content here.</div> <div class="push"><!-- not have any content --></div> </div> <div id="footer">Footer Section</div>

1
2
3
4
5
<div id="container">
<div id="page">Your Website content here.</div>
<div class="push"><!-- not have any content --></div>
</div>
<div id="footer">Footer Section</div>

上面是最基本的HTML Markup,当然你也可以加上新的内容,不过有一点需要注意如果你在div#container和div#footer容器外增加内容的话,新加进徕的元素需要进行绝对定位。如如说你可以在div#container容器中加上你页面所需的元素

HTML Code

XHTML

<div id="container"> <div id="header">Header Section</div> <div id="page" class="clearfix"> <div id="left">Left sidebar</div> <div id="content">Main Content</div> <div id="right">Right Content</div> </div> <div class="push"><!-- not put anything here --> </div> </div> <div id="footer">Footer Section</div>

1
2
3
4
5
6
7
8
9
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<div id="right">Right Content</div>
</div> <div class="push"><!-- not put anything here -->
</div>
</div> <div id="footer">Footer Section</div>

CSS Code

CSS

html, body{ height: 100%; margin:0; padding:0; } #container { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -60px;/*margin-bottom的负值等于footer高度*/ } .push, #footer { height: 60px; clear:both; } /*==========其他div效果==========*/ #header { padding: 10px; background: lime; } #left { width: 18%; float: left; margin-right: 2%; background: orange; } #content{ width: 60%; float: left; margin-right: 2%; background: green; } #right { width: 18%; float: left; background: yellow; } #footer { background: #f6c; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
html,
body{
height: 100%;
margin:0;
padding:0;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;/*margin-bottom的负值等于footer高度*/
} .push,
#footer {
height: 60px;
clear:both;
}
/*==========其他div效果==========*/
#header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: orange;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: yellow;
}
#footer {
background: #f6c;
}

跟前面两种方法相比较,方法三更类似于方法二,他们都将div#footer放在div#container容器之外,而且这个方法在div#container容器中还增加了一个div.push用来把div#footer推下去,下面我们就一起看看这种方法是怎么实现页脚永远固定在页面底部的。

1. <html>和<body>标签:html,body标签和前两种方法一样,需要设置“height:100%”并重置“margin”和“padding”为0;

2. div#container:方法三关键部分就在于div#container的设置,首先需要设置其最小高度(min-height)为100%,为了能兼容好IE6,需要对min-height进行兼容处理(具体处理方法看前面或代码)另外这里还有一个关键点在div#container容器上需要设置一个margin-bottom,并且给其取负值,而且值的大小等于div#footer和div.push的高度,如果div#footer和div.push设置了padding和border值,那么div#container的margin-bottom负值需要加上div#footer和div.push的padding和border值。也就是说“div#container{margin-bottom:-[div#footer的height+padding+border]或者-[div.push的height+padding+border]}”。一句话来说:div#container的margin-bottom负值需要和div#footer以及div.push的高度一致(如果有padding或border时,高度值需要加上他们)

3. div.push:在div.push中我们不应该放置任何内容,而且这个div必须放置在div#container容器中,而且是最底部,并且需要设置其高度值等于div#footer的值,最好加上clear:both来清除浮动。div.push容器在此处所起的作用就是将footer往下推。

4. div#footer容器:div#footer容器和方法二一样,不能放到div#container内部,而和div#container容器同级,如果需要设置元素和footer之间的间距,最好使用padding来代替margin值。

优点:

简单明了,易于理解,兼容所有浏览器。

缺点:

较之前面的两种方法,多使用了一个div.push容器,同样此方法限制了footer部分高度,无法达到自适应高度效果。

如果大家对方法三想了解更多可以点击这里或者直接从DEMO中下载代码自己研究一下。

 

分析抖动

图像由终端(屏幕)显示,而终端则是一个个光点(物理像素)组成的矩阵,换句话说图片也一组光点矩阵。为了方便描述,笔者假设终端上的一个光点代表css中的1px。

以下是一张 9px * 3px 的sprite:

澳门新葡亰手机版 22

每帧的尺寸为 3px * 3px,逐帧的取位过程如下:
澳门新葡亰手机版 23

把 sprite 的 background-size 的宽度取一半,那么终端会怎么处理?
9 / 2 = 4.5
终端的光点都是以自然数的形式出现的,这里需要做取整处理。取整一般是三种方式:round/ceil/floor。假设是 round ,那么 background-size: 5px,sprite 会是以下三种的一个:

情况一 情况二 情况三

理论上,5 / 3 = 1.666...。但实际上光点取整后,三个帧的宽度都不可能等于 1.666...,而是有一个帧的宽度降级为 1px(亏),另外两个宽度升级为 2px(盈),笔者把这个现象称作「盈亏互补」。

再看一下盈亏互补后,逐帧的取位过程:

情况一 情况二 情况三

可以看到由于盈亏互补导致了三个帧的宽度不一致,亏的那一帧在动画中的表示就是抖动

笔者总结抖动的原因是:sprite在尺寸缩放后,帧与帧之间的盈亏互补现象导致动画抖动

附注:1px 由几个光点表示是由以终端的 dpr 决定

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:如何将页脚固定在页面底部,逐帧动画抖动解决

上一篇:减少阻塞渲染的,测试你的前端代码 下一篇:没有了
猜你喜欢
热门排行
精彩图文