JSFiddle - React, Tailwind, and code Playground

by LuckyCat

JavaScript

$(window).ready(function() {
  function pageScroll() {
    $("html, body").animate({
      scrollTop: $(document).height()
    }, 1000);
  }
  setTimeout(pageScroll, 1200);
  /* change steps
      ------------------- */
  $('.btn').not('.btn-start').on('click', function() {
    $('.step:visible').hide().next().fadeIn();
    pageScroll();
  });

  function randomNumbers(start, end) {
    for (var O = [], random = [], j = 0; j < end - start + 1; j++) O[j] = start + j;
    while (O.length) random[random.length] = O.splice((Math.random() * O.length), 1);
    return random;
  }
  var $cornerItem = $('.corner-item');
  randGirl = randomNumbers(0, 25);
  var i = 0;
  $cornerItem.each(function() {
    $(this).addClass('item-' + randGirl[i]);
    i++;
  });
  var current = 0;
  var $item = $('.corner-item');

  function cornerChange() {
    $item.eq(current).next().addClass('preload');
    setInterval(function() {
      if (current < $item.length - 1) {
        current++;
      } else {
        current = 0;
      }
      /*preload next girl*/
      $item.eq(current).next().addClass('preload');
      /* next girl */
      $item.removeClass('active').eq(current).addClass('active');
    }, 7000);
  }
  $(window).on('load', cornerChange);
});