Arrotondamento dello scrolling parallasse di un'immagine di sfondo

Ho fatto un po 'di ricerche e ho scritto un po' di jQuery che fa scorrere lo sfondo con un passo leggermente diverso rispetto al primo piano, creando un effetto di parallasse mentre scorri lungo un sito web.Arrotondamento dello scrolling parallasse di un'immagine di sfondo

Purtroppo è un po 'a scatti.

Ecco il layout di base del HTML:

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

Ecco il CSS:

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

Ecco il JS:

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

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

Abbastanza semplice, ma il mio problema è che è un po 'a scatti quando si scorre, anche su un potente computer.

C'è un modo per rendere uniforme la parallasse di sfondo?

fonte

2013-04-03 Chuck Le Butt

Hey, controlla questo post del blog su di parallasse: http://www.html5rocks.com/en/tutorials/speed/parallax/ – skndstry

Aggiungi proprietà transizione al vostro CSS in modo che possa essere accelerato dalla GPU in questo modo:

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

fonte

2014-06-04 14:12:58 mcmonkeys1

Questo è quello –

La differenza è minore, ma questo è quello che sono andato per –

Provare a animare una proprietà che può essere accelerata dall'hardware nei browser che la supportano. Invece di modificare la proprietà background-position, utilizzare uno img in posizione assoluta e quindi modificare la sua posizione utilizzando le trasformazioni CSS.

Dai uno sguardo allo stellar.js. Quel plugin ti dà la possibilità di animare usando le trasformazioni CSS in browser capaci (stellar.js ti permetterà di animare le immagini di sfondo, con l'avvertenza che non funzionerà altrettanto agevolmente sui dispositivi mobili). Fa anche uso di requestAnimationFrame, che significa meno CPU, GPU e utilizzo della memoria.

Se si ritiene che un overkill di plug-in, è possibile controllare almeno l'approccio adottato e adattarlo alle proprie esigenze.

fonte

2013-04-03 13:55:07 CherryFlavourPez

Provare a cambiare il .css in .animate. quindi, invece di impostare il CSS su valori rigidi, puoi animarlo.

$(window).scroll(function() { 
    $("body").animate({"background-position":"50% " + ($(this).scrollTop()/2) + "px"},{queue:false, duration:500}); 
});

NB: aggiungere script di http://snook.ca/technical/jquery-bg/jquery.bgpos.js

Si prega di tenere a mente che non ho provato, fatemi sapere se funziona.

immagini Animate Background: http://snook.ca/archives/javascript/jquery-bg-image-animations

Demo: http://snook.ca/technical/jquery-bg/

fonte

2013-04-03 13:55:22

In generale, la [funzione jQuery animate()] (http://api.jquery.com/animate/) non può essere utilizzata su un valore multiparte come 'background-position'. Gli stili individuali 'background-position-x' e' background-position-y' non sono stati standardizzati e non sembrano essere supportati da tutti i browser. –

Sì, e come funzionerebbe un sito di parallasse in IE6? Non molto bene, posso immaginare. –

'background-position-x' e' background-position-y' non sono supportati dalle ultime versioni di Firefox e Opera. Sono stati eliminati dalle specifiche CSS3. Non è sicuro se saranno nelle specifiche CSS4. Come attualmente scritto, il codice sopra non funziona in nessun browser. –

volte non possiamo usare un <img> elemento all'interno di un div per alcuni motivi come un border-radius potrebbe smettere di funzionare o un width più grande rispetto al genitore. Stavo affrontando tutte queste questioni e la soluzione migliore che ho trovato è stato quello di utilizzare:

transition: 0.5s ease; 
transform: translate3d(0, 0, 0);

mi sono davvero bello e liscia effetto di parallasse utilizzando GPU.

fonte

2014-07-21 21:01:12 tuliomarchetto

Non male. –

Impostare il css del corpo come di seguito:

body { 
    background-image: url(images/bg.jpg); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: 0 0; 
}

Poi utilizzando Javascript solo ottenere il pageYOffset a pagina scorrimento, e impostarlo per la posizione dell'immagine di sfondo del corpo di fondo, come di seguito:

window.addEventListener('scroll', doParallax); 
function doParallax(){ 
    var positionY = window.pageYOffset/2; 
    document.body.style.backgroundPosition = "0 -" + positionY + "px"; 
}

Basta cassa my post qui: http://learnjavascripteasily.blogspot.in/

fonte

2016-02-16 05:18:48 ShwethaU

Sto cercando di usarlo su una classe: document.getElementsByClassName ("parallasse"). Style.backgroundPosition = "0 -" + positionY + "px"; ma non sta funzionando. Qualche consiglio? – Rafael

document.getElementsByClassName ("parallasse") fornirà una serie di elementi dom. Non è possibile utilizzare direttamente la proprietà 'stile' direttamente sulla matrice di elementi. Quindi prova a usare 'document.getElementsByClassName ("parallax") [0] .style.background Position', se c'è un solo elemento che ha una parallasse di classe ' – ShwethaU

Ok. ShwethaU, grazie. – Rafael

Per renderlo liscio messo l'immagine su un div separato e spostare l'intera elem ent usando transform: translate - allora otterrai risultati davvero fluidi.

Ecco un piccolo esempio facendo qualcosa di un po 'diverso, ma utilizzando tradurre per dare l'idea:

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

e il violino: http://jsfiddle.net/piotku/kbqsLjfL/

dall'interno di javascript (utilizzando jQuery) si woul d dover usare qualcosa come:

$(".element").css("transform", 'translateY(' + ($(this).scrollTop()/2) + 'px)');

o in vanillaJS:

backgroundElement.style.transform = 'translateY(' + ($(this).scrollTop()/2) + 'px)';

fonte

2017-03-29 06:25:11 Picard

Non penso che funzionerà bene come immagini. Prova a metterlo in un violino (non solo la trasformazione che hai pubblicato) e penso che vedrai che si comporterà in modo strano. –

Inoltre, l'uso dispari dei prefissi. Probabilmente è meglio evitare di usarli in questi giorni e affidarsi invece a Autoprefixer. –

@Chuck Le Butt c'è un collegamento per violino nella risposta :) e hai ragione riguardo ai prefissi - stavo creando rapidamente un esempio funzionante – Picard

Arrotondamento dello scrolling parallasse di un'immagine di sfondo

risposta

Problemi correlati