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

TetsiTech

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

Δείτε demo

Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript] και επικολλήστε τον παρακάτω κώδικα, μέσα στο πλαίσιο περιεχομένου του gadget.


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

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

Εάν θέλετε μπορείτε να αλλάξετε και το 20s που υπάρχει στον παραπάνω κώδικα. Δηλώνει τον χρόνο που κινείτε η εικόνα σε χιλιοστά του δευτερολέπτου. Δηλαδή βάλετε 10s για μεγαλύτερη ταχύτητα ή 30s για μικρότερη.

Τώρα όπου ΕΙΚΟΝΑ βάλτε το URL μία εικόνας από τις δικές μου παρακάτω ή φτιάξετε εσείς μία στο Photoshop με διαστάσεις 960x450.

Σύννεφα σε διάφανο φόντο

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1aKo0_zGZ77fbF87So1X2Eqc5Qsafpxr7InQCFjhzGOl9YMA8u4_1bL88fR1eloaLE-3AJeK7UKM91fKkhRKopXx95nFxNnI-tQ-T_H_jv-t-0sW_qyImlSP4O4n0DIAjvWnyMJHQkcU/s1600/cloud4.png

Τρισδιάστατα σύννεφα και αερόστατο σε διάφανο φόντο

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP5SQ5LdoqjHQV5IZ84fd4qwh8XA9RjoYKFPaXZD4x58yuuBWTCALn3Yp64g6zRs7SSKxOPLxSaZ-Tx-96Lnddf3VVUynaurmzS9CvroZGJ5-bv4AHi2TgWQUwtU0scMs7vdwpYXIE_6Q/s1600/cloud3.png

Σύννεφα σε γαλάζιο φόντο

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT30q4wsbJg-8thyphenhypheny216WvRjKZ0c7Hww_lKSTZVxualO64nIKU9wu2I6WVKQnCfimjFS2QqRiOTIukQX7Jig6M3cAQwzGIlRlw0_jsLG4efThKfCOFi8w_K2MGPxYRLtBP09awunVtZyE/s1600/cloud.png

Πατήστε [Αποθήκευση] και τελειώσατε. (Δε χρειάζεται να βάλετε τίτλο στο gadget)