Κυριακή 15 Φεβρουαρίου 2009

Print this post

ΔΗΜΙΟΥΡΓΙΑ ΚΑΙ ΠΡΟΣΘΗΚΗ ANIMATED TEXT BANNER

Σήμερα θα σας δείξω πως μπορούμε να βάλουμε ένα κινούμενο banner. Ονομάζεται scrolling or marqee text, δηλαδή το κείμενο του banner κινείται από πάνω προς τα κάτω ή το αντίθετο ή από αριστερά προς τα δεξιά και το αντίθετο. Πρώτα πρέπει αν καταλάβουμε πως δουλεύει ο κώδικας έτσι ώστε να τον φέρουμε στα μέτρα μας.
Το κείμενο του banner πρέπει να περικλείεται από δύο tags. Το opening tag και το closing tag. Δείτε το παρακάτω παράδειγμα:

<opening tag> Το κείμενο σας </closing tag>

Ο κώδικας για το scrolling or marqee text banner πρέπει να μοιάζει με τον παρακάτω:

<marquee>Το κείμενο σας - Demo</marquee>

Αν προσθέσετε τον παραπάνω κώδικα στο blogspot θα δείτε ένα demo κείμενο σε άσπρο φόντο (background) και ακίνητο. Εμείς πρέπει να προσθέσουμε στον κώδικα χρώμα φόντου, ταχύτητα που κινείται το κείμενο, κατεύθυνση κειμένου, διαστάσεις banner. Για να προσθέσουμε όλα τα παραπάνω είναι ιδιαίτερα εύκολο, απλά θέλει λιγάκι προσοχή. Για παράδειγμα, για να βάλουμε κατεύθυνση κειμένου πρέπει να προσθέσουμε στον κώδικα το παρακάτω:
direction="right"

Το παραπάνω πρέπει να προστεθεί μετά το opening tag που στην περίπτωση μας είναι το <marquee> Ο κώδικας του banner θα πρέπει να δείχνει κάπως έτσι:

<marquee direction="right">Το κείμενο σας - Demo</marquee>

