Html 仅使用 CSS 进行视差滚动？

Question

提问by Pawan

I have been working on a project and I am done with the content. For the design however, I am thinking of using the parallax scrolling technique.

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

However, all I have been able to find out about it has been with JavaScript or Jquery, whereas I am only proficient with CSS3.

但是，我只能使用 JavaScript 或 Jquery 了解它，而我只精通 CSS3。

Can parallax scrolling be implemented with CSS3 only(with HTML5 if needed), instead of using jquery plugins? It would be nice if I could be pointed to some tutorials for the same.

能否仅使用 CSS3（如果需要，使用 HTML5）而不是使用 jquery 插件来实现视差滚动？如果我能指出一些相同的教程，那就太好了。

Note: This is close to the effect I want to produce(http://jessandruss.us/)

注意：这接近我想要产生的效果（http://jessandruss.us/）

Answer 1

采纳答案by chharvey

I really like KitKat's answer, but as Roy Prins suggested, it would be very helpful to reduce it down to the bare essentials, to see precisely what is sufficient to create this effect. I've done so here.

我真的很喜欢KitKat 的回答，但正如 Roy Prins 所建议的那样，将其简化为基本要素会非常有帮助，以准确了解足以产生这种效果的内容。我这里已经这样做了。

To produce a very basic parallax scroll effect, the following example is sufficient.Note that browser prefixes, fallbacks, etc. have not been addressed. CSS values marked with /* e.g. */may be changed at the designer's discretion.

要产生一个非常基本的视差滚动效果，下面的例子就足够了。请注意，尚未解决浏览器前缀、回退等问题。标记为的 CSS 值/* e.g. */可能会根据设计者的判断进行更改。

See my forked pen here.

在这里看到我的分叉笔。

<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>

A minor correction to KitKat's answer: It seems that one doesn't need transform-style:preserve-3d(at least in Chrome), and that the effect rather depends on the body's overflow:auto. Remove this and the parallax fails.

对 KitKat 的回答稍作修正：似乎不需要transform-style:preserve-3d（至少在 Chrome 中），而且效果取决于身体的overflow:auto. 删除它，视差失败。

Answer 2

回答by KitKat

Searching for parallax pure cssand clicking on the first result from CodePen(the second result is the current page :), a nice example is displayed with both fixedand scrollingbackgrounds. For the record, I place the source code here, providing support for Chrome, Safari and Opera, too.

搜索视差纯 css并单击来自 CodePen的第一个结果（第二个结果是当前页面:)，一个很好的例子显示了固定和滚动背景。作为记录，我将源代码放在这里，也提供对 Chrome、Safari 和 Opera 的支持。

The example appears to have two kinds of backgrounds:

该示例似乎有两种背景：

fixed, with background-attachment: fixedin the desired element, like #slide2
scrolling, with transform: translateZ(-1px) scale(2)beforethe desired element, like #slide1

fixed，background-attachment: fixed在所需的元素中，例如#slide2
滚动，transform: translateZ(-1px) scale(2)在所需元素之前，例如#slide1

Moreover, the scrolling effect seems to depend on the setting transform-style: preserve-3dof bodyto work properly. (IE doesn't happen to support transform-style, by the way.)

此外，滚动效果似乎取决于设置transform-style: preserve-3d的body工作正常。（顺便说一下，IE 不碰巧支持transform-style。）

Finally, different scrolling speeds can be achieved by tweaking transformproperty, like the two imgelements of the example.

最后，可以通过调整transform属性来实现不同的滚动速度，就像img示例中的两个元素一样。

Source code:

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title> Pure CSS Parallax Scrolling </title>
    <!-- Copyright (c) 2014 by Keith Clark -->
    <style>
        @import url(http://fonts.googleapis.com/css?family=Nunito);
        html {
            height: 100%;
            overflow: hidden;
        }
        body { 
            margin:0;
            padding:0;
            perspective: 1px;
            -webkit-perspective: 1px;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            height: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
            font-family: Nunito;
        }
        h1 {
            font-size: 250%
        }
        p {
            font-size: 140%;
            line-height: 150%;
            color: #333;
        }
        .slide {
            position: relative;
            padding: 25vh 10%;
            min-height: 100vh;
            width: 100vw;
            box-sizing: border-box;
            box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
            -webkit-transform-style: inherit;
            transform-style: inherit;
        }
        img {
            position: absolute;
            top: 50%;
            left: 35%;
            width: 320px;
            height: 240px;
            -webkit-transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
            transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
            padding: 10px;
            border-radius: 5px;
            background: rgba(240,230,220, .7);
            box-shadow: 0 0 8px rgba(0, 0, 0, .7);
        }
        img:last-of-type {
            -webkit-transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
            transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
        }
        .slide:before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left:0;
            right:0;
        }
        .title {
            width: 50%;
            padding: 5%;
            border-radius: 5px;
            background: rgba(240,230,220, .7);
            box-shadow: 0 0 8px rgba(0, 0, 0, .7);
        }
        .slide:nth-child(2n) .title {
            margin-left: 0;
            margin-right: auto;
        }
        .slide:nth-child(2n+1) .title {
            margin-left: auto;
            margin-right: 0;
        }
        .slide, .slide:before {
            background: 50% 50% / cover;  
        }
        .header {
            text-align: center;
            font-size: 175%;
            color: #fff;
            text-shadow: 0 2px 2px #000;
        }
        #title {
            background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-6.jpg");
            background-attachment: fixed;  
        }
        #slide1:before {
            background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-4.jpg");
            -webkit-transform: translateZ(-1px) scale(2);
            transform: translateZ(-1px) scale(2);
            z-index:-1;
        }
        #slide2 {
            background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-3.jpg");
            background-attachment: fixed;
        }
        #slide3:before {
            background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-5.jpg");
            -webkit-transform: translateZ(-1px) scale(2);
            transform: translateZ(-1px) scale(2);
            z-index:-1;
        }
        #slide4 {
            background: #222;
        }
    </style>
