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 ‹ Back to projects

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 and others. 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