JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div class="holding-text" data-scroll-speed="20">
HELLO
</div>
<div class="holding-text" data-scroll-speed="20">
HELLO
</div>
<div class="holding-text" data-scroll-speed="20">
HELLO
</div>

CSS

.holding-text {
    position: relative;
    padding: 250px;
}

JavaScript

//Transform on Scroll
    
    $(document).ready(function () {

		$.fn.moveIt = function(){
		  var $window = $(window);
		  var instances = [];
		  
		  $(this).each(function(){
		    instances.push(new moveItItem($(this)));
		  });
		  
		  window.onscroll = function(){
		    var scrollTop = $window.scrollTop();
		    instances.forEach(function(inst){
		      inst.update(scrollTop);
		    });
		  }
		}
		
		var moveItItem = function(el){
		  this.el = $(el);
		  this.speed = parseInt(this.el.attr('data-scroll-speed'));
		};
		
		moveItItem.prototype.update = function(scrollTop){
		  var pos = scrollTop / this.speed;
		  this.el.css('transform', 'translateY(' + -pos + 'px)');
                 		  
		};
		
		$(function(){
		  $('[data-scroll-speed]').moveIt();
		});
	
	});