Φτιάξτε δικό σας διαφημιστικό banner με κινούμενα γράμματα!

Ένα πολύ όμορφο banner με κινούμενα γράμματα που μπορείτε να βάλετε στο blog σας, για να τονίσετε κάποια φράση.

Δείτε demo
Είναι απλό στην εγκατάστασή του και δεν χρησιμοποιεί κάποιο Flash, αλλά CSS και Javascript.

Μπορείτε να το τοποθετήστε στην πλαϊνή μπάρα του blog σας και να το χρησιμοποιήσετε σαν διαφημιστικό banner. Δηλαδή, μπορείτε να πάτε στην Linkwise

και αφού επιλέξετε τον διαφημιζόμενο, πάρτε το URL από το Text Link που σας δίνει και βάλτε το στον παρακάτω κώδικα, αντικαθιστώντας τις κόκκινες λέξεις URL.

Εγκατάσταση

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

<div class="TetsiBox">
<a href="URL" class="tetsi">ΛΕΞΗ1</a><a href="URL" class="tetsi">ΛΕΞΗ2</a><a href="URL" class="tetsi">ΛΕΞΗ3</a><a href="URL" class="tetsi">ΛΕΞΗ4</a><a href="URL" class="tetsi">ΛΕΞΗ5</a><a href="URL" class="tetsi">ΛΕΞΗ6</a>
</div>
<style type="text/css">
@import url("http://fonts.googleapis.com/css?family=Luckiest+Guy");
.tetsi{
  position: absolute;
  left:40%;
  top:35px;
  font-family: "Luckiest Guy";
  font-size: 7;
}
div.TetsiBox{
    background: #F7F7F7 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik8CMH6Q272E2LlhO3RsKZ_-_9HpXYwzIkr-KN8opcyyNMhW2GssxF5HnDPeguFi6QV-1kyHY_1aJ82i-7CEDZzT3b5kXzOlic27WCnpbZRzjHAb-VtSRZBOi4BS3GAZMiXqfuEaHiNSuc/s1600/selida.jpg') no-repeat;
 background-position:100% 0%;
 border:1px dotted #ccc;
 padding-right:25px;
 padding-left:25px;
 padding-bottom:5px;
 height:80px;
}
.TetsiBox a{
color: rgb(255,176,0);
text-decoration:none;
}
/* Banner from tetsitech.blogspot.gr  */
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ani(){
  TweenMax.staggerFromTo("a.tetsi", 3, {scaleX:0, scaleY:0}, {scaleX:7, scaleY:7}, 1, ani);
  TweenMax.staggerFromTo("a.tetsi", 0.9, {alpha:1}, {alpha:0, delay:0.5}, 1);
})();
</script>

Ρυθμίσεις

Αλλάξτε τα κόκκινα γράμματα URL με αυτό της επιλογής σας.
Αντικαταστήστε τα μπλε γράμματα με τις λέξεις της φράσης σας.
Εάν θέλετε να βάλετε παραπάνω λέξεις, αρκεί να προσθέσετε δίπλα από τις άλλες, αυτό:
```
<a href="URL" class="tetsi">ΛΕΞΗ</a>
```
Αλλάξτε το χρώμα των γραμμάτων αλλάζοντας τα νούμερα στο :
color: rgb(255,176,0)
(τους κωδικούς των χρωμάτων θα τους βρείτε εδώ).
Εάν θέλετε κάποια λέξη της φράσης να έχει άλλο χρώμα, τότε τροποποιείστε τον κώδικα έτσι:
```
<a href="URL" class="tetsi" style="color: rgb(0,255,0);">ΛΕΞΗ</a>
```
Για τους προχωρημένους, να ξέρετε ότι το script δουλεύει τέλεια και με εικόνες, αρκεί να πειραματιστείτε με το μέγεθος. Για παράδειγμα όπου ΛΕΞΗ μπορούμε να βάλουμε το:
```
<img src="imgURL" />
```