Batch Index du Forum
S’enregistrerRechercherFAQMembresGroupesConnexion
Répondre au sujet Page 1 sur 1
[HTML/CSS/JAVASCRIPT] Background animé
Auteur Message
Répondre en citant
Message [HTML/CSS/JAVASCRIPT] Background animé 
Salut à tous Mr. Green

J'ai fait un background animé pour l'un de mes projets que je vais d'ailleurs vous présentez bientôt Okay

Démo: http://flammrock.tk/demo


Code:
[lang=html5]<html>
  <head>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
      #background-icons {
        position: fixed;
        z-index: -12;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
      #background-icons:after {
        content: "";
        position: fixed;
        background: rgba(0, 0, 0, 0.4);
        z-index: -10;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }

      .iconS {
        z-index: -12;
        color: #07f;
      }

      /* Ceci est utilisé pour la démo, vous pouvez le supprimer lorsque vous l'adapterez sur votre site ou application web */
      @import url('https://fonts.googleapis.com/css?family=Roboto');
      html, body {margin: 0;padding: 0;}
      .container {
        position: fixed;
        display: block;
        top: 50%;
        left: 50%;
        width: 300px;
        padding: 75px 50px;
        background: #fff;
        font-family: 'Roboto', sans-serif;
        font-size: 24px;
        text-align: center;
        transform: translateX(-50%) translateY(-50%);
      }
      .container span {
        color: #f00;
      }
    </style>
  </head>
  <body>

    <div class="container">
      Créé par <span>Flammrock</span>
    </div>
    <div id="background-icons"></div>



    <script type="text/javascript">

      var iconS = {
        list:["email","thumb_up","language","query_builder",
        "info_outline","play_for_work","stay_current_portrait",
        "grade","vpn_key","print","chat_bubble","comment",
        "stop","sort_by_alpha","shuffle","snooze","web",
        "volume_up","volume_off","volume_mute","today",
        "toll","question_answer","translate","receipt",
        "done","tabe","hd","games","search","settings",
        "hearing","settings_voice","settings_bluetooth",
        "zoom_in","work","visibility_off","visibility",
        "videocam","volume_down","zoom_out","alarm_on",
        "dns","videocam_off","redeem","report_problem",
        "movie","room","mic_off","mic_none","pause",
        "radio","code","phone","open_with","shopping_cart",
        "store","error","lock_open","lock_outline",
        "add_alert","http","https","loop"],
        nb_iconS:10,
        first_spawn:true,
        getRandomIntInclusive: function(min, max) {
          min = Math.ceil(min);
          max = Math.floor(max);
          return Math.floor(Math.random() * (max - min +1)) + min;
        },
        add: function(i){
          var delay=0;
          if (iconS.first_spawn){delay=iconS.getRandomIntInclusive(-10000,10000);if(delay<0){delay=0;}}
          $("#background-icons").append('<i id="iconS_'+i+'" style="position: absolute; font-size: '+iconS.getRandomIntInclusive(10,72)+'px; top: calc(100% + 200px); left: '+iconS.getRandomIntInclusive(0,$("#background-icons").width())+'px" class="material-icons iconS">'+iconS.list[iconS.getRandomIntInclusive(0,iconS.list.length)]+'</i>')
          setTimeout(function(){$("#iconS_"+i).animate({top: "-200px"},iconS.getRandomIntInclusive(5000,10000),function(){window.requestAnimationFrame(function(){$("#iconS_"+i).remove();iconS.add(i)})});},delay);
        },
        init: function(){
          for (var i=0; i<iconS.nb_iconS; i++) {
            iconS.add(i);
          }
          iconS.first_spawn=false;
        }
      };
      iconS.init();

    </script>
  </body>
</html>





Dernière édition par Flammrock le Hier à 19:30; édité 1 fois

______________________________________________________
la vie est trop courte pour retirer le périphérique USB en toute sécurité...
Si la statue de la liberté lève le bras depuis 125 ans, c'est parce qu'elle cherche du réseau sur son Blackberry Torches...
Grâce à mon nouveau correcteur automatiste sur mon téléphage, je ne fais plus aucune faute d'orthodontie.
Quelqu'un a t il déjà demandé au drapeau japonais ce qu'il enregistre depuis tout ce temps ?
Visiter le site web du posteur
Message Publicité 
PublicitéSupprimer les publicités ?


Répondre en citant
Message [HTML/CSS/JAVASCRIPT] Background animé 
material.io/icons TMTC
EN tout cas, ça a l'air cool




______________________________________________________

EN effet, j'aime bien Toadette et Wario.. Beaucoup.
Je joue beaucoup à osu! aussi.
Visiter le site web du posteur ICQ AIM Yahoo Messenger MSN GTalk/Jabber Skype
Répondre en citant
Message [HTML/CSS/JAVASCRIPT] Background animé 
Salut flammrock, GG c'est super sympa comme background Okay

j'ai 2 questions de débutants:

pourquoi n'utilises-tu pas un reset global de ce type:
Code:

    * {
      margin: 0;
      padding: 0;
    }


et a quoi sert un z-index négatif ?

@+




______________________________________________________


L'ignorance est un fléau qui engendre la haine et la mort
La connaissance est une arme qui surpasse toutes les autres
Partagez votre savoir, sinon il sera perdu à jamais
Répondre en citant
Message [HTML/CSS/JAVASCRIPT] Background animé 
stryk a écrit:
Salut flammrock, GG c'est super sympa comme background Okay

j'ai 2 questions de débutants:

pourquoi n'utilises-tu pas un reset global de ce type:
Code:

    * {
      margin: 0;
      padding: 0;
    }


et a quoi sert un z-index négatif ?

@+


désolé du retard je n'avais pas vu ^^

Alors pour la 1ère question, c'est vrai qu'on pourrait faire un reset global mais le code que je propose est à intégré sur un site avec sûrement déjà des règles css définies.
ça permet de rendre le code compatible, il n'interfère pas avec les autres règles css déjà mise en place.

Un z-index négatif permet de s'assurer que le contenu sera dessiné en premier donc en arrière plan (c'est pour éviter certains bugs)




______________________________________________________
la vie est trop courte pour retirer le périphérique USB en toute sécurité...
Si la statue de la liberté lève le bras depuis 125 ans, c'est parce qu'elle cherche du réseau sur son Blackberry Torches...
Grâce à mon nouveau correcteur automatiste sur mon téléphage, je ne fais plus aucune faute d'orthodontie.
Quelqu'un a t il déjà demandé au drapeau japonais ce qu'il enregistre depuis tout ce temps ?
Visiter le site web du posteur
Message [HTML/CSS/JAVASCRIPT] Background animé 


Montrer les messages depuis:
Répondre au sujet Page 1 sur 1
  



Index | créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Copyright 2008 - 2016 // Batch