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;
}

.new{
    font-size: 15px;
}

.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

var bodyEl = $("body");
$(window).on("scroll", function() {
  var scrollTop = $(this).scrollTop();
  $("#gallery-item-start").each(function() {
    var el = $(this),
        className = el.attr("id");
    if (el.offset().top < scrollTop) {
      bodyEl.addClass(className);  
    } else {
      bodyEl.removeClass(className);
    }
  });
});