Αλλαγή effect στα H1

[dimitris212]

Υπάρχει δυνατότητα στο http://www.mixhost.gr/slide/ τα γράμματα να κάνουν κάποιο effect? 

πχ αναγραμματισμό ή κάποιο άλλο? 

 

Λογικά κάποιο js θα πρέπει να πειραχτεί. 

 

Τα js που χρησιμοποιούνται είναι τα: 

 

http://www.mixhost.gr/slide/js/scripts.js

 

http://www.mixhost.gr/slide/js/custom.js

[dimitris212]

Καμιά λύση?

[TheELF]

Ο ποιο σωστός τρόπος είναι να γίνει κινούμενη εικόνα (animgif) και να την βάλεις στην θέση του κειμένου.

Υπάρχουν πολλά προγράμματα και on και offline για αυτήν την δουλειά όπως και αρκετοί οδηγοί για το πως γίνεται στο photoshop ή και στο ελεύθερο gimp.

 

Μέσου javascript θα είναι πανδύσκολο να το κάνει κάποιος και άδικα θα σου βαρύνει και την σελίδα αφού με μια εικόνα καθαρίζεις.

[dimitris212]

Μέσα στο h1 έβαλα ένα gif αλλά το θέμα είναι ότι παίζει μόνο μία φορά πχ όταν πατάς να δείξει την εικόνα 3 τρέχει το gif όταν πατάς 4 και ξανά την 3 δεν τρέχει.

 

Μήπως θα μπορούσαμε να χρησιμοποιούσαμε κάτι τέτοιο? http://easings.net/#

 γιατί μέσα στο http://www.mixhost.gr/slide/js/custom.js υπάρχει το easeInOutExpo

[parser]

Με CSS μπορεις να κανεις animations. Ισως να αποτελουσε οδηγο αυτο
http://tympanus.net/codrops/2013/04/30/text-opening-sequence-with-css-animations/

 

Κατι πολύ basic με χρηση keyframe

<h1 class="letterA">A</h1>

body{
    font-family:'arial';
}

.letterA{
   color:orange;
   font-size:100px;
   animation:letterA 5s infinite;
   -webkit-animation:letterA 5s infinite; 

    @keyframes letterA
    {
    from {color:red;}
    to {color:blue;}
    }
    
    @-webkit-keyframes letterA 
    {
    from {color:red;}
    to {Color:blue;}
    }

[dimitris212]

Ναι οκ κάνει animation το CSS αλλά στην περίπτωσή μου δεν κάνει την κίνηση.