Discussion :

[dhillig]

Bonjour à tous,
Je travaille actuellement sur une page qui s'ouvre sur une vidéo plein écran (background) avec une barre des menus et un lien "enter" dont le code est le suivant

Code html :

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

<a href="#"><img src="img/2.jpg"  alt="" width="960" height="320" class="center"/></a>

(exercice)
Y'a t'il moyen de faire apparaître la barre des menus en fondu (opacité) 5 secondes après avoir ouvert le site, et pour le coup faire disparaître l'image "enter" pendant cette durée ??? (car ça doublonne
Voici le body (qui rappellera qq souvenirs à certains : )

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
<div id="header">
 
<div class="menu" id="menu">
  <a href="#entete">Acceuil</a>
    <a href="#main" class="menubutton">Green</a>
    <a href="#img2" class="menubutton">Blue</a>
    <a href="#img3" class="menubutton">Blue</a>
    <a href="#img4" class="menubutton">Blue</a>
    <a href="#img2" class="menubutton">Blue</a>
    <a href="#img6" class="menubutton">Blue</a></div>
<header class="headermobile mobile col-12">
    <button id="releaseMenu" ></button>
    <nav class="menu menumobile">
    <a href="#main" class="menubutton">Green</a>
    <a href="#img2" class="menubutton">Blue</a>
    <a href="#img3" class="menubutton">Blue</a>
    <a href="#img4" class="menubutton">Blue</a>
    <a href="#img2" class="menubutton">Blue</a>
    <a href="#img6" class="menubutton">Blue</a>
    </nav>
 
</div><!-- #header -->
 
<div id="container">
<a href="#"><img src="img/2.jpg"  alt="" width="960" height="320" class="center"/></a>
<div id="video">
</div>
<div class="section-un"></div>
<div id="footer"></div>
</div>

Merci pour votre aide et bonne soirée !
dh

[dhillig]

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
<div id="header"> 
<div class="menu" id="menu">
  <a href="#entete">Acceuil</a>
    <a href="#main" class="menubutton">Green</a>
    <a href="#img2" class="menubutton">Blue</a>
    <a href="#img3" class="menubutton">Blue</a>
    <a href="#img4" class="menubutton">Blue</a>
    <a href="#img2" class="menubutton">Blue</a>
    <a href="#img6" class="menubutton">Blue</a></div>
<header class="headermobile mobile col-12">
    <button id="releaseMenu" ></button>
    <nav class="menu menumobile">
    <a href="#main" class="menubutton">Green</a>
    <a href="#img2" class="menubutton">Blue</a>
    <a href="#img3" class="menubutton">Blue</a>
    <a href="#img4" class="menubutton">Blue</a>
    <a href="#img2" class="menubutton">Blue</a>
    <a href="#img6" class="menubutton">Blue</a>
</nav>
</div><!-- #header -->
<div id="container">
<a href="#"><img src="img/2.jpg"  alt="" width="960" height="320" class="center"/></a>
<div id="video">
</div>
<div class="section-un"></div>
<div id="footer"></div>
</div>

[dhillig]

Avec un @keyframe logoAp et une animation: logoAp 5s 1, cela devrait le faire
Bon week-end,
dh