欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

像这种网站效果，整屏整屏换有没有什么名字？

程序员文章站 2022-05-23 09:34:35
...
BeoPlay
还有什么类似的网站吗?

回复内容：

正好昨天看到一个这个插件：fullPage.js One Page Scroll Site Plugin

像这种网站效果，整屏整屏换有没有什么名字？
话说最近这样的页面展示效果使用的很多啊，比如说这几天很火的锤子手机： 首页 - 锤子科技
还有知乎广告出去的某浏览器的首页：千寻浏览器
Apple 官网的 iPhone 5c 展示也采用的就是这样的方式，特别生动优雅 FullScreen Backgrounds

Github：alvarotrigo/fullPage.js 路 GitHub

引自腾讯全端 AlloyTeam 团队视差滚动的爱情故事


【定义】

所谓的视差滚动，就是在页面滚动过程中，多层次的元素进行不同程度的位移，带来立体的视差效果。还有很多的奇思妙想的展现方式，都是滚动页面触发的，也可称为视差滚动。视差滚动里面最基础的就是切换背景，这点其实一个CSS就满足了

【视差滚动原理一】
background-attachment: fixed || scroll || local
默认是scroll，内容跟着背景走，而视差滚动页面里用fixed，背景相对页面固定而不跟内容滚动。

很快地我就做出了一个demo出来，还特意配上几张优雅的图片和极富内涵的词句，女神一定会因为我的文采而爱上我的，而且，那些看似简单的“我是内容”不断重复，其实只要细心就会发现里面隐藏着我的表白，情商如此之高的女神，一定会发现，然后我们就可以幸福的在一起，在爱情的滋润下，我很快就能升职加薪，当上总经理，出任CEO，赢取白富美，走上人生巅峰。哈哈哈哈哈哈哈哈，诶？好像不用赢取白富美，那就挑战白富美。

demo1_base

“咦，怎么是静态的，谭伟X，能不能帮我做个会动的那种的视差滚动，麻烦了么么哒~”

。。。。。。居然完全没有留意到我溢出的文采和隐藏的表白。。。。。没事！虽然跟我预想有点出入，但女神这是在考验我！

【视差滚动原理二】
女神想要些更加丰富的效果，也对，像我这么内涵有档次的程序员，当然要来写非常酷的动画效果。
在原理的demo1的基础上，我在scroll事件上添加一些动画事件。



window.addEventListener('scroll',function(e){
        var scrollTop = window.scrollY;
        if(scrollTop > 0 && scrollTop  articleHeight){
            title1.classList.add('title-anim');
            content1.classList.add('content-anim');
        }else if(scrollTop >= articleHeight && scrollTop  articleHeight*2){
            title2.classList.add('title-anim');
            content2.classList.add('content-anim');
        }else if(scrollTop >= articleHeight*2 && scrollTop  articleHeight*3){
            title3.classList.add('title-anim2');
            content3.classList.add('content-anim');
        }
    })
这种叫 视差滚动（Parallax Scrolling）。即多个元素以不同的层次堆叠在一起，并随鼠标滚轮滚动而进行位置移动，进而形成立体的运动效果。
像这种网站效果，整屏整屏换有没有什么名字？
像这种网站效果，整屏整屏换有没有什么名字？
比如这个游戏画面里通过人物马里奥、前景、背景着三个部分的移动速率的不同来实现立体效果。类比网页也是如此。一个滚动视察的网站至少会有以下几层 ：背景层，内容层，贴图层。
像这种网站效果，整屏整屏换有没有什么名字？
类似网站：

nikebetterworld.com/

ianlunn.co.uk/plugins/j

像这种网站效果，整屏整屏换有没有什么名字？类似Nike for a Better World 产品展示页面的视差滚动效果。
源码下载 pan.baidu.com/s/1hqssgc

sequencejs.com/themes/s
像这种网站效果，整屏整屏换有没有什么名字？水平方向的视差滚动。
源码下载 pan.baidu.com/s/1kT5dnb


Bit This
Bit This 是一家位于西班牙马德里的代理公司。
像这种网站效果，整屏整屏换有没有什么名字？

New Zealand

The New Zealand 是一家介绍新西兰旅游的网站。

像这种网站效果，整屏整屏换有没有什么名字？

Diablo Media

Diablo Media 是一家线上营销代理公司：为广告主和出版商发布产品和作品。

像这种网站效果，整屏整屏换有没有什么名字？

360 Long Road ZurichNetlash bSeen

Netlash BSeen 是由 Netlash 创建人和线上营销代理 bSeen 合并之后新创建的一家代理公司。

像这种网站效果，整屏整屏换有没有什么名字？

Ito Sio CeniSullivanIutopiCultural SolutionsGo Up

Go Up 是一家意大利广告代理公司。

像这种网站效果，整屏整屏换有没有什么名字？
Ito Sio Ceni

Ito Sio Ceni 是一家波兰的广播公司，

像这种网站效果，整屏整屏换有没有什么名字？Sullivan

Sullivan 是一家提供从各个方面提升用户接触度服务的代理公司。

像这种网站效果，整屏整屏换有没有什么名字？Iutopi

Iutopi 是一家品牌、平面设计和网页设计代理公司。

像这种网站效果，整屏整屏换有没有什么名字？Cultural Solutions

Cultural Solutions 是英国的一家企业管理代理公司。

像这种网站效果，整屏整屏换有没有什么名字？Go Up

Go Up 是一家意大利广告代理公司。

像这种网站效果，整屏整屏换有没有什么名字？


【参考资料】

[1]damndigital.com/archive

[2]cnblogs.com/lhb25/archi




——————————————————————————————————————

