V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
iMouseWu
V2EX  ›  程序员

最近对前端有点兴趣,最近碰见一个网站,但是对它这个网站有些地方的实现方法不是很懂!有没有人能解释下啊?

  •  
  •   iMouseWu · 2013-09-16 00:38:17 +08:00 · 4421 次点击
    这是一个创建于 4078 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://www.guirebustini.com.br/
    就是这个网页!有没有知道他这个模式显示的方式呀?
    主要在这几个方面:
    1.首页进去的页面,当滚动滑轮的时候该页面是不会移动的,当下一个页面达到满屏的时候,下一张页面出来,那么这张页面的位置也是不会变得。都是被后者慢慢覆盖!(这里经过我的测试各个div是一层覆盖一层的关系,也就是说这里是通过z-index来实现的,但是具体的能不能给点提示).我觉得应该是滚动过程中,如果一个div已经满屏的话就给加一个fix,那么就可以实现了了!不知道对不对?
    2.覆盖过程中,前一个页面的字和图片会有稍微上移的感觉,让人的感觉就是,这些字不是一下子被覆盖的!怎么感觉有点像响应式的味道!
    这点又是怎么实现的
    3.首页音乐框中背景原来是灰色的,但是鼠标移上去会有蓝色滑动出来,个人有种感觉是通过移动图片来实现的,就是修改图片的位置。但是这样子的话不是应该有2个div一个是灰色的,但是这样子不是会覆盖下面的div的内容为什么上面的字还是能显示出来。所以貌似这个假设不成立,能不能给点提示?
    因为最近才接触前端,所以实现效果不是很懂!希望大家可以分析下!
    谢谢的
    18 条回复    1970-01-01 08:00:00 +08:00
    loethen
        1
    loethen  
       2013-09-16 09:07:23 +08:00
    视差滚动。google之。
    rrfeng
        2
    rrfeng  
       2013-09-16 09:16:29 +08:00
    滚动的时候这个页面的 chrome 进程 cpu 占用率达到了 50% ……

    我是不是该换电脑了
    bunorte
        3
    bunorte  
       2013-09-16 09:35:04 +08:00
    主要用到的技术是jquery的animate、相对定位,跟响应式没什么关系。详细的js代码页面底部都有了,仔细看看就明白了。不懂jquery的话下载个api手册看看。
    piresion
        4
    piresion  
       2013-09-16 09:43:15 +08:00
    看看苹果5c的页面:http://www.apple.com/cn/iphone-5c/
    anson0370
        5
    anson0370  
       2013-09-16 10:16:23 +08:00   ❤️ 1
    1. 逐个 fixed 可以做到
    2. 视差滚动没错
    3. 这个最简单……纯CSS就行了 给你个简单的demo http://codepen.io/anson0370/pen/mpFuK
    anson0370
        6
    anson0370  
       2013-09-16 10:18:34 +08:00   ❤️ 1
    才发现楼主居然有两个贴……另一个贴也已经有人回过了orz
    iMouseWu
        7
    iMouseWu  
    OP
       2013-09-17 11:40:21 +08:00
    @anson0370 表示一下手贱,点啊点点错鸟!
    66beta
        8
    66beta  
       2013-09-17 11:42:29 +08:00
    始祖:Nike Better World
    iMouseWu
        9
    iMouseWu  
    OP
       2013-09-17 11:42:51 +08:00
    @piresion 怎么赶脚5C的这个页面和这个略有所不同呀。0.0
    iMouseWu
        10
    iMouseWu  
    OP
       2013-09-17 11:44:31 +08:00
    @loethen 已搜!终于明白了!好满足的感觉!THX
    iMouseWu
        11
    iMouseWu  
    OP
       2013-09-17 11:46:47 +08:00
    @bunorte 我觉得这个,应该像1楼说的这样0.0,貌似用不到animate这个呀
    iMouseWu
        12
    iMouseWu  
    OP
       2013-09-17 11:47:20 +08:00
    @rrfeng 貌似我只有35%.....好惊人的消耗啊!为什么会这样子....
    iMouseWu
        13
    iMouseWu  
    OP
       2013-09-17 11:48:32 +08:00
    @66beta 现在NIKE的主页已经不是这种模式了呀。。。
    iMouseWu
        14
    iMouseWu  
    OP
       2013-09-17 11:49:46 +08:00
    @emric 为了不污染视觉,这这里感谢之
    66beta
        15
    66beta  
       2013-09-17 12:02:07 +08:00
    iMouseWu
        16
    iMouseWu  
    OP
       2013-09-18 01:53:53 +08:00
    @anson0370 小手一抖2贴就出!ORZ TOO
    SharkIng
        17
    SharkIng  
       2013-09-18 05:02:17 +08:00
    记得V2有一个女生做那个网站前段时间测试版的时候就用的这个功能
    P233
        18
    P233  
       2013-09-18 05:45:32 +08:00
    http://cdpn.io/LCBby

    用了 skrollr 插件
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1761 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:46 · PVG 00:46 · LAX 08:46 · JFK 11:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.