视差CSS背景图片移动一点

问题描述 投票：0回答：2

我有来自 

background-url
的背景图像，当我输入：
background-attachment: fixed;

时，我的视差适用于该图像

怎样才能让背景图片在滚动时移动一点？

这是我正在谈论的示例：

这就是我滚动时所拥有的：http://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

这就是我滚动时想要的： http://materializecss.com/parallax-demo.html

html image css parallax
2个回答
4
投票

也许这个链接将帮助它使用Javascript来移动背景图像

编辑

我刚刚意识到这只有效，因为背景图像是重复图案。如果你想用普通图像实现这种效果，你可以使用 Parallax.js。

0
投票

您可以使用 CSS3 的 

transform
和 
transition
属性的组合来使背景图像具有动画效果。这是如何执行此操作的链接。您可以使用 Javascript 的 
onscroll
事件来触发我在悬停时触发的内容。

演示：

<!DOCTYPE html>
<html>

<head>
  <style>
    div {
      width: 300px;
      height: 100px;
      background-color: yellow;
      border: 1px solid black;
      transition: all 2s;
    }
    
    div:hover {
      -ms-transform: translate(0px, 100px);
      /* IE 9 */
      -webkit-transform: translate(0px, 100px);
      /* Safari */
      transform: translate(0px, 100px);
      /* Standard syntax */
    }
  </style>
</head>

<body>

  <div>
    Set this css on background image of your element. Use javascript to transform on scroll.
  </div>

</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.