</head>
<body>
    <div id="title" class="slide header">
        <h1>Pure CSS Parallax</h1>
    </div>
    <div id="slide1" class="slide">
        <div class="title">
            <h1>Slide 1</h1>
            <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
        </div>
    </div>
    <div id="slide2" class="slide">
        <div class="title">
            <h1>Slide 2</h1>
            <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
        </div>
        <img src="http://lorempixel.com/output/abstract-q-c-640-480-6.jpg">
        <img src="http://lorempixel.com/output/abstract-q-c-640-480-4.jpg"> 
    </div>
    <div id="slide3" class="slide">
        <div class="title">
            <h1>Slide 3</h1>
            <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
        </div>
    </div>
    <div id="slide4" class="slide header">
        <h1>The End</h1>
    </div>
</body>

Answer 3

回答by tjameswhite

You should be able to get at least a partial effect by using CSS transitions. However, as Alejandro mentioned, CSS doesn't detect scroll.

您应该能够通过使用 CSS 过渡获得至少部分效果。但是，正如 Alejandro 提到的，CSS 不会检测滚动。

Take a look at "That Cool Parallax Scrolling Effect - in Pure CSS3!" (http://css.dzone.com/articles/cool-parallax-scrolling-effect) for an example.

看看“那个很酷的视差滚动效果 - 在纯 CSS3 中！” ( http://css.dzone.com/articles/cool-parallax-scrolling-effect) 为例。

The key is using internal page links. So instead of scrolling, a user would click an in-page link and the page would then scroll up/down to the new section. As the page scrolls, the transitions provide the parallax effect.

关键是使用内部页面链接。因此，用户无需滚动，而是单击页面内链接，然后页面将向上/向下滚动到新部分。当页面滚动时，过渡提供视差效果。

Answer 4

回答by Anand Rockzz

<!DOCTYPE html>
<html>
<head>
<style>
.parallax {
    /* The image used */
    background-image: url("img_parallax.jpg");

    /* Set a specific height */
    min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
</head>
<body>

<p>Scroll Up and Down this page to see the parallax scrolling effect.Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.</p>

<div class="parallax"></div>

<div style="height:1000px;background-color:red;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

</body>
</html>

Here is a codepen

这是一个代码笔

Answer 5

回答by elixon

DNA Parallax / CSS Keyframes Parallax Animator

DNA 视差 / CSS 关键帧视差动画师

This parallax uses standard CSS animation (using @keyframes at-rule) to define scrolling effects. You don't need any javascript knowledge.

此视差使用标准 CSS 动画（使用 @keyframes at-rule）来定义滚动效果。您不需要任何 javascript 知识。

The only need is to include 2 configuration-less javascript files (jquery + DNA Parallax CSS plugin) that will automatically run @keyframes animation on the element as you scroll...

唯一需要的是包含 2 个无配置的 javascript 文件（jquery + DNA 视差 CSS 插件），当您滚动时，这些文件将自动在元素上运行 @keyframes 动画...

Answer 6

回答by Nikhil Nanjappa

Yes, If you want a simple basic parallax effect then CSS3 @keyframes rulewould be sufficient(not so parallax) but again like the others mentioned if you want to use parallax to the fullest then using javascript is a must. I have anyways given you links for both the ways. Feel free to check them both and use what you want

是的，如果您想要一个简单的基本视差效果，那么 CSS3 @keyframes 规则就足够了（不是那么视差），但再次像其他人提到的那样，如果您想最大程度地使用视差，则必须使用 javascript。无论如何，我已经为您提供了两种方式的链接。随意检查它们并使用你想要的

Pure CSS3 :

纯 CSS3 ：

http://jasonlau.biz/home/css/parallax-effect-using-only-css-with-no-javascript/* with keyframes */

http://jasonlau.biz/home/css/parallax-effect-using-only-css-with-no-javascript/* 带关键帧 */

http://css.dzone.com/articles/cool-parallax-scrolling-effect/* without keyframes */

http://css.dzone.com/articles/cool-parallax-scrolling-effect/* 没有关键帧 */

With JQuery:

使用 JQuery：

http://potentpages.com/parallax-tutorials/

http://www.webdesignerdepot.com/2013/07/how-to-create-a-simple-parallax-effect/

http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641

http://www.1stwebdesigner.com/css/create-scrolling-parallax-website/

Hope it helped

希望有帮助

Html 仅使用 CSS 进行视差滚动？

提问by Pawan

采纳答案by chharvey

回答by KitKat

回答by tjameswhite

回答by Anand Rockzz

回答by elixon

回答by Nikhil Nanjappa

相关推荐

最近更新

标签

Html 仅使用 CSS 进行视差滚动？

提问by Pawan

采纳答案by chharvey

回答by KitKat

回答by tjameswhite

回答by Anand Rockzz

回答by elixon

回答by Nikhil Nanjappa

相关推荐

未知类型名称字符串 C++

C++ 将 Json::Value 转换为 std::string？

C++ 错误：非静态数据成员的无效使用

C++十进制转十六进制代码

相关推荐

最近更新

标签