JoeDer Δημοσιεύτηκε 16 Φεβρουαρίου 2019 Share Δημοσιεύτηκε 16 Φεβρουαρίου 2019 Μπορούμε να δώσουμε μια παραπάνω νότα στην παραμετροποίηση της κοινότητάς μας κάνοντας το 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 Αποτέλεσμα Link to comment Share on other sites More sharing options...
Recommended Posts
Δημιουργήστε ένα λογαριασμό ή συνδεθείτε προκειμένου να αφήσετε κάποιο σχόλιο
Πρέπει να είστε μέλος για να μπορέσετε να αφήσετε κάποιο σχόλιο
Δημιουργία λογαριασμού
Κάντε μια δωρεάν εγγραφή στην κοινότητά μας. Είναι εύκολο!
Εγγραφή νέου λογαριασμούΣύνδεση
Εάν έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.
Συνδεθείτε τώρα