使用HTML CSS JavaScript创造出的“高级单页”站点！ | 01Media ...
使用HTML+CSS+JavaScript创造出的“高级单页”站点！
转载自 KAYAC DESIGNER’S BLOG我是来自HTML编辑部，被称为“HTML5技术帝”的Honda。
在Kayac公司内，由纵横滚动构成的长页互动站点，被戏称为“高级单页”。
根据滚动条的位置产生各种镜头切换的视差效果或者各类动画，给人带来极为冲击的影像效果。
今天我会为大家介绍在google中检索“高级单页”后排名首位的“我的高级单页标签”中挑选出来的最好的32个单页站点。
首先是纵高型的高级单页
各种变化融合其中，但是动画效果十分流畅。
和滚条联动的右上方的菜单导航也十分可爱。
滚条的联动自不必说，几处canvas构成的动画效果也十分出色。
各section上下重叠，而内容的结构也配合的十分完美。
在YouTube每上传1小时的动画，就增加1秒钟，相应的宇宙空间站的旋转就会动态增加。
将天空之树的高度用纵高的页面予以表现。
滚动滚条时，一个头发是星星状的女孩子会紧随左右。这女孩是谁呀。。。
网页制作公司ora的2013年度应届生招聘站点。
是从页面的最下方开始往上滚动。而背景从地球变成了宇宙
高端视差效果的单页站点
高度绿色节能的未来摩托厕所“Toilet Bike NEO”的站点。
我的房间里厕所浴室都在一起，因此我对这款设计十分欣赏。
很多要素都在运动，但是效果十分流畅。
从未看到过这种风格的网站，因此他们的视差效果的品质十分上乘。
不仅仅是滚轮效果，各种动画也十分完美。
个人来说，比较喜欢站点的配色和插图。
横向滚动的高级单页
横滚也好，纵滚也罢，页面都可以随意进展。
内容的用户体验也做得很好，是一个很不错的站点。
3D景深滚动的高级单页
通过滚轮使得页面可以以3D景深的方式推进
貌似他们安装了CSS3的“transform: translate3d”
和上面的网站一样，这个也是景深推进的站点。
既不是纵向，也不是横向，是景深滚动。
“景动？！”
不仅仅是景深滚动，各处出现的效果令你诧异html+javascript居然可以有这样的效果。
变化球形高级单页
上下循环滚动以推进页面的站点。
从未见过如此的创意！
自动滚动使照片变化的手法十分有趣。
你可以一直眺望景色。
站点右上的banner点击后，有一个大魔王会占据整个页面。
Meffilasquest就开始了。
这有点像站点中的抽奖板块，但是制作上丝毫不含糊。
点击导航后，页面开始移动。
页面的上下会出现手腕，以此来移动页面。
不用JavaScript的高级单页
因为使用了「position: fixed」，因此中央的画不用js都可以动起来。
电梯部分用「position: fixed」固定，因此没有js也可以让电梯运动。
这个页面只是用到了css哦！
极简但有趣的单页站点
向下滚动后，所有的部件会集合起来。
然分散的部件可以拖动。
虽然只是一个tease网站，但是制作十分精良。
kayac制作的高级单页
看起来有点自吹自擂，但这是我们公司制作的高级站点。
滚动滚轮，批萨上的芝士自动融化，
另外也用到了许多视差效果，看起来很热闹呢。
新功能饮料“Raizin”的品牌宣传站点。
通过纵向滚轮可以不断不断往上的站点构成。
随着滚轮滚动，主人公会朝下走动，使用javascript实现。
Web Designing刊登我的文章啦。
最后做个广告
前两天的Web Designing（2011 7月号，62，63页）中，
关于HTML+CSS+JavaScrit制作的页面模板的文章是我写的。
在里面介绍的一个示例站点，由HTML5编写，是我们公司在运营的，“jsdo.it”可以通过
下面的URL来下载哦。
基本示例
http://jsdo.it/calmbooks/bottomNavigation
效果1
http://jsdo.it/calmbooks/bottomNavigation_variation1
效果2
http://jsdo.it/calmbooks/bottomNavigation_variation2
效果3
http://jsdo.it/calmbooks/bottomNavigation_variation3
效果4
http://jsdo.it/calmbooks/bottomNavigation_variation4
具体的用法，请参考web designing
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
