La parallaxe défilement avec CSS?

Je travaille sur un projet et j'ai terminé avec le contenu. Pour la conception cependant, je pense à l'aide de la parallaxe défilement technique.

Cependant, tout ce que j'ai pu trouver à ce sujet a été avec JavaScript ou Jquery, alors que je ne maîtrise avec CSS3.

Peut parallaxe défilement être mis en œuvre avec CSS3(avec HTML5 si nécessaire), au lieu d'utiliser des plugins jquery? Ce serait bien si je pouvais être mis en évidence quelques tutoriels pour la même chose.

Remarque: il est proche de l'effet, je veux produire(http://jessandruss.us/)

  • Je ne pense pas que c'est possible en utilisant uniquement CSS. Vous aurez à détecter défilement (et à l'heure actuelle considérée élément) afin de parvenir à cet effet (CSS autant que je sache, ne prend pas en charge la détection de position à partir d'un défilement de la page). Aussi quelques images faites défiler jusqu'à certain point, et puis ils "stop" lorsque certains de défilement se produit. Cela ne vous donne une option pour certains type de script la détection de ces cas, et CSS ne donner que pour vous. Javascript est prévu pour le traitement, le CSS est uniquement pour l'affichage des éléments et certaines interactions fondamentales (comme plane). Aussi, que le lien que vous avez fourni effectivement utilisé jQuery pour la réalisation de cet
InformationsquelleAutor Pawan | 2013-11-16
  1. 13

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

    Pour produire un très de base de la parallaxe défilement effet, l'exemple suivant est suffisant. Notez que le navigateur préfixes, réserves, etc. n'ont pas été abordés. CSS les valeurs marquées avec /* e.g. */ peut être changé dans le concepteur de la discrétion.

    Voir mon fourche stylet 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 petite correction KitKat réponse:
    Il semble que l'on n'a pas besoin de transform-style:preserve-3d (au moins dans google Chrome), et que l'effet plutôt dépend du corps overflow:auto. Supprimer ce et la parallaxe échoue.

    • C'était une vieille question, mais je vais accepter votre réponse car c'était le plus proche d'être précises, même si ce n'est le premier.
    • merci!!!!
    • Le stylo ne fonctionne pas dans Firefox
    InformationsquelleAutor chharvey
  2. 14

    La recherche de la parallaxe pur css et en cliquant sur le premier résultat de CodePen (le deuxième résultat est la page en cours :), en est un bon exemple afficher avec fixe et défilement origines. Pour le record, je place le code source ici, de fournir un soutien pour Chrome, Safari et Opera, trop.

    L'exemple semble avoir deux types de milieux:

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

    En outre, l'effet de défilement semble dépendre du réglage transform-style: preserve-3d de body pour fonctionner correctement. (IE n'arrive pas à support transform-style, par la manière.)

    Enfin, différente de la vitesse de défilement peut être réalisé en modifiant transform de la propriété, comme les deux img éléments 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>

    • Cet exemple de code source aurait vraiment bénéficié de la réduction à l'essentiel.
    • Cet exemple est difficile à mettre en œuvre dans les pages existantes. Notez que le <html>-conteneur ne défile pas ici, mais le corps. Aussi tous les éléments jusqu'à la diapositive réelle ont height: 100% ensemble.
    • Je suis en train de travailler sur ce sujet maintenant, revenir voir ma réponse ci-dessous.
    InformationsquelleAutor KitKat
  3. 6

    Vous devriez être en mesure d'obtenir au moins un effet partiel en utilisant les transitions CSS. Cependant, comme Alejandro mentionné, le CSS ne détecte pas de défilement.

    Prendre un coup d'oeil à "Cool Effet de Défilement Parallaxe - dans le plus Pur CSS3!" (http://css.dzone.com/articles/cool-parallax-scrolling-effect) pour un exemple.

    La clé est d'utiliser les liens des pages internes. Ainsi, au lieu de défilement, l'utilisateur peut cliquer sur un lien de la page et de la page, puis faites défiler vers le haut/vers le bas à la nouvelle section. Comme la page défile, les transitions de fournir à l'effet de parallaxe.

    InformationsquelleAutor tjameswhite
  4. 1
    <!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>

    Ici est un codepen

    InformationsquelleAutor Anand Rockzz
  5. 0

    Oui, Si vous voulez une base simple effet de parallaxe puis CSS3 @keyframes règle serait suffisant(pas de parallaxe) mais encore une fois comme les autres mentionné, si vous souhaitez utiliser la parallaxe au maximum puis à l'aide de javascript est un must. J'ai de toute façon de vous donner les liens pour les deux manières. N'hésitez pas à consulter les deux et utilisez ce que vous voulez

    Pur CSS3 :

    http://jasonlau.biz/home/css/parallax-effect-using-only-css-with-no-javascript /* avec des 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/

    Espère que cela a aidé

    • ses pas jquery qui est un must, mais le javascript. skrollr, par exemple, est relativement facile de la bibliothèque de la parallaxe défilement (et plus) qui n'utilise pas jquery.
    • Merci pour la correction de brochet. Obligé
    InformationsquelleAutor Nikhil Nanjappa
  6. 0

    L'ADN de la Parallaxe /CSS images clés de la Parallaxe de l'Animateur

    Cette parallaxe utilise la norme CSS animation (à l'aide de @keyframes à la règle) pour définir des effets de défilement. Vous n'avez pas besoin de javascript connaissances.

    Le seul besoin est d'inclure 2 configuration-moins les fichiers javascript (jquery + ADN de la Parallaxe CSS du plugin) qui va automatiquement exécuter @images clés d'animation sur l'élément que vous faites défiler...

    InformationsquelleAutor elixon