Μετάβαση στο περιεχόμενο

Κινούμενο logo


JoeDer

Recommended Posts

Μπορούμε να δώσουμε μια παραπάνω νότα στην παραμετροποίηση της κοινότητάς μας κάνοντας το logo να κινείται είτε το έχουμε ως image είτε ως text με τον παρακάτω τρόπο.

Προσθέτουμε στο custom.css

/* Moving Logo Start */
.buzz{
display:inline-block;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0)
}

.buzz:hover,.buzz:focus,.buzz:active{
-webkit-animation-name:buzz;
animation-name:buzz;
-webkit-animation-duration:0.15s;
animation-duration:0.15s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite
}

@-webkit-keyframes buzz-out{
10%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}

20%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}

30%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}

40%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}

50%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}

60%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}

70%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}

80%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}

90%{
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0)
}

100%{
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0)
}

}

@keyframes buzz-out{
10%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}

20%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}

30%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}

40%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}

50%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}

60%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}

70%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}

80%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}

90%{
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0)
}

100%{
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0)
}

}

.buzz-out{
display:inline-block;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0)
}

.buzz-out:hover,.buzz-out:focus,.buzz-out:active{
-webkit-animation-name:buzz-out;
animation-name:buzz-out;
-webkit-animation-duration:0.75s;
animation-duration:0.75s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:1;
animation-iteration-count:1
}
/* Moving Logo End */

Στην συνέχεια ανοίγουμε το template  core > front > global > logo

Βρίσκουμε το:

<a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" alt='{setting="board_name" escape="true"}'></a>

Το αλλάζουμε με:

<a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" alt='{setting="board_name" escape="true"}' class="brand buzz-out"></a>

Βρίσκουμε το:

<a href='{setting="base_url"}' id='elSiteTitle' accesskey='1'>{setting="board_name"}</a>

Το αλλάζουμε με:

<a href='{setting="base_url"}' id='elSiteTitle' accesskey='1' class="brand buzz-out">{setting="board_name"}</a>

 

Σε μορφή plugin: Animated logo.xml

 

Αποτέλεσμα

moving_logo.gif.7f44e1bf17852ac5bf91dff3d9c51378.gif

Link to comment
Share on other sites


Δημιουργήστε ένα λογαριασμό ή συνδεθείτε προκειμένου να αφήσετε κάποιο σχόλιο

Πρέπει να είστε μέλος για να μπορέσετε να αφήσετε κάποιο σχόλιο

Δημιουργία λογαριασμού

Κάντε μια δωρεάν εγγραφή στην κοινότητά μας. Είναι εύκολο!

Εγγραφή νέου λογαριασμού

Σύνδεση

Εάν έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. | Terms of Use