Jump to content

  • Log In with Google Existing user? Sign In
  • Sign Up
Welcome to Tesloianu » We make difference!
Register now to gain access to all of our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. If you already have an account, login here - otherwise create an account for free today!
Photo

ZĂPADĂ CU AJUTORUL CSS3 ANIMAȚIE


  • This topic is locked This topic is locked
No replies to this topic

FilipGFX

FilipGFX

    I hope that is not my bad :/

  • Administrators
  • Posts
    907
  • Reputation
    46
    • Zăpadă cu ajutorul CSS3 animație
       
      Sunt multe scripturi de zăpadă, dar acesta are un plus forte mare
      În primul rând acesta nu este un script, el nu folosește javascript sau JQuery,
      Este făcut doar în CSS3, sunt 3 imagini în care 2 sunt blurate că să facă zăpada mai realistică
       
      Instalare
       
      În primul rând avem nevoie să găsim un spațiu unde să se vadă zăpada, este foarte bine să fie doar în header, banner.
      De exemplu zăpada va fi în
      <div class="artweber">
          aici
      </div>
      

      deci asta

      <div class="artweber_snow">
      <div id="snow"></div>
      </div> 
      

      trebuie de băgat ast felii

      <div class="artweber">
          <div class="artweber_snow">
          <div id="snow"></div>
          </div> 
      </div>
      

      Acuma avem nevoie de css, îl adăugați intru-n css instalat pe site-ul tău

      /* zapada */
      .artweber_snow { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;}
      #snow {width: 100%; height: 100%; background-image: url("https://images.tesloianu.ro/ym.png"), url("https://images.tesloianu.ro/ym.png"), url("https://images.tesloianu.ro/medium/xm.png"); -webkit-animation: snow 20s linear infinite;-moz-animation: snow 20s linear infinite;-ms-animation: snow 20s linear infinite;animation: snow 20s linear infinite;}
      @keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
      @-moz-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
      @-webkit-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
      @-ms-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
      /* zapada */
      

      Petru ca zăpada să fie în acel div care lai ales "la noi este artweber", în blocul ".artweber' din css-ul tău trebuie să scriți "position: relative", exemplu

      .artweber {
          text-align: center;
          font-size: 15px;
          padding: 20px 0;
          background-image: url(https://images.tesloianu.ro/zm.png);
          font-weight: 500;
          margin-top: 10px;
          position: relative;
      }
      

      Dacă pe div-ul dat este un buton ceva care membrii trebuie să meargă pe el atunci adăugați asta

      -webkit-pointer-events: none; 
      pointer-events: none;
      

      in

      .artweber_snow
      

      Vezi cum arata : https://demo.artwebe...ocsszapada.html

      Scris de Gregory ArtWeber.Ro

       




      Atenție! Acest material a fost furnizat de tesloianu.ro doar în scop informativ. Administrația nu este responsabilă pentru conținutul acestuia. Dacă dețineți drepturile de autor la acest material contactați imediat un administrator.


      0 user(s) are reading this topic

      0 members, 0 guests, 0 anonymous users

      Parteneri

      Partenerul Nostru Oficial #TOP Partenerul Nostru Partenerul Nostru Partenerul Nostru Partenerul Nostru Partenerul Nostru Locul Tau Este Aici! Locul Tau Este Aici! Locul Tau Este Aici! Locul Tau Este Aici! Locul Tau Este Aici!

      Locul Tau Este Aici! Locul Tau Este Aici! Locul Tau Este Aici! Locul Tau Este Aici! Locul Tau Este Aici! Locul Tau Este Aici! Locul Tau Este Aici! Locul Tau Este Aici! Locul Tau Este Aici! Locul Tau Este Aici! Locul Tau Este Aici!