JSFiddle - React, Tailwind, and code Playground

by Pietro Spagnolo

HTML

<!-- menu button -->
	<a href="#" class="menu-link">Menu</a>	

<!-- menu -->
	<div class="menu">
		<div class="menu-container">
			<a href="../../../pages/contacts.html" class="menu-elements">Contacts,</a>
			<a href="../../../pages/info.html" class="menu-elements">Info,</a>
			<a href="#" class="menu-elements soon">Lab,</a>
			<a href="../../../pages/credits.html" class="menu-elements">Credits,</a>
			<a href="#" class="menu-elements soon">Publications,</a>
			<a href="#" class="menu-elements soon">Shop,</a>
			<a href="https://www.facebook.com/pietrospagnolo.archive" class="menu-elements">Facebook,</a>
			<a href="https://twitter.com/pietrospagnolo_" class="menu-elements">Twitter,</a>
			<a href="http://pietrospagnolo.vsco.co" class="menu-elements">Vsco</a>
		</div>
	</div>

	
	<div class="project-page">
		<div class="project-title">
			<h1>Identità del quartiere</h1>			
		</div>
		
		<div class="gallery">
	<!-- gallery -->

		<!-- 1 -->
			<div class="gallery-item" id="gallery-item-start">
				<img src="img/1.jpg" class="element">
			
			<!-- caption -->
			<div class="caption-box">
				<p class="caption-description">
					Research the signs
					<br>
					Macello Neighbourhood
				</p>
			</div>

			</div>
		
		<!-- 2 -->
			<div class="gallery-item">
				<img src="img/2.jpg" class="element">

			<!-- caption -->
			<div class="caption-box">
				<p class="caption-description">
					Research the signs
					<br>
					Macello Neighbourhood
				</p>				
			</div>

			</div>

		<!-- 3 -->
			<div class="gallery-item">
				<img src="img/3.jpg" class="element">

			<!-- caption -->
			<div class="caption-box">
				<p class="caption-description">
					Research the signs
					<br>
					Macello Neighbourhood
				</p>				
			</div>

			</div>			

		<!-- 4 -->
			<div class="gallery-item">
				<img src="img/4.jpg" class="element">

			<!-- caption -->
			<div class="caption-box">
				<p class="caption-description">
					Sketching the...

CSS

h1{
    font-size: 150px;
}

.dark-p{
    background-color: red;
    -webkit-transition: background 2s;
            transition: background 2s;
}

.light-p{
    background-color: white;
    -webkit-transition: background 2s;
            transition: background 2s;
}

.gallery-item-start{
    
}

JavaScript

$(document).ready(function(){
    $('.gallery-item').bind('inview', function (event, visible) {
      if (visible == true) {
        // element is now visible in the viewport
        $("body").addClass('dark-p');
      } else {
        // element has gone out of viewport
         $(this).removeClass('dark-p');
      }
    });
});


$(document).ready(function(){
    $('.project-text').bind('inview', function (event, visible) {
      if (visible == true) {
        // element is now visible in the viewport
        $("body").addClass('light-p');
      } else {
        // element has gone out of viewport
         $(this).removeClass('light-p');
      }
    });
});