Slider personalisé problème avec event 'wheel'
utub Messages postés 117 Date d'inscription Statut Membre Dernière intervention -
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
- Windows event log service must be running français
- Lire le coran en français pdf - Télécharger - Histoire & Religion
- Dernière version ccleaner gratuit français - Télécharger - Nettoyage
- Clé windows 8 - Guide
- Winrar 64 bits windows 10 français gratuit - Télécharger - Compression & Décompression
- Service spouleur - Guide
1 réponse
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 .