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

[dhillig]

Bonsoir,
Ce sont ces CSS qui rendent mon site "noir" (couleur du body) :

Code :

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

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 :

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

#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

[dhillig]

Bonjour à tous,
Oui, les div deviennent transparentes :

Code :

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

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