web-dev-qa-db-ja.com

CSSのみでの視差スクロール？

私はプロジェクトに取り組んでおり、コンテンツは完成しました。ただし、設計では、視差スクロール技術の使用を考えています。

ただし、CSS3にしか精通していないのに対して、JavaScriptまたはJqueryを使用した場合にそれを知ることができました。

Jqueryプラグインを使用する代わりに、CSS3のみ（必要に応じてHTML5を使用）で視差スクロールを実装できますか？私は同じためのいくつかのチュートリアルを指すことができたらいいですね。

注：これは、私が生成したい効果に近い（ http://jessandruss.us/ ）

htmlcsscss3parallax
22
Pawan

KitKatの答え は本当に好きですが、Roy Prinsが示唆したように、この効果を生み出すのに十分なものを正確に確認するために、必要最低限​​にまで減らすことは非常に役立ちます。ここでそうしました。

非常に基本的な視差スクロール効果を生成するには、次の例で十分です。ブラウザのプレフィックス、フォールバックなどに対応していないことに注意してください。 /* 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に依存するようです。これを削除すると、視差が失敗します。

12
chharvey

parallax pure css を検索して CodePenの最初の結果 （2番目の結果は現在のページです）をクリックすると、両方のfixedおよびscrolling背景。記録のために、Chrome、Safari、Operaのサポートも提供し、ここにソースコードを配置します。

この例には、2種類の背景があります。

  • fixed、目的の要素にbackground-attachment: fixedが含まれています（#slide2など）
  • スクロール、transform: translateZ(-1px) scale(2)beforeを使用して、#slide1などの目的の要素

さらに、スクロール効果は、bodyのtransform-style: preserve-3dの設定に依存して適切に動作するようです。 （IEは support transform-style には起こりません、ところで。）

最後に、例の2つのtransform要素のように、imgプロパティを調整することにより、さまざまなスクロール速度を実現できます。

ソースコード ：

<!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>
15
KitKat

CSSトランジションを使用して、少なくとも部分的な効果を得ることができるはずです。ただし、Alejandroが述べたように、CSSはスクロールを検出しません。

「クールな視差スクロール効果-Pure CSS3で！」をご覧ください。 （ http://css.dzone.com/articles/cool-parallax-scrolling-effect ）例。

重要なのは、内部ページリンクを使用することです。そのため、ユーザーはスクロールする代わりに、ページ内リンクをクリックして、ページを新しいセクションまで上下にスクロールします。ページがスクロールすると、トランジションは視差効果を提供します。

6
tjameswhite
<!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>

これは codepen です

1
Anand Rockzz

はい、単純な基本的な視差効果が必要な場合は、CSS3@ keyframes ruleで十分です（それほど視差ではありません）視差を最大限に使用するには、javascriptを使用する必要があります。とにかく両方の方法のリンクを提供しました。両方をチェックして、好きなものを使用してください

純粋なCSS3：

http://jasonlau.biz/home/css/parallax-effect-using-only-css-with-no-javascript /*キーフレーム付き* /

http://css.dzone.com/articles/cool-parallax-scrolling-effect /*キーフレームなし* /

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/

お役に立てば幸いです

0
Nikhil Nanjappa

DNA Parallax/CSS Keyframes Parallax Animator

この視差は、標準のCSSアニメーション（@keyframes at-ruleを使用）を使用してスクロール効果を定義します。 JavaScriptの知識は必要ありません。

必要なのは、スクロールするときに要素で@keyframesアニメーションを自動的に実行する2つの構成不要のJavaScriptファイル（jquery + DNA Parallax CSSプラグイン）を含めることです...

0
elixon