DIV scrollable sur fond d'image

**carjo** · 09/03/2020, 18h25

Bonjour,

À la suite de nombreuses recherches sans succès, incluant le fichier-source de la page, je souhaite savoir quelle est la fonctionnalité qui permet de bouger la div sur cette page:

http://www.alainlefevre.com/press.php?lg=EN

Peut-on faire cela seulement avec ccs3 et html ?

Merci

**NoSmoking** · 10/03/2020, 12h03

Bonjour,

la fonctionnalité qui permet de bouger la div sur cette page

le défilement naturel d'une page est bien suffisant dans ce cas il me semble !

**carjo** · 10/03/2020, 20h33

Bonjour,

Ma question n'était pas précise.

Avec un scroll sur une div de base (normale), le scroll reste fixe et descend au fur et à mesure qu'on lit les infos, comme dans cet exemple:

Code html :

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

1
2
3
4
5
6
<div class="container" style="margin-left:auto;margin-right:auto;text-align:center;">
        <img  src="../images/toto.jpg" alt="" style="float:right; width:100%; height:100%" />									 
	        <div class="centered-right">
                 …
        </div>
</div>

Code CSS :

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
/* Container holding the image and text */
.container {
        position: relative;
	text-align:center;
}
 
.centered-right {
                position: absolute;
		margin-top:10px;
		margin-left:60%;
		width:35%;		
		text-align:center;
		max-height:90%;
		min-height:90%;
		overflow-x: hidden;
		overflow-y: scroll;
		font-size:12px;
		color:Black; 
		font-weight:normal;
		background: rgba(255,255,255,0.6);  
		padding-right:15px;
		padding-left:15px;
}

Dans le lien, la div n'a pas de scroll apparent et elle est «cachée» au bas de l'écran. C'est le cadre de la div entière qui se déplace du bas vers le haut afin de lire les infos.

De quelle façon peut-on cacher cette div au load de la page ?
Comment peut-on faire défiler une div sur la page sans scroll apparent comme dans le lien ?, car avec scroll=hidden, tout est figé.

En espérant être plus clair,

**NoSmoking** · 12/03/2020, 11h48

De quelle façon peut-on cacher cette div au load de la page ?

Dans le cas présent, il suffit de mettre un padding-top:100vh, par exemple, sur l'élément et le texte ne démarrera qu'en dessous de la « ligne de flottaison », bas de l'écran.

**carjo** · 12/03/2020, 17h53

Bonjour,

padding-top:100vh permet en effet d'être plus bas sur l'écran.

Par contre, la div du lien n'a pas de scroll, le seul scroll est placé sur la page html ou un parent. Sauf erreur de ma part, avec overflow-y:hidden, la div est figée.

De quelle façon peut-on faire «remonter» la div(sans contrôle de défilement) sur l'écran fixe (fond) afin d'avoir le même effet que dans ce lien ?

merci

**NoSmoking** · 13/03/2020, 10h46

Par contre, la div du lien n'a pas de scroll,(...)

j'ai vraiment du mal à comprendre ce que tu veux

Voici un exemple simplifié de ce que je vois

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Décalage contenu</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2054001">
<meta name="description" content="Décalage contenu vers le bas à l'ouverture de la page.">
<style>
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font: 1em/1.5 Verdana,sans-serif;
}
body {
  position: relative;
  background-color: #CDE;
  background-attachment: fixed;
  background-image: url(https://cyberzoide.developpez.com/misc/background12-1600x1200.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  color: #FFF;
  background: rgba(64,128,240,.6);
}
.chapitre {
  margin: calc(100vh - 5em) auto 0;
  padding: 1em;
  max-width: 60em;
  color: #FFF;
  background-color: rgba(0,0,0,.6);
}
.chapitre p {
  margin: 0;
  padding: 1em 1em 5em;
}
</style>
</head>
<body>
<main>
  <header>
    <h1>Titre de la page</h1>
  </header>
  <section class="chapitre">
    <h2>La lecture c'est ici ...</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna. Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet. Mauris consectetur lectus ut laoreet finibus. In gravida, massa eget tempus fringilla, eros nisi gravida massa, at accumsan massa nisl vel quam. Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.</p>
  </section>
</main>
<script>
const copy = document.querySelector(".chapitre p");
for (let i = 0; i < 10; i += 1) {
  copy.parentNode.appendChild(copy.cloneNode(true));
}
</script>
</body>
</html>

DIV scrollable sur fond d'image

CSS

Vue hybride

Discussions similaires

Partager

Partager