Le lissage de la parallaxe défilement d'une image d'arrière-plan

J'ai fait un peu de recherche et écrit un peu simple de jQuery qui permet de faire défiler l'arrière-plan un peu différent rythme à l'avant-plan, créant un effet parallaxe comme vous le faites défiler vers le bas d'un site web.

Malheureusement c'est un peu saccadé.

Voici la structure de base de la HMTL:

<body>
    <section>
        Site content goes here.
    </section>
</body>

Voici le CSS:

body {
    background-image: url('../images/bg.png');
    background-repeat: repeat-y;
    background-position: 50% 0;    
}

Voici le JS:

$(window).scroll(function () {
    $("body").css("background-position","50% " + ($(this).scrollTop() / 2) + "px");
});

https://jsfiddle.net/JohnnyWalkerDesign/ksw5a0Lp/

Assez simple, mais mon problème, c'est que c'est un peu saccadée lorsque vous faites défiler, même sur un ordinateur puissant.

Est-il un moyen de rendre le fond de parallaxe animer en douceur?

Hey, consultez cet article de blog sur la parallaxe: html5rocks.com/en/tutorials/speed/parallax

OriginalL'auteur Chuck Le Butt | 2013-04-03

Ajouter des transition de la propriété CSS de sorte qu'il peut être accéléré par le GPU comme ceci:

body {
    background-image: url('../images/bg.png');
    background-repeat: repeat-y;
    background-position: 50% 0;    
    transition: 0s linear;
    transition-property: background-position;
}

C'est le seul
La différence est minime, mais c'est ce que je suis pour

OriginalL'auteur mcmonkeys1

6

Essayer d'animer un bien qui peut être accéléré par le matériel dans les navigateurs qui le supportent. Plutôt que de changer la background-position de la propriété, de l'utilisation d'un positionnement absolu img puis modifier sa position à l'aide de CSS transforme.

Prendre un coup d'oeil à stellar.js. Ce plugin vous donne l'option de l'animation à l'aide de CSS transforme en navigateur compatible (stellar.js vous permettra d'animer les images de fond, avec l'inconvénient de ne pas fonctionner aussi bien sur les appareils mobiles). Il permet également l'utilisation de requestAnimationFrame, ce qui signifie moins de CPU, du GPU et de la mémoire.

Si vous jugez un plugin overkill, vous pouvez vérifier au moins de sortir de l'approche et de l'adapter à vos besoins.

OriginalL'auteur CherryFlavourPez
3

Définir le css du corps comme ci-dessous:
```
body {
  background-image: url(images/bg.jpg); 
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0 0;
 }
```
Puis à l'aide de Javascript qui vient d'obtenir l'pageYOffset sur la page de défilement, et le mettre à l'arrière-plan position du corps, l'image de fond comme ci-dessous:
```
window.addEventListener('scroll', doParallax);
function doParallax(){
   var positionY = window.pageYOffset/2;
   document.body.style.backgroundPosition = "0 -" + positionY + "px";
}
```
Juste checkout mon post ici:
http://learnjavascripteasily.blogspot.in/

Je suis en train de l'utiliser sur une classe: document.getElementsByClassName("parallaxe").style.backgroundPosition = "0 -" + positionY + "px"; mais ça ne fonctionne pas. Toute la pointe?
document.getElementsByClassName("parallaxe") vous donne un tableau d'éléments dom. Vous ne pouvez utiliser directement "style" de la propriété directement sur le tableau des éléments. Donc essayez d'utiliser document.getElementsByClassName("parallaxe")[0].style.backgroundPosition', si il n'y a qu'un seul élément ayant la classe 'parallax'
Ok. ShwethaU, Merci.

OriginalL'auteur Shwetha
2

Parfois nous ne pouvons pas utiliser un <img> élément à l'intérieur d'un div pour certaines raisons, comme une border-radius peut cesser de fonctionner ou d'un width plus les parents. J'ai été confronté à toutes ces questions et la meilleure solution que j'ai trouvé est d'utiliser:
```
transition: 0.5s ease;
transform: translate3d(0, 0, 0);
```
Je me suis vraiment agréable et lisse l'effet de parallaxe à l'aide de GPU.

