Discussion :

[dhillig]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
Bon après-midi et MERCI !
dh

[NoSmoking]

Bonjour,

Tout sera en ligne ce soir ...

et disparaitra même avant

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

donc oui c'est possible

[dhillig]

Bonjour NoSmoking,
Je peux faire un truc avec mes CSS ou je suis obligé de passer par du js ?
Merci,
dh

[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 !!!

[dhillig]

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

[dhillig]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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é...
Au cas où... MERCI !
dh