JSFiddle - React, Tailwind, and code Playground

by Daniele Alessandra

HTML

<div id="overflowwrap">
    <div id="five" style="display: none;">5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra, ligula a mattis consectetur, sapien ante blandit mauris, et volutpat lectus risus in elit. Morbi risus quam, mattis nec ultricies ut, tempor sit amet libero. Maecenas condimentum est nulla, ac interdum enim fermentum nec. Sed lorem purus, molestie aliquam augue sed, posuere tincidunt lorem. Mauris vestibulum enim turpis, vitae dictum ante posuere non. Vivamus ornare cursus eros nec ultricies. Nulla facilisi. Pellentesque tincidunt nibh et quam maximus blandit. Nulla facilisi. Proin eu sodales risus. Phasellus porta a leo venenatis tristique. Curabitur eget eleifend est. Vivamus lobortis, arcu et ultricies varius, dolor velit ultricies leo, id commodo odio elit a risus.</div>
    <div id="four" style="display: none;">4. Integer tincidunt dui eget lectus volutpat, et efficitur mauris convallis. Vestibulum maximus massa lacus, et lobortis leo maximus in. Aliquam a luctus ipsum, et aliquet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed congue accumsan tincidunt. Etiam fermentum a metus ac elementum. Fusce sollicitudin leo in ex sollicitudin, in aliquet elit porta. Nunc nec suscipit nisl, sed finibus lorem. Sed imperdiet mi eu nulla elementum ullamcorper. Morbi a fermentum nibh, non euismod dui.</div>
    <div id="three" style="display: none;">3. Proin in tristique nibh. Vivamus ac lacus at ex pretium suscipit a et libero. Aliquam luctus lorem sed arcu dignissim, varius euismod nunc congue. Donec quis risus libero. Suspendisse enim orci, porttitor quis massa efficitur, ultricies suscipit nisi. Quisque convallis in nunc in mollis. Aenean bibendum mauris non sem eleifend sodales. Aenean vulputate fringilla ante, in molestie tortor pulvinar et. Aenean non efficitur massa. Mauris ut odio viverra dui pharetra pulvinar. Nam lacinia quis elit sit amet tempus. In ut ante eu neque...

CSS

#overflowwrap {
  width:50%;
  float: left;
  
}
#otherText {
  width:50%;
  float: left;
}
#one {
  color: #996666;
}
#two {
  color: #808066;
}
#three {
  color: #669966;
}
#four {
  color: #668080;
}
#five {
  color: #666699;
}

JavaScript

function fadeInElement(id, time) {
  var currentScroll = $(window).scrollTop();
  $('#' + id).fadeIn(time);
  $(window).scrollTop(currentScroll);
}

fadeInElement('one', 500);

setTimeout(function() {
  fadeInElement('two', 500);
}, 5000);

setTimeout(function() {
  fadeInElement('three', 500);
}, 10000);

setTimeout(function() {
  fadeInElement('four', 500);
}, 15000);

setTimeout(function() {
  fadeInElement('five', 500);
}, 20000);