jQuery Tutorial Website

photoshop icon illustrator icon html icon css icon jquery icon

A four page website with interactive jQuery functionality that simulates folding and flying a paper airplane. The scope of this project was to create three Javascript/jQuery tutorials with embedded code snippets to teach the user how to develop any type of functionality.

I wanted my tutorials to be well integrated into a theme and not isolated, so I developed the idea of folding an origami paper airplane. The result was a four-page website, teaching users how to code a slideshow, show sequential images on a click event handler, and move an object in a projectile motion on scroll. The website is not responsive as we had not learnt responsive design at the point of this project.

View Live

Process

Ideation

I wanted the concept of the website to drive the development, so that the final result would have a cohesive storyline. I thought of ideas like a dimsum restaurant…etc. In the end I settled on the concept of flying a paper airplane with the following tutorials:

1. A slideshow to allow users to choose the origami paper of their choice

2. A function that “folds” the origami paper on each click to fold a paper airplane

3. A function that “flies” the paper airplane in a projectile motion by scrolling

Design

I was very inspired by Japanese origami paper, so I created the patterns on Adobe Illustrator, as well as choose Japanese inspired fonts. I created each step of the folding process in each paper colour for tutorial 2. I also drew a fan for tutorial 3

Origami Paper
Airplane Folding Step

Development

Tutorial 1 | jQuery

I used the Cycle2 jQuery library to create my slideshow. One customized trick I had to code was to store the origami pattern choice of the user in Session to be used in the second tutorial.

Show code
			

	// HTML elements from Tutorial 1
		const $pattern1 = $('.pattern-01');
		const $pattern2 = $('.pattern-02');
		const $pattern3 = $('.pattern-03');
		const $allPatterns = $('.pattern');

		// Store in session which origami pattern was clicked, and add selected class to show selected style
		$pattern1.click(function(){

			 sessionStorage.setItem('pattern','pattern1');
			 $allPatterns.removeClass('selected');
			 $pattern1.toggleClass('selected');

		});

		// Repeated for all origami pattern choices...

		// Show the right pattern paper in Tutorial 2 according to which one was clicked in tutorial 1
		if(sessionStorage.getItem('pattern') === 'pattern1') {
			$('.steps-1').show();

		}else if(sessionStorage.getItem('pattern') === 'pattern2'){
			$('.steps-2').show();

		}else{
			$('.steps-3').show();
		}
	
			
		

Tutorial 2 | jQuery

I built a function on click event to show the next image in a array of images.

Show code
			

	// HTML elements from fold.html
	const $stepsContainer = $('.steps-container');

	//Steps Array
	const steps = [];

		steps[0] = $('.step-1');
		steps[1] = $('.step-2');
		steps[2] = $('.step-3');
		steps[3] = $('.step-4');
		steps[4] = $('.step-5');
		steps[5] = $('.step-6');

	let i=0;

	steps[0].show();

	// Show next step
	$stepsContainer.click(function(){

		if(i < steps.length-1){

			steps[i].hide();
			i++;
			steps[i].show();
		}

	});
	
			
		

Tutorial 3 | jQuery

I coded a scroll event function that moves an element in a projective motion according to the scroll position. I used cos and sin math functions for the equation.

Show code
			

	// Fly the airplane in a projectile motion according to scroll position 
	$(window).scroll(function(){

		const $airplane = $('.airplane');
		const airplanePos = $airplane.offset().top;
		const pos = $(window).scrollTop();
		const $fanBlade = $('#fan-blades');

		$fanBlade.css({'transform': 'rotate(' + (pos) + 'deg)'});

		if(airplanePos < 2600){

		$airplane.css('left', 2*(120 + 2.5 * (pos / 7) * Math.sin(pos * 0.0009)))
									.css('bottom', (300 + 2.5 * (pos / 7) * Math.cos(pos * 0.0009)));

	  }else if(airplanePos >= 2600) {
	  
	  $airplane.css('left', (pos - 350));
	  }

	});

			
		

Final Website

jQuery Tutorial Screenshot View Live ‹ Back to projects