Με τον ίδιο τρόπο προσθέτουμε και τα υπόλοιπα στοιχεία, values στα αγγλικά, (χρώμα φόντου, ταχύτητα που κινείται το κείμενο, διαστάσεις banner) στον κώδικα. Ας προσθέσουμε χρώμα φόντου. Το στοιχείο που θα προσθέσουμε είναι της μορφής bgcolor="#FF00FF" (όπου #FF00FF είναι το χρώμα). Να θυμάστε ότι πάντα προσθέτουμε τα values μετά το opening tag που στην περίπτωση μας είναι το <marquee> Ο κώδικας θα πρέπει να μοιάζει με τον παρακάτω:

<marquee bgcolor="#FF00FF" direction="right">Το κείμενο σας - Demo</marquee> Με τον ίδιο τρόπου βάζουμε και τα υπόλοιπα στοιχεία του βαννερ μας. Παρακάτω έχω ένα πίνακα με τα στοιχεία που μπορείτε να προσθέσετε και μια μικρή επεξήγηση του καθενός.

The Value

ΕΠΕΞΗΓΗΣΗ

direction="left" Κάνει το κείμενο να κινείται προς τα αριστερά.
direction="right" Κάνει το κείμενο να κινείται προς τα δεξιά.
direction="up" Κάνει το κείμενο να κινείται προς τα πάνω.
direction="down"
Κάνει το κείμενο να κινείται προς τα κάτω.
behavior="alternate" Κάνει το κείμενο να κινείται προς τα δεξιά και μόλις φτάσει στο τέλος της διαδρομής του το κείμενο αλλάζει κατεύθυνση (προς τα αριστερά) και επιστρέφει στην αρχή.
behavior="slide" Κάνει το κείμενο να σταματάει μόλις φτάσει στο τέλος της διαδρομής του.
loop="4" Αν θέλετε να ελέγχετε πόσες φορές θα εμφανιστεί το κείμενο στο banner προσθέστε αυτό το value και αλλάξτε τον αριθμό (4) στον επιθυμητό από εσάς.
scrollamount="2" Με αυτό το value ελέγχετε την ταχύτητα που κινείται το κείμενο. Το 1 είναι αργό, το 2 γρηγορότερο και τα 3, 4, 5 ακόμη γρηγορότερα. Όσο μεγαλύτερο αριθμό βάλετε τόσο αυξάνεται η ταχύτητα με την οποία κινείται το κείμενο.
width="400" Με αυτό ελέγχετε το πλάτος του banner. Όσο μεγαλύτερη τιμή τόσο φαρδύτερο το banner.
height="66" Με αυτό ελέγχετε το ύψος του banner. Όσο μεγαλύτερη τιμή τόσο ψηλότερο το banner.
onmouseover="this.stop()" onmouseout="this.start()" Με αυτό το value καθορίζουμε το κείμενο να σταματάει όταν πάνω στο banner βρίσκεται ο δείκτης από το ποντίκι και όταν το απομακρύνουμε να συνεχίσει να κινείται το κείμενο.
bgcolor="#9999CC" Με αυτό αλλάζουμε το χρώμα του φόντου (background). Θα σας δείξω αργότερα πως βρίσκουμε την κωδική ονομασία του επιθυμητού χρώματος.
style="color: #FF0000" Με αυτό αλλάζουμε το χρώμα της γραμματοσειράς. Θα σας δείξω αργότερα πως βρίσκουμε την κωδική ονομασία του επιθυμητού χρώματος.
style="font-size: 1em" Με αυτό αλλάζουμε το μέγεθος της γραμματοσειράς.
style="font-family: Tahoma" Με αυτό αλλάζουμε τη γραμματοσειρά.
style="font-size: 12pt; color:
#800000; font-family: Tahoma"
Με αυτόν το τρόπο μπορούμε να προσθέσουμε στον κώδικα του banner τα values και να αλλάξουμε τη γραμματοσειρά, το μέγεθος αυτής και το χρώμα αυτής.

Αν θέλετε να βάλετε links αντί για κείμενο θα πρέπει να ανάμεσα στα opening tags να βάλετε τον παρακάτω κώδικα:

<a href="Link URL">Link Title</a>

Αν θέλετε και κείμενο και link απλά μέσα στο κείμενο βάλτε τον παραπάνω κώδικα και όπου Link URL είναι η διεύθυνση που θέλετε να βάλετε και όπου Link Title είναι ο τίτλος για το link.
Ένας demo κώδικας για animated banner που φτιάξαμε είναι ο παρακάτω:

<marquee direction="Up" scrollamount="8" width="318" style="font-size: 12pt;
color: #800000; font-family: Tahoma" height="66" bgcolor="#FFCC99">Το κείμενο σας - Demo</marquee>

Το αποτέλεσμα είναι το παρακάτω:
Το κείμενο σας - Demo
Όταν δημιουργήσετε τον κώδικα του banner σας η προσθήκη αυτού είναι εύκολη υπόθεση. Πάτε πανόπτης, διάταξη, προσθήκη gadget και HTML/JavaScript και πατάτε αποθήκευση (save).
Σχετικά με το πως βρίσκουμε τις κωδικές ονομασίες των χρωμάτων για να αλλάξουμε το όνομα της γραμματοσειράς ή το χρώμα του φόντου είχα περιγράψει έναν τρόπο στο post για την προσθήκη animated cloud. Ας τον επαναλάβουμε:
Για να αλλάξουμε χρώμα στο φόντο ή τη γραμματοσειρά πρέπει να αλλάξουμε την παράμετρο #ffffff. Πώς όμως; Πρέπει να ανοίξουμε άλλο ένα παράθυρο εργασίας στον browser και να μπούμε πάλι στο λογαριασμό μας και από εκεί πάμε πανόπτης, διάταξη και γραμματοσειρές και χρώματα. Εκεί μπορούμε να δούμε τον κωδικό των χρωμάτων φόντου και γραμματοσειρών. Δείτε την παρακάτω φωτογραφία (κλικ για μεγέθυνση): Στα δεξιά βλέπετε τον κωδικό χρώματος που στην προκειμένη περίπτωση είναι το άσπρο. Εσείς στον κώδικα πρέπει να βάλετε τον κωδικό του χρώματος του template σας.

Άλλος τρόπος είναι να ψάξουμε μέσω της Google για free color generator. Ένα free download code generator μπορείτaι να κάνετε από εδώ. Καλή επιτυχία!

16 σχόλια:

  1. Ωπ....αυτό για να σταματάει όταν "περάσει" το ποντίκι δε το ξερα...
    Να σαι καλά τσάκαλε!

    ΑπάντησηΔιαγραφή
  2. perastikos tin kalispera moy ..eisai protos dimitri eyharistoyme gia tin voitheia...

    ΑπάντησηΔιαγραφή
  3. @NOVITO Την καλημέρα μου. Όντως έχεις πολλές επιλογές αν δεις στον πίνακα.
    @OI.METHISTANES Γεια σου Βαγγέλη.

    ΑπάντησηΔιαγραφή
  4. @OI.METHISTANES Βαγγέλη δε μου είπες όλα καλά με τον translator για το facebook;

    ΑπάντησηΔιαγραφή
  5. hackaday κώδικα για να κάνουμε το κείμενο να αναβοσβήνει μήπως....? Ε φανταστικέ hackaday...? :D

    ΑπάντησηΔιαγραφή
  6. NOVITO Νομίζω ότι ένας φίλος μου κάτι έχει... Αν το δω το Σαββατοκύριακο θα τον ρωτήσω... Αναμονή λοιπόν...

    ΑπάντησηΔιαγραφή
  7. HACKADAY ΠΟΛΥ ΩΡΑΙΟ ΑΛΛΑ ΠΩΣ ΓΙΝΕΤΑΙ ΝΑ ΒΑΛΩ ΕΙΚΟΝΑ ΜΕΣΑ ΣΕ ΑΥΤΟ ΜΑΖΙ ΜΕ ΤΟ ΚΕΙΜΕΝΟ

    ΑπάντησηΔιαγραφή
  8. ναι στο ιδιο πλαισιο εννοω και να σερνεται η εικονα μαζι με το κειμενο

    ΑπάντησηΔιαγραφή
  9. @Alexas Δε γίνεται αλλά μπορείς να κάνεις ένα animation πολύ εύκολα με το ίδιο κείμενο και διαφορετικές εικόνες ή με μια εικόνα και διαφορετικά κείμενα. Μπες εδώ: http://locublogus.blogspot.com/2009/07/animation-generator.htm
    Αν συναντήσεις πρόβλημα πες μου.

    ΑπάντησηΔιαγραφή
  10. thanks φίλε δεν δυσκολεύτικα εύκολο ήταν

    ΑπάντησηΔιαγραφή
  11. Φανταστική η ανάρτηση σου.
    Την έκανα πράξη αμέσως και το χάρηκα γιατί μου αρέσει να υπάρχει κίνηση στο blog.
    Αν θέλεις μπορείς να δεις το blog μου.
    Θα με χαροποιούσε ιδιαιτέρως.

    ΑπάντησηΔιαγραφή
  12. @xristin Να 'σαι καλά. Πέρασα από το ιστολόγιο σου και απ' ότι είδα είσαι καινούρια στη blogόσφαιρα. Καλορίζικη λοιπόν. Εδώ πέρα θα βρεις πολλά χρήσιμα πραγματάκια, κόλπα, συμβουλές για τα ιστολόγια και όχι μόνο. Η θεματολογία του Locus Blogus επεκτείνεται και σε θέματα σχετικά με τους υπολογιστές, χρήσιμες δωρεάν εφαρμογές, Tutorials κ.α.
    Όσο για την κίνηση σε ιστοσελίδα ή σε ιστολόγιο έχεις δίκιο. Το κάνει να δείχνει πιο δυναμικό, αρκεί βέβαια να μην το παρακάνουμε και καταντήσει γραφικό.

    ΑπάντησηΔιαγραφή
  13. Αυτό το έχω δει και μου άρεσε πολύ. Θα το υιοθετήσω σύντομα. Την καλησπέρα μου!

    ΑπάντησηΔιαγραφή
  14. @Σταυροβελονιά Καλημέρα. Ψάξε και θα βρεις και άλλα ωραία στο Locus Blogus.

    ΑπάντησηΔιαγραφή

back to top