Discussion :

[labarre2002]

Bonsoir

Je m ' excuse pour le titre je trouve pas mieux .Je désire réaliser cette animation

https://dribbble.com/shots/7047827-A...ader-Animation

voici mon code

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
 
 
<main class="content">
 
  <div class="left lateral">
 
    </div>
  <div class="wrapper-bar">
    <div class="bg-picture">
      <img src="https://images.unsplash.com/photo-1772289935157-f64bc178b47d?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NzkzODE0NTJ8&ixlib=rb-4.1.0&q=85">
    </div>
 
    <div class="bar one">
      <div class="letter">
        <span>a </span>
      </div>
    </div>
     <div class="bar two">
       <div class="letter">
        <span>b </span>
      </div>
    </div>
     <div class="bar three"> 
       <div class="letter">
        <span>c </span>
      </div>
    </div>
 
     <div class="bar four">
       <div class="letter">
        <span>d </span>
      </div>
    </div>
 
 
  </div>
  </main>

mon code CSS:

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
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
 
html{
  height:100vh;
}
 
.content{
  width:100vw;
  height:100vh;
  display:flex;
  overflow:hidden;
}
 
.left{
  width:30vw;
  height:100%;
  background-color:#a39300;
}
.wrapper-bar{
  width:70vw;
  height:100%;
  position:relative;
  display:flex;
}
 
.bg-picture{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
}
 
.bg-picture  img{
  width:100%;
  height:100%;
  object-fit:cover;
}
 
.bar{
  flex:0 0 25%;
  opacity:.5;
   z-index:2;
  }
.one{
  background-color:#dfada2;
}
 
.two{
  background-color:#f88779;
}
 
.three{
  background-color:#897471;
}
 
.four{
  background-color:#b3a3a3;
}

Mon est celui puis avoir une piste pour réaliser la première animation dans mon code c 'est le containeur avec la classe .wrapper-bar qui au début couvre entièrement l ' écran puis occupe prends la taille de

Code CSS :

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

width:70vw;

Merci.

[mathieu]

pour faire le modification de largeur, vous pouvez utiliser une variable css comme cela :

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
:root {
   --largeur : 100vw;
}
 
 
html:hover
{
	--largeur : 70vw;
}
 
.left{
  width: calc(100vw - var(--largeur));
}
.wrapper-bar{
  width: var(--largeur);
}

[labarre2002]

Merci pour ton méssage Mathieu

mais c'est justement ce que je ne veux pas faire, animer des width et des height pour des raisons de performance