Πριν 1 ή 1.5 χρόνο ήθελα να αλλάξω την κλασική default σελίδα του lighttpd σε κάτι πιο ωραίο αλλά και έξυπνο. Δεν θυμάμαι πως, αλλά μου ήρθε η ιδέα να την κάνω ίδια με το Guru Meditation της Amiga 500. Έτσι και έκανα. Χτες, για κάποιο λόγο μου βίδωσε να την αλλάξω.
Για αρχή έφτιαξα την HTML μιας και για να κάνω center την εικόνα είχα φτιάξει div που το κέντραρα με 50% και άλλες τέτοιες μαλακίες. Δεν πειράζει αν δεν κατάλαβες, ούτε εγώ κατάλαβα τι είχα κάνει, για αυτό και το προσπερνάμε. Δούλευε πάντως. Αφού λοιπόν την έστρωσα λίγο καλύτερα, καθώς διάβαζα το meditation του Guru, πρόσεξα που λέει “Press left mouse button to continue”. Μηχανικά το έκανα. Προφανώς δεν έγινε τίποτα στην οθόνη, αλλά στο κεφάλι μου έβρεχε ιδέες. Αποφάσισα να το κάνω όπως το βίντεο παρακάτω. Δεν δείχνει ακριβώς αυτό που θέλω να πετύχω, αλλά you get the idea!
Όταν πατούσες το αριστερό mouse button, έκανε reset. Πως μπορούσε να γίνει αυτό σε σελίδα; Φυσικά με jQuery, απλά και γρήγορα. Αφού έψαξα λίγο γρήγορα βρήκα τις μεθόδους που με ενδιέφεραν. Για αρχή χρειάζεται η .css, για να μπορείς να αλλάζεις το property του background-color. Ακόμη, χρειάζεται κάποια για παύση, εδώ έρχεται η .delay. Οι δύο τους μαζί δεν δουλεύουν γιατί η .css δεν μπαίνει στο queue για τα effect. Διαβάζοντας τα σχόλια στην σελίδα της .delay έπεσα πάνω στο παρακάτω.
$("body").css({"background-color": "#FF0000"})
.delay(1000).queue(function () {$(this).css({"background-color": "#ABC"});$(this).dequeue();})
.delay(1000).queue(function () {$(this).css({"background-color": "#FFFFFF"});$(this).dequeue();})
Αυτό ήταν ότι χρειαζόμουν. Με λίγο tweaking δούλεψε! Επίσης χρειάστηκαν αρκετές άλλες που θα βρεις μελετώντας. Παρακάτω υπάρχει το .zip με όλα τα αρχεία. Μπορείς να το ξεκοιλιάσεις, να το αναβαθμίσεις και να το κάνεις καλύτερο. Ένα demo μπορείς να βρεις εδώ: giannou.net.
Δεύτερη έκδοση πάνω, η πρώτη είχε ένα λαθάκι…
[download id=”3″]
[download id=”2″]