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

0

Βάλτε με πολύ εύκολο τρόπο, στην Κεφαλίδα (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://3.bp.blogspot.com/-TfWy8xpn5uE/UVjCWZy_-rI/AAAAAAAAOH0/9oy1URr0vlQ/s1600/cloud4.png

Τρισδιάστατα σύννεφα και αερόστατο σε διάφανο φόντο
https://4.bp.blogspot.com/-nf1qZj8_xDs/UVjBmUg4MaI/AAAAAAAAOHs/r8HX8D67dn8/s1600/cloud3.png

Σύννεφα σε γαλάζιο φόντο
https://1.bp.blogspot.com/-E4OJD4MRzOs/UVi_nIx-Y1I/AAAAAAAAOHc/BEmK5Hps0NI/s1600/cloud.png

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

Tags

Δημοσίευση σχολίου

0 Σχόλια
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Δημοσίευση σχολίου (0)
To Top