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

有个网页的实现方式不怎么看的懂,有没有前端的高手来解释下下呀.0.0

  •  
  •   iMouseWu · 2013-09-16 00:07:52 +08:00 · 2731 次点击
    这是一个创建于 4088 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://www.guirebustini.com.br/
    就是这个网页!有没有知道他这个模式显示的方式呀?
    主要在这几个方面:
    1.首页进去的页面,当滚动滑轮的时候该页面是不会移动的,当下一个页面达到满屏的时候,下一张页面出来,那么这张页面的位置也是不会变得。都是被后者慢慢覆盖!(这里经过我的测试各个div是一层覆盖一层的关系,也就是说这里是通过z-index来实现的,但是具体的能不能给点提示).我觉得应该是滚动过程中,如果一个div已经满屏的话就给加一个fix,那么就可以实现了了!不知道对不对?
    2.覆盖过程中,前一个页面的字和图片会有稍微上移的感觉,让人的感觉就是,这些字不是一下子被覆盖的!怎么感觉有点像响应式的味道!
    这点又是怎么实现的
    3.首页音乐框中背景原来是灰色的,但是鼠标移上去会有蓝色滑动出来,个人有种感觉是通过移动图片来实现的,就是修改图片的位置。但是这样子的话不是应该有2个div一个是灰色的,但是这样子不是会覆盖下面的div的内容为什么上面的字还是能显示出来。所以貌似这个假设不成立,能不能给点提示?
    因为最近才接触前端,所以实现效果不是很懂!希望大家可以分析下!
    个人觉得可能是用到了某一个开源框架!
    第 1 条附言  ·  2013-09-16 00:41:17 +08:00
    各位忽略上一个帖子吧!是我自己手贱,多点了一下!对各位照成了视觉污染实在是抱歉!
    3 条回复    1970-01-01 08:00:00 +08:00
    caomu
        1
    caomu  
       2013-09-16 00:37:02 +08:00   ❤️ 1
    我不会前端,具体细节我不懂。不过这个应该是叫视差滚动 Parallax Scrolling ,站内讨论: /t/61145 /t/62327/t/71456 。具体实现你搜一些关键词吧。另外V2EX的节点不是tag,别重复发帖。
    iMouseWu
        2
    iMouseWu  
    OP
       2013-09-16 00:39:34 +08:00
    @caomu 抱歉,因为看到首页没有出现我的这个,以为没法成功就又试了一遍!
    emric
        3
    emric  
       2013-09-16 02:54:12 +08:00   ❤️ 1
    1. 根据当前位置, 设置和取消 position:fixed / script-footer.js row 97~128
    2. 根据当前位置, 设置 margin-top / script-footer.js row 13~30
    3. hover时用.animate把.botao-hover元素的margin-left方法设置为 0 / script-footer.js row 162~168
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4753 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 05:36 · PVG 13:36 · LAX 21:36 · JFK 00:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.