Sujet Précédent Sujet Suivant

Slider personalisé problème avec event 'wheel'

Fermé
JsWorker Messages postés 1 Date d'inscription samedi 14 janvier 2023 Statut Membre Dernière intervention 14 janvier 2023 - Modifié le 15 janv. 2023 à 00:04
utub Messages postés 117 Date d'inscription dimanche 29 avril 2012 Statut Membre Dernière intervention 15 janvier 2023 - 15 janv. 2023 à 00:08

Bonjour,

Je tente de faire un slider vertical personnalisé.

Mon but est d'utiliser l'événement "wheel" pour animer mon slider.

Donc j'ai placé un slider à gauche et l'autre à droite avec un cadre "frame" au milieu de chaque slider et au scroll top ou bottom chaque image doit se centrer au milieu de le frame.

ps: les sliders se correspondent mais son inversé.

Problème n°1: je ne réussit pas à déplacé mes images responsivement car je déplace les images sur un translateY avec une valeur en dur, j'ai essayé de récupérer le height de chaque image avec getBoundingClientRect().height mais compliqué car quand l'image superpose le frame elle change de taille (problème n°3)

Problème n°2: Mes images ne s'aligne pas correctement au centre de le frame surement lié à la valeur en dur donné pour le déplacement en Y multiplier par la position du scroll..

Probleme n°3:  La transition de l'image hors de la frame "width 75%" a quand elle superpose la frame "width 90%" donne un effet de glitch lié encore a la valeur de translation en Y..

C'est la première fois je j'utilise l'event "wheel" et c'est plus compliqué ce ça en a l'air j'ai besoin d'aide cela fait déjà plusieurs jours que j'essaye d'améliorer mon scroll j'ai réussi plusieurs choses mais là je sèche..

J'ai également pensé à juste écouter l'event "wheel" si e.DeltaY > 0 c'est top et sinon bottom et justement au lieu de laisser le défilement au juger du scroll donner directement la valeur de translate en Y pour qu'à chaque scroll le déplacement soit contrôlé comme quand on appuie sur un button classique, j'y travaille dessus de côté.

Voici le lien du codesandbox ce sera plus explicite : https://codesandbox.io/s/staging-pine-f9r58n

essaye sur une taille type 1920 * 1080, car les valeurs en dur du translateY empêche un responsive correct (problème n°1)

pour le moment...

Si vous avez d'autres idées ou solutions différentes je suis à l'écoute

Merci pour votre temps.
Windows / Chrome 109.0.0.0

A voir également:

1 réponse

Réponse 1 / 1
utub Messages postés 117 Date d'inscription dimanche 29 avril 2012 Statut Membre Dernière intervention 15 janvier 2023 21
15 janv. 2023 à 00:08

Pour résoudre le problème n°1, vous pouvez utiliser une variable pour stocker la position actuelle de l'image plutôt que de définir une valeur en dur pour la translation. Voici un exemple de comment vous pourriez le faire:

let currentPosition = 0;

window.addEventListener("wheel", function(event) {
  if (event.deltaY > 0) {
    // scrolling down
    currentPosition -= 50;
  } else {
    // scrolling up
    currentPosition += 50;
  }
  document.querySelector(".left").style.transform = "translateY(" + currentPosition + "px)";
});

Pour résoudre le problème n°2, vous pouvez utiliser JavaScript pour calculer la hauteur de l'image et l'aligner au centre de la frame en utilisant cette valeur. Voici un exemple de comment vous pourriez le faire:

let frameHeight = document.querySelector(".card-frame").clientHeight;
let imageHeight = document.querySelector(".left").clientHeight;
let imageOffset = (frameHeight - imageHeight) / 2;

document.querySelector(".left").style.top = imageOffset + "px";

Pour résoudre le problème n°3, vous pouvez utiliser une transition CSS pour lisser la transition entre les différentes tailles d'image. Voici un exemple de comment vous pourriez le faire:

.left {
  transition: width 0.5s ease;
}

Cependant, c'est juste un exemple, il peut y avoir des erreurs de syntaxe ou des erreurs dans le code, je vous recommande de vérifier que cela fonctionne correctement dans votre environnement de développement .
0

Discussions similaires

rap français mp3 gratuit
skid-96 -
bms19 -

16 réponses