CODEWITHSUNDEEP
javascriptjqueryhtml
AutoMate
AutoMate

Reputation: 71

JQuery Letters fade in randomly

This is my first time coding in JQuery. Below is my code:

var div = document.getElementById('fadeletters1'),
  letters = div.textContent.split('');

while(div.hasChildNodes()) div.removeChild(div.firstChild);

for(var i = 0; i < letters.length; i++) {
  var letter = document.createElement('span'),
    style = 'opacity ' + (Math.random() * 5 + 1) + 's linear';
  letter.appendChild(document.createTextNode(letters[i]));
  letter.style.WebKitTransition   = letter.style.transition = style;
  letter.style.opacity = 0;
  div.appendChild(letter);
}

setTimeout(function() {
  for(var i = 0; i < div.childNodes.length; i++) {
    div.childNodes[i].style.opacity = 1;
  }
}, 0);
<div id=fadeletters1>Helllooo This is a test for the website</div>

So the letters do fade in but then in the starting of the animation, letter are kinda visible and then fades in after couple seconds. I want it to pop up from 0 visibility to 100 visibility as its fades in.

I am trying to acheive something like this site does: http://method.digital/

Upvotes: 2

Views: 877

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

The thing is there is two delays...

One for the animation and one for a timeout. This is the timeout that really gives the effect you are looking for.

// Get the letters from the original string.
var letters = $("#fadeletters1").text().split("");
// Remove the original string.
$("#fadeletters1").text("");

// Create a span for each letters and append them to the document.
letters.forEach(function(item,index){
  var span = $("<span class='fade'>").text(item);
  $("#fadeletters1").append(span);
});

// Animate each spans
$(document).find(".fade").each(function(){
  // Random delay
  var delay = Math.random();
  var letter = $(this);
  
  // Set a timeout to animate the spans
  setTimeout(function(){
    letter.animate({"opacity":1},delay*1000);
  },delay*3000);
});
.fade{
  opacity:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="fadeletters1">Helllooo This is a test for the website</div>

Upvotes: 1

Nick is tired
Nick is tired

Reputation: 7056

You're changing the rate at which the transition takes place, instead you want to change the delay before the transition starting:

var div = document.getElementById('fadeletters1'),
  letters = div.textContent.split('');

while(div.hasChildNodes()) div.removeChild(div.firstChild);

for(var i = 0; i < letters.length; i++) {
  var letter = document.createElement('span'),
    style = 'opacity 0.6s linear',
    delay = (Math.random() * 4) + 's';
  letter.appendChild(document.createTextNode(letters[i]));
  letter.style.WebKitTransition   = letter.style.transition = style;
  letter.style.WebKitTransitionDelay   = letter.style.transitionDelay = delay;
  letter.style.opacity = 0;
  div.appendChild(letter);
}

setTimeout(function() {
  for(var i = 0; i < div.childNodes.length; i++) {
    div.childNodes[i].style.opacity = 1;
  }
}, 0);
<div id=fadeletters1>Helllooo This is a test for the website</div>

If you want to run it for multiple divs you can wait until the first is complete before moving onto the next (this example only appears to work sometimes, make sure to hit refresh before running):

function RunAnimation(target,delay) {
  var div = document.getElementById(target),
      letters = div.textContent.split('');

  while (div.hasChildNodes()) div.removeChild(div.firstChild);
  
  setTimeout(function(){
    for (var i = 0; i < letters.length; i++) {
      var letter = document.createElement('span'),
          style = 'opacity 0.6s linear',
          delay = (Math.random() * 4) + 's';
      letter.appendChild(document.createTextNode(letters[i]));
      letter.style.WebKitTransition = letter.style.transition = style;
      letter.style.WebKitTransitionDelay = letter.style.transitionDelay = delay;
      letter.style.opacity = 0;
      div.appendChild(letter);
    }

    setTimeout(function() {
      for (var i = 0; i < div.childNodes.length; i++) {
        div.childNodes[i].style.opacity = 1;
      }
    }, 0);
  }, delay);
}

RunAnimation('fadeletters1')
RunAnimation('fadeletters2', 5000);
RunAnimation('fadeletters3', 10000);
<div id="fadeletters1">Helllooo This is a test for the website</div>
<div id="fadeletters2">This is a second div which also fades in</div>
<div id="fadeletters3">And who knows maybe you want a third</div>

Upvotes: 2

Related Questions