DIV scrollable sur fond d'image

Version imprimable

09/03/2020, 17h25
carjo

DIV scrollable sur fond d'image

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
10/03/2020, 11h03
NoSmoking

Bonjour,

Citation:

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 !

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:

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:

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,

12/03/2020, 10h48
NoSmoking

Citation:

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.
12/03/2020, 16h53
carjo

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

Citation:

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

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

Voici un exemple simplifié de ce que je vois

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

13/03/2020, 11h28
carjo

Citation:

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

Désolé, j'ai du mal à expliquer parce qu'il me manque des infos sur ce comportement d'éléments.

Je vais tester ton code et je te reviens là-dessus.

Merci beaucoup.
16/03/2020, 18h42
carjo

Bonjour

J'ai dû adapter une partie de votre code à mon contexte particulier, incluant un menu Sidebar, mais ça fonctionne très bien.

Merci beaucoup pour votre aide.