JSFiddle - React, Tailwind, and code Playground

by Pimigo

HTML

<div id="container">
  <div id="slide">
    <img src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg">
  </div>
</div>

CSS

#container{
  width:500px;
  height:500px;
  overflow:hidden;
}
#slide{
  width:100%;
  height:100%;
  transition: transform .3s;
}
img{
  width:auto;
  height:auto;
  max-width:100%;
  pointer-events: none;
}

JavaScript

$(document).ready(function (){
	var scroll_zoom = new ScrollZoom($('#container'),5,0.5)
})

//The parameters are:
//
//container: The wrapper of the element to be zoomed. The script will look for the first child of the container and apply the transforms to it.
//max_scale: The maximum scale (4 = 400% zoom)
//factor: The zoom-speed (1 = +100% zoom per mouse wheel tick)

function ScrollZoom(container,max_scale,factor){
	var target = container.children().first()
	var size = {w:target.width(),h:target.height()}
	var pos = {x:0,y:0}
	var scale = 1
	var zoom_target = {x:0,y:0}
	var zoom_point = {x:0,y:0}
	var curr_tranform = target.css('transition')
	var last_mouse_position = { x:0, y:0 }
	var drag_started = 0

	target.css('transform-origin','0 0')
	target.on("mousewheel DOMMouseScroll",scrolled)
	target.on('mousemove', moved)
	target.on('mousedown', function() {
		drag_started = 1;
		target.css({'cursor':'move', 'transition': 'transform 0s'});
		/* Save mouse position */
		last_mouse_position = { x: event.pageX, y: event.pageY};
	});

	target.on('mouseup mouseout', function() {
		drag_started = 0;
		target.css({'cursor':'default', 'transition': curr_tranform});
	});

	function scrolled(e){
		var offset = container.offset()
		zoom_point.x = e.pageX - offset.left
		zoom_point.y = e.pageY - offset.top

		e.preventDefault();
		var delta = e.delta || e.originalEvent.wheelDelta;
		if (delta === undefined) {
		  //we are on firefox
		  delta = e.originalEvent.detail;
		}
		delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency

		// determine the point on where the slide is zoomed in
		zoom_target.x = (zoom_point.x - pos.x)/scale
		zoom_target.y = (zoom_point.y - pos.y)/scale

		// apply zoom
		scale += delta * factor * scale
		scale = Math.max(1,Math.min(max_scale,scale))

		// calculate x and y based on zoom
		pos.x = -zoom_target.x * scale + zoom_point.x
		pos.y = -zoom_target.y * scale + zoom_point.y

		update()
	}

	function...