Pas un mauvais oeil.

OriginalL'auteur tuliomarchetto
1

Pour la rendre lisse placer l'image dans une div distinctes et déplacer l'ensemble de l'élément à l'aide de transformer, de le traduire - ensuite, vous aurez vraiment bon résultats.

Voici un petit exemple de faire quelque chose d'un peu différent, mais à l'aide de traduire pour vous donner l'idée:

HTML:
```
<div id="wrapper">
     <div id="content">Foreground content</div>
</div>
```
CSS:
```
@-webkit-keyframes MOVE-BG {
    0% {
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
    50% { 
        transform: translate(-250px, 0%);
        -webkit-transform: translate(-250px, 0%);
    }
    100% {
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
}

#wrapper {
    width: 300px;
    height: 368px;
    overflow: hidden;  
}
#content {
    width: 550px;
    height: 368px;
    background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
    text-align: center;
    font-size: 26px;
    color: #000;

    -webkit-animation-name: MOVE-BG;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
```
et le violon: http://jsfiddle.net/piotku/kbqsLjfL/

de javascript (à l'aide de jQuery), vous devez utiliser quelque chose comme:
```
$(".element").css("transform", 'translateY(' + ($(this).scrollTop() / 2) + 'px)');
```
ou dans vanillaJS:
```
backgroundElement.style.transform = 'translateY(' + ($(this).scrollTop() / 2) + 'px)';
```
Je ne pense pas que cela fonctionnera aussi bien que vous l'imaginez. Essayez de le mettre dans un violon (et pas seulement de la transformation que vous avez posté) et je pense que vous allez voir il va se comporter bizarrement.
Aussi, bizarre utilisation de préfixes. Probablement préférable d'éviter l'utilisation de ces jours, et en s'appuyant sur Autoprefixer à la place.
Le Cul il y a un violon lien dans la réponse 🙂 et tu as raison sur les préfixes - je viens de créer rapidement un exemple de travail
Oui, comme je l'ai dit, votre violon lien n'a pas vraiment d'expliquer la solution à ce problème. C'est juste une base de transformation, dont je ne suis pas sûr qu'ils vont travailler dans une parallaxe de la situation, mais peut-être que vous pourriez démontrer dans un violon. Aussi, je vois que vous avez adapté le code de cette question (stackoverflow.com/questions/21087518/...), qui est probablement pourquoi il a tant de bizarreries. Merci d'essayer.
Hein! J'ai fait ma propre violon et il fonctionne très bien en fait! jsfiddle.net/JohnnyWalkerDesign/ra90axjq

OriginalL'auteur Picard
0

D'essayer de changer le .css à .animate. donc au lieu de mettre le CSS en dur valeurs que vous pouvez l'animer.
```
$(window).scroll(function () {
    $("body").animate({"background-position":"50% " + ($(this).scrollTop() / 2) + "px"},{queue:false, duration:500});
});
```
NB: ajouter un script http://snook.ca/technical/jquery-bg/jquery.bgpos.js

Veuillez garder à l'esprit que je n'ai pas testé, laissez-moi savoir si cela fonctionne.

Animer des images d'arrière-plan : http://snook.ca/archives/javascript/jquery-bg-image-animations

Démo: http://snook.ca/technical/jquery-bg/

En général, le jQuery animate() de la fonction ne peut pas être utilisé sur une partie multi-valeur comme background-position. L'individu background-position-x et background-position-y styles n'ont pas été normalisées et ne semblent pas être pris en charge par tous les navigateurs.
Oui, et comment une parallaxe site dans IE6? Pas très bon que je peux imaginer.
background-position-x et background-position-y ne sont pas pris en charge par les dernières versions de Firefox et Opera. Ils ont été retirés de la CSS3 spec. On ne sait pas si ils vont être dans la CSS4 spec. Tel qu'il est actuellement rédigé, le code ci-dessus ne fonctionne pas dans n'importe quel navigateur.
Merci pour l'info! Et ce ne sera pas pris en charge?
Ha! Je n'ai pas l'intention de soutenir IE6 dans cette journée et l'âge, de toute façon 🙂

OriginalL'auteur Marc Uberstein

Vous devez vous connecter pour publier un commentaire.