DSX Simulator

I lead the Smack Bang Designs web development team to add a new simulation feature on their client’s textile store.

Design Studio X (DSX) is a graphic design studio that sells fabric designs at wholesale. Their website has a private shop for registered customers who can browse all of their fabric designs.


DSX wanted a feature on their website to help inspire their customers, and drew inspiration from a competitor. Smack Bang Designs showed me the competitors website and I was confident that I can replicate what the competitors has done.

The user clicks on a fabric.


Each image (the surfer, the lady etc.) Is an image mask that overlays the fabric creating the illusion that the model is wearing that fabric. The user can also zoom in and out of the fabric to see the detail.

I provided the direction for the development team, told them how to do it, structure it and what tools to use. As well as fine turned somethings at the end.

	function updateZoom(){
		var bkgdImage = featureImageCnt.getAttribute('data-backgroundimage');

 		if ( featureImage.getAttribute('src').search('blank') > 0 ) {
			featureImageCnt.style.backgroundSize = minImageSize + parseInt(zoomSlider.value)*2 +'%';
			setEdges(featureImageCnt, parseInt(featureImageCnt.style.backgroundPositionX), parseInt(featureImageCnt.style.backgroundPositionY));
		} else {
 			featureImageCnt.setAttribute('style', 'background-size: '+(zoomSlider.value) +'%; '+bkgdImage);
	zoomSlider.addEventListener('input', updateZoom);

	zoomIn.addEventListener('click', function(){
	zoomOut.addEventListener('click', function(){

There were some challenges along the way which was understanding how the client wanted to update the website, and how to design the simulator so it’ll look realistic, but in the end I along with Smack Bang Designs was able to offer the client a simple and effective solution.


Looking for a web developer?
I'm in Sydney

Get in touch