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>






______________________________________________________
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




______________________________________________________
Visiter le site web du posteur ICQ AIM Yahoo Messenger MSN GTalk/Jabber Skype
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