web-dev-qa-db-fra.com

Défilement parallèle avec CSS uniquement?

J'ai travaillé sur un projet et j'en ai fini avec le contenu. Pour la conception cependant, je pense à utiliser la technique de défilement parallaxe.

Cependant, tout ce que j'ai pu savoir, c'est avec JavaScript ou Jquery, alors que je ne maîtrise que CSS3.

Le défilement parallaxe peut-il être implémenté avec CSS3 uniquement (avec HTML5 si nécessaire), au lieu d'utiliser des plugins jquery? Ce serait bien si je pouvais être dirigé vers quelques tutoriels pour les mêmes.

Note: Ceci est proche de l’effet que je veux produire ( http://jessandruss.us/ )

htmlcsscss3parallax
22
Pawan

J'aime vraiment la réponse de KitKat , mais, comme l’a suggéré Roy Prins, il serait très utile de le réduire au strict minimum, de voir précisément ce qui est suffisant pour créer cet effet. Je l’ai fait ici.

Pour produire un effet de défilement de parallaxe très basique, l'exemple suivant suffit. Notez que les préfixes de navigateur, les replis, etc. n'ont pas été résolus. Les valeurs CSS marquées avec /* e.g. */ peuvent être modifiées à la discrétion du concepteur.

Voir mon stylo à fourche ici .

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

Une correction mineure à la réponse de KitKat: Il semble qu’on n’ait pas besoin de transform-style:preserve-3d (du moins dans Chrome), et que l’effet plutôt dépend du overflow:auto du corps. Supprimez cela et la parallaxe échoue.

13
chharvey

Recherchez parallax pure css et cliquez sur le premier résultat de CodePen (le deuxième résultat est la page actuelle :), un exemple de Nice est affiché avec fixed et faire défiler les arrière-plans. Pour mémoire, je place le code source ici, fournissant également un support pour Chrome, Safari et Opera.

L'exemple semble avoir deux types d'arrière-plans:

  • fixed, avec background-attachment: fixed dans l'élément souhaité, comme #slide2
  • scrolling, avec transform: translateZ(-1px) scale(2)avant l'élément souhaité, comme #slide1

De plus, l'effet de défilement semble dépendre du paramètre transform-style: preserve-3d de body pour fonctionner correctement. (En passant, IE n'arrive pas à support transform-style .)

Enfin, différentes vitesses de défilement peuvent être obtenues en ajustant la propriété transform, comme les deux éléments img de l'exemple.

Code source :

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

14
KitKat

Vous devriez pouvoir obtenir au moins un effet partiel en utilisant des transitions CSS. Cependant, comme l'a mentionné Alejandro, CSS ne détecte pas le défilement. 

Jetez un coup d'oeil à "Cet effet de défilement Cool Parallax - en Pure CSS3!" ( http://css.dzone.com/articles/cool-parallax-scrolling-effect ) pour un exemple. 

La clé utilise des liens de page internes. Ainsi, au lieu de faire défiler l'écran, un utilisateur clique sur un lien de la page et la page défile vers le haut/le bas jusqu'à la nouvelle section. Lorsque la page défile, les transitions fournissent l'effet de parallaxe.

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>

Voici un codepen

1
Anand Rockzz

Oui, si vous voulez un simple effet de parallaxe de base, alors la règle CSS3 @keyframes serait suffisante (pas de parallaxe), mais encore une fois comme les autres mentionnées si vous voulez utiliser la parallaxe au maximum, javascript est indispensable. Je vous ai quand même donné des liens pour les deux manières. N'hésitez pas à les vérifier et à utiliser ce que vous voulez

CSS3 pur:

http://jasonlau.biz/home/css/parallax-effect-using-only-css-with-no-javascript / * avec images clés * /

http://css.dzone.com/articles/cool-parallax-scrolling-effect / * sans images clés * /

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

J'espère que ça a aidé

0
Nikhil Nanjappa

DNA Parallax/Images clés CSS Parallax Animator

Cette parallaxe utilise une animation CSS standard (utilisant @keyframes at-rule) pour définir les effets de défilement. Vous n'avez besoin d'aucune connaissance en javascript.

Le seul besoin est d'inclure 2 fichiers javascript sans configuration (jquery + DNA Parallax CSS plugin) qui exécuteront automatiquement l'animation @keyframes sur l'élément lorsque vous faites défiler ... 

0
elixon