Βάλτε κινούμενα σύννεφα στο Header σας


Βάλτε στην Κεφαλίδα (Header) του blog σας, κινούμενα σύννεφα ή μία δικιά σας εικόνα, με πολύ εύκολο τρόπο.

Δείτε demo

Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript] και επικολλήστε τον παρακάτω κώδικα. Αντικαταστήστε τα μπλε και τα κόκκινα γράμματα με αυτά της επιλογής σας και πατήστε [Αποθήκευση]. (Δε χρειάζεται να βάλετε τίτλο στο gadget)

<style type="text/css">
#header {
    height: 150px;
    background-image: url(ΕΙΚΟΝΑ);
    background-position: 0% 0%;
    -webkit-animation-name: moveIt;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes moveIt {
     0% {
          background-position: 0% 0%;
     }
     100% {
          background-position: 0% 150%;
     }
}
</style>

  • Εάν θέλετε μπορείτε να αλλάξετε και το 20 που υπάρχει στον παραπάνω κώδικα. Δηλώνει τον χρόνο που κινείτε η εικόνα σε χιλιοστά του δευτερολέπτου. Δηλαδή βάλετε 10 για μεγαλύτερη ταχύτητα ή 30 για μικρότερη.
  • Τώρα όπου ΕΙΚΟΝΑ βάλτε το URL μία εικόνας από τις δικές μου παρακάτω ή φτιάξετε εσείς μία στο Photoshop με διαστάσεις 960x450.

Σύννεφα σε διάφανο φόντο
URL: http://goo.gl/51cTq

Τρισδιάστατα σύννεφα και αερόστατο σε διάφανο φόντο
URL: http://goo.gl/2LVSI

Σύννεφα σε γαλάζιο φόντο
URL: http://goo.gl/Tvxdg


0 σχόλια:

Δικά μου

Larissakid

Χρησιμοποιώ