J'ai essayé d'expérimenter la parallaxe et je suis parti de zéro pour comprendre les éléments essentiels de cette magie. Pour vous donner un exemple que j'aime utiliser comme inspiration, vous pouvez le voir à ce lien ici à la section "Photos".
Le dernier code est en bas de la page avec des informations connexes. Pour avoir une vue d'ensemble de la question, consultez le reste des détails.
Les parties essentielles que je connais déjà sont les suivantes scrollTop() de la $window et le offsetTop de l'élément sont importantes pour appliquer l'effet de parallaxe sur un élément DOM ainsi que sur un factor pour la sensibilité de l'effet à la vitesse de défilement. Le résultat final devrait être une formule qui calculera la vitesse de défilement de l'image. translateY ou translate3d coordonnées en pixels ou en pourcentage.
J'ai lu sur internet que la propriété CSS translate est plus rapide que, par exemple, top de position: absolute et je préférerais aussi utiliser translate en combinaison avec TweenMax GSAP . Le mouvement de la parallaxe sera donc très fluide. Mais si seulement la propriété css translate est suffisant, c'est bien aussi. J'ai vu des exemples qui utilisaient TweenMax, c'est pourquoi je l'utilise pour l'instant.
JS
J'ai codé les éléments de base :
var win = $(window);
var el = $('#daily .entry').find('figure');
win.scroll(function() {
var scrollTop = win.scrollTop();
var parallaxFactor = 5;
el.each(function() {
var image = $(this).find('img');
var offsetTop = $(this).offset().top;
// This is the part where I am talking about.
// Here should be the magic happen...
});
});J'ai donc codé le code ci-dessus, mais cela ne fait rien, bien sûr. Voir le CodePen du code ci-dessus ici . Il n'y aura que le journal de la console scrollTop et offsetTop . Comme mentionné auparavant, je ne connais que les parties essentielles comme scrollTop et offsetTop pour appliquer l'effet de parallaxe. Ensuite, il faut créer une zone où l'effet de parallaxe sera déclenché et se produira, de sorte que les calculs ne seront effectués que pour les éléments situés dans la fenêtre d'affichage afin de conserver de bonnes performances. Après cela, il devrait y avoir des calculs effectués, mais je ne sais pas exactement quoi ou comment y parvenir. Ce n'est qu'une fois que j'aurai un chiffre définitif que je pourrai l'utiliser, par exemple, dans les éléments suivants TweenMax de Greensock comme ça :
TweenMax
TweenMax.to(image, 0.1, {
yPercent: offsetPercent + '%',
ease: Linear.easeNone
});Formule de parallaxe
Si je cherche à obtenir la formule, j'arrive à quelque chose comme ceci (trouvé sur internet) :
var viewportOffset = scrollTop - offsetTop + win.height();
var offsetPercent = ((viewportOffset / win.height() * 100) - 100) / parallaxFactor;
if (viewportOffset >= 0 && viewportOffset <= win.height() * 2) {
TweenMax.to(image, 0.1, {
yPercent: offsetPercent + '%',
ease: Linear.easeNone
});
}Mais si je suis honnête, je ne sais pas ce que cela fait exactement, ou pourquoi cela devrait/pourrait être ainsi. J'aimerais le savoir, afin de comprendre l'ensemble du processus de création de la parallaxe. Les fonctions de scrollTop() , offsetTop et $(window).height() sont claires pour moi, mais ce que l'astuce derrière la formule est, est la partie que je ne comprends pas.
Mises à jour
Mise à jour 1
@Scott a signalé que le site d'inspiration utilise un plugin appelé scrollmagic.io mais je suis très curieux de savoir comment je peux créer un parallaxe par moi-même sans utiliser de plugin. Comment cela fonctionne et comment le réaliser. En mettant l'accent sur la formule, pourquoi je devrais faire ceci ou cela et ce qui sera calculé exactement, parce que je ne comprends pas et je veux vraiment le savoir, afin que je puisse utiliser cette connaissance à l'avenir lors de l'application d'un effet de parallaxe.
Mise à jour 2
Le jour dernier, j'ai essayé de comprendre ce que fait exactement le bout de code suivant. Je parle de celui-là :
var viewportOffset = scrollTop - offsetTop + win.height();Après quelques bonnes sessions de débogage, je pense que j'ai trouvé la solution. Donc scrollTop est la quantité de pixels que vous avez fait défiler vers le bas de la page et qui sont cachés à la vue. offsetTop est la position de départ de l'élément dans le DOM et $(window).height est la hauteur de la fenêtre d'affichage - la partie qui est visible dans le navigateur -.
Voilà ce que je pense que cette formule fait :
Définissez le point zéro au point de départ de l'élément. Par exemple, lorsque scrollTop est égal à 0 et l'élément commence à 240px à partir du haut, alors la formule est : 0 moins 240 est -240 . La position actuelle du défilement est donc inférieure au point zéro. Après un défilement de 240px vers le bas, la formule donnera 0 car, bien entendu, 240 moins 240 égale 0 (zéro). Ai-je raison ?
Mais la partie que je ne comprends pas encore est pourquoi + win.height . Si nous revenons à la formule ci-dessus (à la mise à jour 2) et que le scrollTop est égal à zéro, alors l'indicateur $(window).height est l'espace entre 240px et le bas de la fenêtre d'affichage. Lorsque l'on fait défiler la page vers le bas, la quantité de pixels augmente au fur et à mesure du défilement, ce qui n'a aucun sens pour moi. Si quelqu'un peut expliquer quel pourrait être le but de ceci, ce serait bien. Je suis très curieux. La deuxième partie de la formule pour calculer la parallaxe offsetPercent Je ne comprends toujours pas. En général le calcul de la force de la parallaxe sur le scroll.
Mise à jour 3 / 4
Conseillé par @Edisoni, j'ai marché ces derniers jours par les vidéos de Travis Neilson et je suis devenu beaucoup plus sage sur les fonctionnalités de base de la parallaxe. Un must pour tous ceux qui veulent creuser dans le parallaxe. J'ai utilisé les nouvelles connaissances sur la parallaxe pour faire fonctionner mon script ci-dessus :
var root = this;
var win = $(window);
var offset = 0;
var elements = $('#daily .entry figure');
if (win.width() >= 768) {
win.scroll(function() {
// Get current scroll position
var scrollPos = win.scrollTop();
console.log(scrollPos);
elements.each(function(i) {
var elem = $(this);
var triggerElement = elem.offset().top;
var elemHeight = elem.height();
var animElem = elem.find('img');
if (scrollPos > triggerElement - (elemHeight / 2) && scrollPos < triggerElement + elemHeight + (elemHeight / 2)) {
// Do the magic
TweenMax.to(animElem, 0.1, {
yPercent: -(scrollPos - elemHeight / 2) / 100,
ease: Linear.easeNone
});
} else {
return false;
}
});
});
}Cependant, le script ne fonctionne que pour une certaine partie des éléments et j'espère que quelqu'un pourra m'aider à ce sujet. Le problème est que cela ne fonctionne que pour les deux premiers éléments. Je soupçonne que l'"erreur" se situe en particulier après le AND && dans l'instruction if, mais je n'arrive pas à résoudre l'erreur. http://codepen.io/anon/pen/XKwBAB
Lorsque les éléments qui fonctionnent sur le déclencheur sont animés, ils sautent de quelques pixels vers le bas, je ne sais pas comment corriger cela. Le saut vers : 1.135% après le déclenchement de la gâchette. Il ne commence donc pas à 0%. J'ai déjà vérifié si je devais ajouter la propriété CSS translate au CSS et définissez le type de nombre à % mais cela ne fonctionne pas pour moi.
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);Dois-je utiliser le TweenMax .fromTo() au lieu d'utiliser la fonction .to() afin que je puisse également régler la position de départ ou est-ce que ma pensée à ce sujet est fausse et a une cause différente ?
Quelque chose comme ça :
TweenMax.fromTo(animElem, 0.1, {
yPercent: triggerElement,
z: 1
}, {
yPercent: -(scrollPos - elemHeight / 2) / 100,
ease: Linear.easeNone
});En plus de cela, j'essaie de recréer l'effet du site que je voudrais utiliser comme source d'inspiration sans l'utilisation du plugin scrollMagic, mais je ne sais pas vraiment comment cela fonctionne, avec l'utilisation de deux objets différents qui sont animés.
Enfin, si quelqu'un pense que le code peut être mieux formaté, n'hésitez pas, j'aimerais entendre vos suggestions.
Mes questions actuelles portent sur les mises à jour 2 et 3/4 :
- Comment calculer les coordonnées y de la parallaxe pour que la "magie" opère ?
- Ai-je raison pour la mise à jour 2, selon laquelle le point zéro sera réinitialisé à l'offsetTop de chaque élément ?
- Pourquoi mon code ne fonctionne que pour les deux premiers éléments et pourquoi ils sautent quelques pixels plus bas si le style inline de
translatesera ajouté à l'élément animé ? Voir la mise à jour 3/4 pour toutes les informations.
