Parallax

Eritou Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   -  
Eritou Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   -
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   Statut Membre Dernière intervention   527
 
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 110 Date d'inscription   Statut Membre Dernière intervention   4
 
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   Statut Membre Dernière intervention   527
 
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 110 Date d'inscription   Statut Membre Dernière intervention   4
 
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   Statut Membre Dernière intervention   527
 
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 110 Date d'inscription   Statut Membre Dernière intervention   4
 
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   Statut Membre Dernière intervention   527
 
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 110 Date d'inscription   Statut Membre Dernière intervention   4
 
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