当前位置: 首页 > 面试题库 >

仅使用CSS进行视差滚动?

黎玺
2023-03-14
问题内容

我一直在做一个项目,内容已经完成。但是对于设计,我正在考虑使用视差滚动技术。

但是,我所能找到的全部还是JavaScript或Jquery,而我只精通CSS3。

可以仅使用CSS3(如果需要使用HTML5)而不是使用jquery插件来实现视差滚动吗?如果我能指出一些相同的教程,那就太好了。

注意:这接近于我想要产生的效果


问题答案:

要产生非常基本的视差滚动效果,下面的示例就足够了。 请注意,浏览器前缀,后备等未得到解决。标/* e.g. */有的CSS值可以由设计人员决定是否更改。

在这里看到我的[叉子]

<html><head><style>
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  body {
    perspective: 1px; /* e.g. */
  }
  .background {
    transform:
      translateZ(-.4px)
      scale(.6)
      translateX(-104%)
      translateY(-40%)
      rotate(-5deg); /* e.g. */
  }
  .foreground {
    transform:
      translateZ(.25px)
      translateX(50%)
      scale(.75)
      rotate(2deg); /* e.g. */
  }
</style></head><body>
  <img class="background"/>
  <img class="foreground"/>
</body></html>

对KitKat的回答进行了较小的修正:似乎不需要transform-style:preserve-3d(至少在Chrome中是这样),并且效果
取决于身体的overflow:auto。删除它,视差就会失败。



 类似资料:
  • 利用UIScrollView实现视差滚动效果。在demo中,滑动ScrollView,背景图和文字的滚动速度不一样。直接用ScrollView 的协议,对其子视图的坐标进行随机系数比例的位置移动修正,从而实现视差滚动效果。没有用其他的框架,代码简单。 作者说:原创Demo 转载请注明出处。 [Code4App.com]

  • 视差滚动是指让多层背景以不同的速度移动,从而形成的立体运动效果。比如超级马里奥游戏中,角色所在地面的移动与背景天空的移动,就是一个视差滚动。Cocos2d-x 通过 ParallaxNode 对象模拟视差滚动。可以通过序列控制移动,也可以通过监听鼠标,触摸,加速度计,键盘等事件控制移动。ParallaxNode 对象比常规节点对象复杂一些,因为为了呈现不同的移动速度,需要多个子节点。它类似 Men

  • 本文向大家介绍什么是视差滚动?如何实现视差滚动的效果?相关面试题,主要包含被问及什么是视差滚动?如何实现视差滚动的效果?时的应答技巧和注意事项,需要的朋友参考一下 什么是视差滚动: 就是在同一视角下,鼠标或者页面滚动时,不同元素以不同的速率跟随滚动,产生生动的效果。 如何实现视差滚动: 根据页面滚动高度的变化,JS相应调整不同元素的不同位移,常见的插件有 parallax.js,以及更多的推荐《1

  • 问题内容: 是否有可能在纯CSS中(即无需添加其他html标签)使像这样的换行符?我想在元素之后而不是之前换行: 的HTML 的CSS 我发现了许多这样的问题,但是总是有 “ use display:block;”之 类的答案 。 ,但必须保持在同一行时,我无法这样做。 问题答案: 它是这样的:

  • 我试图在一个libgdx游戏中实现触摸滚动。我有一个很宽的图像,是一个房间的全景。我希望能够滚动图像,让用户可以看到房间的四周。我有它,所以我可以滚动一定的距离,但当一个新的触摸拖动事件被注册的图像被移回到原来的位置。 这就是我实现它的方式 } 在InputProcessor中 在这个问题LibGdx如何使用OrthographicCamera?滚动的帮助下,我做到了这一步?。然而,这并没有真正解

  • 我们在Glassfish 3.1.2集群上部署了一个Java EE应用程序,该集群使用JAX-RS提供REST API。我们定期通过将EAR部署到重复的集群实例来部署新版本的应用程序,然后更新HTTP负载平衡器,以将流量发送到更新的实例,而不是旧实例。 这使我们能够在不损失可用性的情况下进行升级,如下所述:http://docs.oracle.com/cd/E18930_01/html/821-2