JSFiddle - React, Tailwind, and code Playground

by Elena Shevchuk

HTML

<div class="cont">
<div class="bg1">
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique omnis ipsam sapiente perferendis nesciunt numquam reiciendis sit ad. Rerum soluta voluptatibus minus quaerat recusandae dolores placeat numquam sunt saepe blanditiis!</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique omnis ipsam sapiente perferendis nesciunt numquam reiciendis sit ad. Rerum soluta voluptatibus minus quaerat recusandae dolores placeat numquam sunt saepe blanditiis!</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique omnis ipsam sapiente perferendis nesciunt numquam reiciendis sit ad. Rerum soluta voluptatibus minus quaerat recusandae dolores placeat numquam sunt saepe blanditiis!</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique omnis ipsam sapiente perferendis nesciunt numquam reiciendis sit ad. Rerum soluta voluptatibus minus quaerat recusandae dolores placeat numquam sunt saepe blanditiis!</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique omnis ipsam sapiente perferendis nesciunt numquam reiciendis sit ad. Rerum soluta voluptatibus minus quaerat recusandae dolores placeat numquam sunt saepe blanditiis!</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique omnis ipsam sapiente perferendis nesciunt numquam reiciendis sit ad. Rerum soluta voluptatibus minus quaerat recusandae dolores placeat numquam sunt saepe blanditiis!</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique omnis ipsam sapiente perferendis nesciunt numquam reiciendis sit ad. Rerum soluta voluptatibus minus quaerat recusandae dolores placeat numquam sunt saepe blanditiis!</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique omnis ipsam sapiente perferendis nesciunt numquam reiciendis sit ad. Rerum soluta voluptatibus minus...

CSS

html, body {
    padding: 0;
    height: 100%;
    margin: 0;
}
.cont {
    width: 17806px;
    overflow: hidden;
    height: 100%;
}
li {
    float: left;
}
.cont div {
    float: left;
}
.bg1 {
    background: url("http://html2css.ru/paul/img/bg1.jpg");
  -webkit-background-size: cover;
  background-size: cover;
  /* -webkit-backface-visibility: hidden; */
  width: 5600px;
  height: 100%;    
}

.bg2 {
    background: url("http://html2css.ru/paul/img/bg2.jpg");
      width: 6100px;
      -webkit-background-size: cover;
      background-size: cover;
    height: 100%;
}
.bg3 {
    background: url("http://html2css.ru/paul/img/bg3.jpg");
  -webkit-background-size: cover;
  background-size: cover;
    width: 6106px;
    height: 100%;
  /* -webkit-backface-visibility: hidden; */
}

JavaScript

var body = document.body,
		timer;

	window.addEventListener('scroll', function() {
		clearTimeout(timer);
		if (!body.classList.contains('disable-hover')) {
			body.classList.add('disable-hover')
		}

		timer = setTimeout(function() {
			body.classList.remove('disable-hover')
		}, 500);
	}, false);