Fucking Fade Bro

by Bonabelle

HTML

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">  

        <div class='goal-cont'>
          <div id='title'><b><center>Follower Goal</center></b></div>
          <center>
            <div id='goal-bar'>
              <span id='goal-current'>0</span>/<span id='goal-total'>0</span>
            </div>
            <div id='goal-end-date'>
            </div>
            </center>
          </div>
          
        <div class='tajText1'>
          <div id='title'><b><center>back it up?</center></b></div>
          <center>
            <div id='textField'>
              <span id='text'>BACK IT UP</span>
            </div>
            </center>
          </div>
        <div class='tajText2'>
          <div id='title'><b><center>No I'm</center></b></div>
          <center>
            <div id='textField'>
              <span id='text'>Dirty Dan</span>
            </div>
            </center>
          </div>

SCSS

div.goal-cont {
  color: white;
  font-size: 36px;
  font-family: 'Open Sans', sans-serif;
  text-align: cetner;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

div.tajText1 {
  display: none;
  background: none;
  font-size: 36px;
  font-family: 'Open Sans', sans-serif;
  text-align: cetner;
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}

div.tajText2 {
  display: none;
  color: black;
  background: none;
  font-size: 36px;
  font-family: 'Open Sans', sans-serif;
  text-align: cetner;
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}

JavaScript

document.addEventListener('goalLoad', function(obj) {
        console.log(obj.detail);
        $('#title').html(obj.detail.title);
        $('#goal-current').text(obj.detail.amount.current);
        $('#goal-total').text(obj.detail.amount.target);
        $('#goal-end-date').text(obj.detail.to_go.ends_at);
        });
        document.addEventListener('goalEvent', function(obj) {
        console.log(obj.detail);
        $('#goal-current').text(obj.detail.amount.current);
        });
        
    function fade() {
        $('.goal-cont').fadeIn().delay(5000).fadeOut();
        $('.tajText1').delay(6000).fadeIn().delay(5000).fadeOut();
        $('.tajText2').delay(12000).fadeIn().delay(5000).fadeOut(fade);
    }
    fade();