Sujet Précédent Sujet Suivant

Parallax

Fermé
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 24 nov. 2021 à 17:33
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 30 nov. 2021 à 15:01
Bonjour,
J'ai une image parallax mais celle ci se déforme en largeur. Je souhaiterais que la hauteur de la photo change selon la largeur.
Mes CSS : 
.parallax img {
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	min-height: 100%;
	height: 1264px;

Si je ne mets pas de hauteur, je n'ai plus d'effet parallax :/
Merci pour votre aide,
E.

5 réponses

Réponse 1 / 5
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
24 nov. 2021 à 18:57
Bonjour,

Tu peux essayer d'appliquer la propriété css 
object-fit: cover;
pour redimensionner l'image en conservant les proportions.
https://developer.mozilla.org/fr/docs/Web/CSS/object-fit
1
Réponse 2 / 5
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
24 nov. 2021 à 19:19
Bonsoir Pitet,
Merci, mais pour le coup mon image n'est plus responsive :/
Il n'y a pas une autre astuce ?
Merci beaucoup,
E.
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
24 nov. 2021 à 19:42
A l'aveugle j'ai un peu de mal à voir le problème de responsive avec l'utilisation de object-fit.
Aurais-tu un exemple complet (html + css + dimension de l'image) avec si besoin un peu plus de précision sur le problème rencontré ?

Sinon pour réaliser l'effet parallax avec une hauteur d'image définie, au lieu d'utiliser une balise img en position absolute, tu peux éventuellement définir l'image en tant que fond d'un élément avec les propriétés background-* (-image, -attachement, -position, -size, -repeat) comme proposé sur le premier exemple ici :
https://www.w3schools.com/howto/howto_css_parallax.asp
0
Réponse 3 / 5
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
24 nov. 2021 à 21:21
Le mieux c'est de voir le gabarit sur internet :
http://lapagetest.fr/
Merci pour ton aide !
E.
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
27 nov. 2021 à 10:11
Je ne vois pas de soucis à priori sur les images utilisées pour l'effet parallax, néanmoins celle-ci sont agrandies à cause de la hauteur fixe défini sur l'image (height: 1264px;).
Le conteneur .parallax par contre n'est pas responsive, notamment à cause de la hauteur fixe défini (height: 1000px;) et des enfants positionnés en absolute qui empêche ce conteneur de s'adapter à son contenu.
0
Réponse 4 / 5
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
29 nov. 2021 à 16:19
reBonjour Pitet,
Il n'y a donc aucun moyen de rendre un effet parallax responsive ?
Bonne fin de week-end,
E.
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
30 nov. 2021 à 12:45
Si mais le plugin utilisé ne semble pas le plus simple pour rendre l'effet parallax de manière responsive (le position absolute et les hauteurs fixes ne facilite pas la tâche).
As tu vraiment besoin d'utiliser le plugin js jquery.parallax-scroll.js ? A priori ce plugin n'est pas mis à jour depuis plusieurs années et tu n'utilises pas les éventuelles options du plugin autres que celle indiqué dans l'exemple de la doc (data-parallax='{"y" : 230}), du coup est-ce qu'un parallax uniquement en css pourrait te convenir ?

Comme indiqué dans un précédent commentaire, tu peux t'inspirer des exemples sur w3schools ou chercher d'autres tutos/exemples pour réaliser un parallax responsive uniquement en css ou avec un plugin js plus récent :
https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
30 nov. 2021 à 15:01
Bonjour Pitet,
Je viens de chercher d'autres tutos/démos; je n'ai rien trouver qui ressemble à cet effet de rebondi. ET j'ai l'impression que de toutes façons, l'effet parallax pause problème en responsive (images cachées par le texte).
Merci pour ton aide,
E.
0