• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Animacja tekstu

Cloud VPS
0 głosów
177 wizyt
pytanie zadane 15 listopada 2017 w JavaScript przez wojtasso14 Początkujący (250 p.)
edycja 15 listopada 2017 przez wojtasso14

Witam

Mam taki problem z animacją napisu w jquery

Odwołuje się ona do wszystkich napisów na stronie a nie do konkretnego 

Jaka część kodu za to odpowiada?

Mam taki kod:


(function($){
    
    $.fn.shuffleLetters = function(prop){
        
        var options = $.extend({
            "step"        : 8,            // How many times should the letters be changed
            "fps"        : 25,            // Frames Per Second
            "text"        : "",             // Use this text instead of the contents
            "callback"    : function(){}    // Run once the animation is complete
        },prop)
        
        return this.each(function(){
            
            var el = $(this),
                str = "";


            // Preventing parallel animations using a flag;

            if(el.data('animated')){
                return true;
            }
            
            el.data('animated',true);
            
            
            if(options.text) {
                str = options.text.split('');
            }
            else {
                str = el.text().split('');
            }
            
            // The types array holds the type for each character;
            // Letters holds the positions of non-space characters;
            
            var types = [],
                letters = [];

            // Looping through all the chars of the string
            
            for(var i=0;i<str.length;i++){
                
                var ch = str[i];
                
                if(ch == " "){
                    types[i] = "space";
                    continue;
                }
                else if(/[a-z]/.test(ch)){
                    types[i] = "lowerLetter";
                }
                else if(/[A-Z]/.test(ch)){
                    types[i] = "upperLetter";
                }
                else {
                    types[i] = "symbol";
                }
                
                letters.push(i);
            }
            
            el.html("");            

            // Self executing named function expression:
            
            (function shuffle(start){
            
                // This code is run options.fps times per second
                // and updates the contents of the page element
                    
                var i,
                    len = letters.length, 
                    strCopy = str.slice(0);    // Fresh copy of the string
                    
                if(start>len){
                    
                    // The animation is complete. Updating the
                    // flag and triggering the callback;
                    
                    el.data('animated',false);
                    options.callback(el);
                    return;
                }
                
                // All the work gets done here
                for(i=Math.max(start,0); i < len; i++){

                    // The start argument and options.step limit
                    // the characters we will be working on at once
                    
                    if( i < start+options.step){
                        // Generate a random character at thsi position
                        strCopy[letters[i]] = randomChar(types[letters[i]]);
                    }
                    else {
                        strCopy[letters[i]] = "";
                    }
                }
                
                el.text(strCopy.join(""));
                
                setTimeout(function(){
                    
                    shuffle(start+1);
                    
                },1000/options.fps);
                
            })(-options.step);
            

        });
    };
    
    function randomChar(type){
        var pool = "";
        
        if (type == "lowerLetter"){
            pool = "abcdefghijklmnopqrstuvwxyz0123456789";
        }
        else if (type == "upperLetter"){
            pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        }
        else if (type == "symbol"){
            pool = ",.?/\\(^)![]{}*&^%$#'\"";
        }
        
        var arr = pool.split('');
        return arr[Math.floor(Math.random()*arr.length)];
    }
    
})(jQuery);

 

komentarz 15 listopada 2017 przez Lrror Bywalec (2,720 p.)
Kody programów wstawiamy w odpowiednie miejsce. (ikona code w edytorze)
komentarz 15 listopada 2017 przez ScriptyChris Mędrzec (190,190 p.)

Odwołuje się ona do wszystkich napisów na stronie a nie do konkretnego

Pewnie dlatego, że wykonuje się pętla na elementach:

return this.each(function(){
komentarz 16 listopada 2017 przez wojtasso14 Początkujący (250 p.)
Hmm teraz po usunięciu tej części animacja w ogóle się nie wykonuje na napisie.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 341 wizyt
pytanie zadane 25 marca 2020 w HTML i CSS przez Majki14 Nowicjusz (200 p.)
0 głosów
1 odpowiedź 835 wizyt
pytanie zadane 1 lutego 2018 w HTML i CSS przez Hardwell Dyskutant (9,020 p.)
0 głosów
1 odpowiedź 318 wizyt
pytanie zadane 12 grudnia 2017 w HTML i CSS przez Bakr Mądrala (6,850 p.)

93,488 zapytań

142,421 odpowiedzi

322,772 komentarzy

62,906 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Kursy INF.02 i INF.03
...