Word Scrambler Effect (SOLVED)

Ask the community
, ,
1

Hi All,

Looking for some help here;

I’m essentially trying to create an effect for my website homepage using the scrambler effect. The obvious and more easy route to take would be to just use a .GIF file, however I want the text to be html for SEO purposes.

This is an example of what I’m trying to create;


I have a text field labelled “text49”

1702×1146 485 KB

In sublime text pad I created a working file, but when I load it into WIX code it does not work. I’ve used in-line style () & inline JS () and can’t seem to get this working

HTML

<p id="text49"></p>

CSS

body {
  background: transparent;
  color: #414345;
}

#text32 {
  position: absolute;
  font-family: monospace;
  font-size: 20px;
  white-space: nowrap;
  text-shadow: 0 2px 2px rgba(#000, 0.9);
}

JAVASCRIPT

var text49 = function(el){
  'use strict';
  var m = this;
  
  m.init = function(){
    m.codeletters = "&#*+%?£@§$";
    m.message = 0;
    m.current_length = 0;
    m.fadeBuffer = false;
    m.messages = [
      'This is a message, which can be long and all.',
      'This could be another message.',
      'Also short ones work!',
      'Cool.'
    ];
    
    setTimeout(m.animateIn, 100);
  };
  
  m.generateRandomString = function(length){
    var random_text = '';
    while(random_text.length < length){
      random_text += m.codeletters.charAt(Math.floor(Math.random()*m.codeletters.length));
    } 
    
    return random_text;
  };
  
  m.animateIn = function(){
    if(m.current_length < m.messages[m.message].length){
      m.current_length = m.current_length + 2;
      if(m.current_length > m.messages[m.message].length) {
        m.current_length = m.messages[m.message].length;
      }
      
      var message = m.generateRandomString(m.current_length);
      $(el).html(message);
      
      setTimeout(m.animateIn, 20);
    } else { 
      setTimeout(m.animateFadeBuffer, 20);
    }
  };
  
  m.animateFadeBuffer = function(){
    if(m.fadeBuffer === false){
      m.fadeBuffer = [];
      for(var i = 0; i < m.messages[m.message].length; i++){
        m.fadeBuffer.push({c: (Math.floor(Math.random()*12))+1, l: m.messages[m.message].charAt(i)});
      }
    }
    
    var do_cycles = false;
    var message = ''; 
    
    for(var i = 0; i < m.fadeBuffer.length; i++){
      var fader = m.fadeBuffer[i];
      if(fader.c > 0){
        do_cycles = true;
        fader.c--;
        message += m.codeletters.charAt(Math.floor(Math.random()*m.codeletters.length));
      } else {
        message += fader.l;
      }
    }
    
    $(el).html(message);
    
    if(do_cycles === true){
      setTimeout(m.animateFadeBuffer, 50);
    } else {
      setTimeout(m.cycleText, 2000);
    }
  };
  
  m.cycleText = function(){
    m.message = m.message + 1;
    if(m.message >= m.messages.length){
      m.message = 0;
    }
    
    m.current_length = 0;
    m.fadeBuffer = false;
    $(el).html('');
    
    setTimeout(m.animateIn, 200);
  };
  
  m.init();
}

console.clear();
var text49 = new text49($('#text49'));

Any help or advise would be very much appreciated!
Thanks in advance!

Regards,
Conor

2

Hi Conor,

Looks like you’re trying to use a jQuery-based example in Wix Code.
It is important to understand that jQuery is a library that works on raw HTML elements, while Wix Code is an environment where you don’t work with HTML elements directly, but rather with the (sometimes equivalent) Wix Components.
Specifically, In Wix Code you don’t provide the HTML and CSS parts that you showed above - instead you use the Wix Text component which you added and styled using the Editor.
When you want to change the content of the text component, you select it using the $w selector (which is quite similar in concept to the $ selector used in jQuery), and you manipulate the content by setting the html property, e.g.

$w('#text49').html = ...

Hope this helps :slight_smile:

3

Thank you Ofer,

You put me in the right direction & all is working fine now!

Kind Regards,
Conor

4

Can you share working example?