New project

I was making another project for Spanish class, and I wanted to make the text fade in line by line. Unfortunately, my experience with jQuery consists of just a few weird experiments, and I wasn't entirely sure how to do it. Plus I had very little time to complete the project. To be honest, I just looked on StackOverflow.

Nonetheless, I'm going to attempt to explain the code here. The result is here if you want to view it.

The Code

$(document).ready(function(){
  var lines = $('#slide1text').text().split("_");

  var timer,
      displayLine = function(){
          var nextLine = lines.shift();
          var bodyText = $('#slide1-textbody');
          if(nextLine){
              console.log('line');
              var newLine = $('<span class="line">' + nextLine + '</span>');
              $('#slide1-heading').append(newLine);
              $('#slide1-heading').append($('<br/>'));
              newLine.animate({ 'opacity':1 }, 2000);
              timer = setTimeout(displayLine,1000);
          }
          else {
            bodyText.animate({ 'opacity':1 }, 1000);
          }
      }
  timer = setTimeout(displayLine,1000);
})

Explainer

$(document).ready(function(){

Apparently if you look for an element before it loads, it will return null, so I needed to wrap the entire thing in a document.ready so that the animation only started when the document loaded.

var lines = $('#slide1text').text().split("_");

I have an invisible div id, #slide1text, which contains the text that will be loaded, and this splits the inner text into lines. I had some issues loading text from the div, which made me think the problem was using line breaks as separators. Turns out that wasn't the problem, but the decision to use underscores stuck.

var timer,
 displayLine = function(){
 var nextLine = lines.shift();

This is where the StackOverflow content starts. This starts by initializing a timer, attaching it to a function, and selecting a single line from the lines created earlier.

var newLine = $('<span class="line">' + nextLine + '</span>');

Each line needs to be its own span so that they can be managed individually.

$('#slide1-heading').append(newLine);
 $('#slide1-heading').append($('<br/>'));

I now add the new line to my actual heading, which has opacity set to 0. I also add a line break so it has the same lines at any screen size.

newLine.animate({ 'opacity':1 }, 2000);
timer = setTimeout(displayLine,1000)

I now apply the actual animation, by revealing it gradually, then waiting.

else {
 bodyText.animate({ 'opacity':1 }, 1000);
 }

Once I'm done animating the header, I reveal the main text.

The other animations

The other thing I tried was to make the first slide darken as I scrolled to the second. This time, it's entirely my own code:

$(document).ready(function(){
  var timertwo,
    darkenOnScroll = function(){
      var newOpacity= 1 - ($(document).scrollTop() / $('#firstslide').height());
      $('#firstslide').css({'opacity' : newOpacity});
      timertwo = setTimeout(darkenOnScroll, 0.5);
    }
  timertwo = setTimeout(darkenOnScroll, 0.5);
})

Basically what this does is use the same timers from the previous function, except this time it calculates how far I've scrolled compared to the size of the first slide, then changes the opacity accordingly. There is a bit of lag but that's to be expected.