Retourner à la page d'accueil de TJS

Script notif : Affichage de notification

Affichage de notification avec effet d'animation
Partie II : L'interactivité / Chapitre 12 : Manipuler le document / Page 180

Exécution du script

Emulation de la console

Code source

<html><head><style type="text/css">    div {      padding:5px;      margin:5px;    }    div#notification {      border:1px solid #999;      background: #ccc;      box-shadow: 3px 3px 3px #999;      font-weight: bold;      width:120px;    }    .fixed { position:fixed; }    .top   { top:10px; }    .right { right:10px; }        .animate {      animation: animFromRight 0.5s 1;    }    @keyframes animFromRight {      from { right: -150px; }      to   { right:10px; }    }</style><title>Ajout d'une notification à l'écran</title></head><body>  <h1>Notifications animées</h1>  <p>Utilisation de createElement() et appendChild()</p>  <p>Animation CSS via @keyframes</p></body><script type="text/javascript">    /* Après la balise </body>, le document est prêt à être manipulé */    var notification=document.createElement("div");    notification.setAttribute("id", "notification");    notification.innerHTML="Voici notre bloc de notification";    notification.className="fixed top right animate";    document.body.appendChild(notification);</script></html>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...
Le 12/11/2019 04:17:29 sur php7 en 20.37 ms