Focus sur div, lentement, progressif, avec animation

**westernz** · 21/06/2017, 19h30

Bonjour.

J'aimerai simplement que le focus soit moins brutal.

Sans Jquery

Code html :

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

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

**danielhagnoul** · 21/06/2017, 23h06

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

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

**westernz** · 21/06/2017, 23h36

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

**NoSmoking** · 22/06/2017, 18h33

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 !

**westernz** · 22/06/2017, 23h15

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.

Focus sur div, lentement, progressif, avec animation

JavaScript

Discussions similaires

Partager

Partager