=-=||| 各位说我文不对题的页面，其实是问题提到的网页改版了……之前的确实是视差滚动的。你看我楼下那个早期回答也是这样的类型

基于码农的价值观，完全未能捕捉到题主单纯只是为了寻求一个名词解释的动机。
以下回答基本跑题。

----------------------------

事实上只要注意到这个url中的#号，就应该明白这是一种基于hash change 事件做路由导向的页面设计风格。

一般的web页面，都是基于url做路由的，即url改变了，那么就到了另外一个页面。如，baidu首页就是 baidu.com,贴吧首页就是tieba.baidu.com。

基于hash（hash即url中#后面的部分）的页面却不是这样。像当前网站，首页是 beoplay.cn/#，某产品信息就是 beoplay.cn/#，url的uri部分是没变的，变得是hash，即页面并不会刷新，但是浏览器的history接口可以提供pushState功能，即按退格键会到上一次hashchange时的url，以实现类似页面跳转的效果。

开发人员要做的就是每次hashchange事件发生时，获取hash值并做路由处理，例如uri#/product/$id就展示某个产品, uri#/home就展示首页之类的，都是在先ajax数据，然后本地操作dom实现的，所以速度很快，且不会影响某些流媒体播放。

国内有很多这样的网站，例如QQ音乐-音乐你的生活！ 、 网易云音乐 听见好时光

当然，hashchange事件在ie67应该是不支持的，我也没测试，不知道在ie67是否还是这样实现的。

至于单页滚动、视差滚动这些词所形容的页面效果，常见于wordpress的一些主题，国外很多个人站非常喜欢这种风格，google one page blog即可看到很多结果。只是单纯基于scroll事件，绑定一些dom操作，跟hashchange结合ajax的效果不可同日而语。事实上，这种效果只有结合hashchange & ajax才能真正发挥作用，否则就是花瓶。 Apple - Mac Pro

QQ浏览器 for MAC 官方网站

Mac迅雷官网 这种页面的学名应该是叫：单页滚动。
用过这样的一个jquery插件jQuery One Page Scroll by Pete R.
然后关于视差的很多网站呢，设计达人 | 爱设计，爱分享。优设-UISDC: 优秀网页设计联盟-SDC-网页设计师交流平台里面搜索视差就能发现很多。
最初级的教程的话，视差滚动的爱情故事 腾讯的AlloyTeam里写的科普文章，后面还有一篇，可以先从这里试试 个人建站中，准备采用这种形式展示。查阅其文档。
惊人发现如下，大家也可以借鉴一下这些网站的设计风格。


British Airways Behind The Design"
- Sony MDR Headphones
- | Vodafone xone
- CERVEZA SALTA
- Snapzheimer
- New JUMO Concept
- 小米手环智能手环——小米手机官网
- Moneytree 一生通帳、家計簿より楽チン！
- Leafcutter Creative Digital
- Restaurant WOODS
- Charlotte Aimes
- Made of Sundays
- JACOB ERIKSSON
- patuque.com/santateresa
- YMCA Annual Report 2013
- Dividend Solar: America’s Energy Investment Platform
- The Specialists
- Brian Ingle - test
- lawinenstift Werbeagentur Berlin Charlottenburg
- wtfdesign.pl/
- TheKorner
- Education Above All
- Blacknova Academy
- Rocker Creative
- Nova
- Scribe: Copy and paste anything from your Mac to your iPhone, without Wi-Fi
- SWENK.me | Violin cases with your personality
- Lucile Cazanave
- overallstudio.co.il/
- SUM HING CARTON BOX FACTORY 森興紙品廠
- MedLIVE - Real-Time Market Data
- bearonunicycle.com/
- rawmilk.dk/en/
- Nearpod: Create, Engage, Assess through Mobile Devices.
- Fama Volat
- Carpet Lover Club
- Zack Batsaikhan. Creative Director.
- GraphicID - grafisk design
- Homme en Devenir
- JukStaPoz
- Portfolio Arno
- 2013老夫子50 時空叮叮車
- Matrimonia | Ekskluzivan Salon Venčanica
- carlphot
- Medissix
- Viaggia con Terna nel Mondo della Trasmissione dell'energia Elettrica
- CONSUMED, the Movie
- villareginateodolinda.it
- Rodrigo Maroto Portfolio 2013
- azul257.com.mx
- MGfilms
- THE KESS TRIO
- Will Fong
- Karma FF&E
- Foss distillery
- Conversion Culture
- Дед Мороз и Снегурочка Киев. Корпоративы и детские утренники
- FERGAL KEENAN
- spell-star.appspot.com/
- yizeng.me/
- Neo Learning NL
- sunfishlabs.com/
- Unabridged Software
- Plainworks Worldcup 2014 Match Schedule
- Home | Organice
- Alchemy Research & Analytics-A knowledge outsourcing firm
- CIMA 2015 - Vuelve al origen
- El mรฉtodo Japonรฉs para dejar de fumar fรกcilmente
- atlanticcorp.us/
- moysport.ru/
- N철rttilaakso Oy!
- World Cup 2014 Fixtures
- dopehustleinc.com/defau
- themify.me/demo/#
- bragdonfarm.com/
- Paperdeer
- Veterans of Foreign Wars VFW Post 1
- Dancing Road Productions
- Camani | Indonesian Iconic Scents
- Exapoint: easySoft, Qualit辰tsmanagement Gesundheitswesen, SOP Management像这种网站效果，整屏整屏换有没有什么名字？

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

相关文章

相关视频

相关标签： BeoPlay

上一篇： php一次性删除前台checkbox多选内容的方法_php实例

下一篇： WordPress如何在win系统下实现伪静态_PHP

推荐阅读