Focus sur div, lentement, progressif, avec animation

Version imprimable

Bonjour.

J'aimerai simplement que le focus soit moins brutal.

Sans Jquery

Code:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html><html><body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
<div id = "div_focus">Mon contenu</div>
<script>
window.onload = function() {
  window.location.hash = '#div_focus';
};</script></body></html>

Bonne journée

:salut:

Exemple d'une animation basique avec un peu de CSS3 :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
                
                /* CSS du test */
                
                main {
                        background-color: rgba( 160, 210, 190, 0.70 );
                        min-height: 20rem;
                        font-size: 3rem;
                        text-align: center;
                        padding: 0.3rem;
                }
                
                .fadeIn {
                        animation-duration: 6s; /* 6 secondes */
                        animation-name: fadeIn;
                        animation-timing-function: ease-in;
                }
                
                @keyframes fadeIn {
                        from {
                                opacity: 0;
                        }
                        
                        to {
                                opacity: 1;
                        }
                }               
                
                /* Fin CSS du test */
 
  </style>
</head>
<body>
	<main class="fadeIn">
		<h2>Bonjour !</h2>
		<p>Une animation basique avec un peu de CSS3</p>
	</main>
</body>
</html>

21/06/2017, 23h36
westernz

Merci c'est un début intéressant.

Un peu d'aide pour transformer ce code ne serait pas de refus.

Je suppose que je vais devoir en autre chose modifier le fade en scroll ?

Bonne journée
22/06/2017, 18h33
NoSmoking

Bonjour,
si j'ai bien compris ce que tu cherches à faire est un scroll vers l'élément ciblé mais de façon progressive ?

Sans jQuery il va te falloir mettre pas mal la main à la pâte !
22/06/2017, 23h15
westernz

Bon...

Ok, pour ce site je veux bien utiliser Jquery, vais voir si c'est activable, c'est un cms donc rien n'est garanti.

Je vais quand même tenter deux trois modif du code CSS au cas où j'y arrive.

Merci.