Peut-on rendre une image parallax responsive ?

Version imprimable

Bonjour à tous,
Je souhaiterais rendre responsives mes images parallax dont voici les CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.parallax {
	position: relative;
	width: 100%;
	height: 1000px;
	margin-top: 0px;
	overflow: hidden;
	z-index: 9;
	margin-bottom: 0px;
}
.parallax img {
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	min-height: 100%;
	height: 1264px;
	object-fit: cover;
}
#parallax_bloc {
			position: absolute;
			width: 50%;
			margin-top: 120px;
			margin-left : 50px;
			color: black;
			padding: 20px;
			border: none;
			float: left;
			font-family: 'Raleway', Arial, sans-serif; font-size: 2em;			
}
 
 
#parallax_bloc h1 {
	color: #CC0066;
	font-family: 'Alfa Slab One', cursive, Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-size: 10vw;
	display: inline;
	line-height: 80%;			
 
}
#parallax_bloc h2{
		color: black;
		font-family: 'Raleway', Arial, sans-serif; font-size: 20px;
		line-height: 30px;	
		margin-top: 30px
}

Est-ce possible ?
Tout sera en ligne ce soir ( ;) jreaux62) sur :
http://lapagetest.fr
Il y a bien ce site :
https://ihatetomatoes.net/make-paral...te-responsive/
mes les codes rentrent en conflits avec mes CSS :calim2:
Bon après-midi et MERCI !
dh

02/12/2021, 17h43
NoSmoking

Bonjour,

Citation:

Tout sera en ligne ce soir ...

et disparaitra même avant :mrgreen:

Citation:

Est-ce possible ?
(...)
Il y a bien ce site :

donc oui c'est possible ;)
02/12/2021, 17h53
dhillig

Bonjour NoSmoking,
Je peux faire un truc avec mes CSS ou je suis obligé de passer par du js ?
Merci,
dh
02/12/2021, 18h09
dhillig

Je pense avoir tout testé, c'est le fichier main.css qui me fout dedans.
Et j'ai tenté de le décrypter. Dur dur !!!
02/12/2021, 18h17
dhillig

C'est donc pas du js ;)
Pas de problème de lib.
Mais je suis largué tout de même :calim2:

C'est cette parti du code qui me pause problème :weird:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
body, html {
	height: 100%;
	min-height: 100%;
	background-color: #000000;
}
body {
 
}
.no-js {
	padding-top: 106px;
}
h2 {
	margin-top: 0;
}
.loading {
	background: url('../img/ico_loading.gif') no-repeat center center;
}
section {
	min-width: 960px;
	opacity: 0;
}
.loaded section,
.no-js section {
	opacity: 1;
	-webkit-transition: opacity 300ms ease-out;
	-moz-transition: opacity 300ms ease-out;
	transition: opacity 300ms ease-out;
}
main {
	overflow-x: hidden;
}
#preload {
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
.bcg {
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	height: 100%;
	width: 100%;
}
 
.hsContainer {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
 
.hsContent {
	max-width: 700px;
	position: absolute;
	left: 50%;
	top: 50%;
}
	.hsContent h2  {
		color: #fff8de;
		background-color: rgba(0,0,0,0.5);
		padding: 10px 5px;
		font-size: 35px;
		line-height: 38px;
		margin-bottom: 12px;
	}
	.hsContent p {
		width: 400px;
		color: #b2b2b2;
	}
	.hsContent a {
		color: #b2b2b2;
		text-decoration: underline;
	}
 
/* Slide 1 */
#slide-1 .bcg {background-image:url('../img/bcg_slide-1.jpg')}
#slide-1 .hsContent {
	bottom: 200px;
	top: auto;
}

donc mon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
	        <section id="slide-1" class="homeSlide">
	        	<div class="bcg" 
	        		data-center="background-position: 50% 0px;" 
	        		data-top-bottom="background-position: 50% -100px;" 
	        		data-anchor-target="#slide-1"
	        	>
		        	<div class="hsContainer">
			    		<div class="hsContent" data-center="bottom: 200px; opacity: 1" data-top="bottom: 1200px; opacity: 0" data-anchor-target="#slide-1 h2">
				    		<h2>Simple parallax scrolling is...</h2>
			    		</div>
		        	</div>
	        	</div>
		    </section>

Donc mon
HTML n'est pas stylé...:roll:
Au cas où... MERCI !
dh

04/12/2021, 18h08
dhillig
Bonsoir,
Ce sont ces CSS qui rendent mon site "noir" (couleur du body) :
Code:

1 2 3 4 5 6 7 8 section { min-width: 960px; opacity: 0; } main { overflow-x: hidden; }
Sans celles-ci, j'ai donné une hauteur et une largeur à la div

Code:

#slide1

L'image s'affiche bien mais je n'ai pas l'effet "rebondi" du parallax.
J'ai laissé les CSS de la démo sur la page index.
Le site est en ligne.
Merci beaucoup,
dh
09/12/2021, 10h10
dhillig

Bonjour à tous,
Oui, les div deviennent transparentes :

Code:

opacity: 0;

Cela ne m'aide pas à comprendre le manque de "bounce" de mon image parallax.
Auriez-vous une idée ?
Bonne journée,
dh