JavaScript and jQuery Tutorial

tutorial project screenshot

This is an school project to show how awesome is JavaScript and jQuery. This page suppose to contain 3 different tutorials using HTML, CSS, JavaScript/jQuery, and Photoshop. The first Tutorial is about how to use JavaScript to determine the mouse location to activate the slide-show, the challenge about this part was making sure the slide-show working even when the mouse is moving on top of the pictures. the second project is a combination of CSS animation and JavaScript. The JavaScript part is to find is clicking happening to start the animation and more the Iron items toward magnet.the third one is about sliding images while scrolling down and up and fading images.
At that time we weren't familiar with responsive design and the website is designed based on a large screen. All the landscape pictures that is used on the is part of my last works.

Visit Live

My Favourite one on this tutorial was the magnet that included both CSS animation and JavaScript/jQuery.

At first we need to add our img(s) to html...



Then on CSS, they will be positioning absolute to make a circle...


		.tutorial01{
			position: relative;
			display: flex;
		}
		.game-sec{
			display: flex;
			margin-right: auto;
			height: 100vh;
		}
		.items{
			display: flex;
			margin-right: auto;
			width: 55%;
			height: 100vh;
		}
		.magnet img{
			position: absolute;
			top: 360px;
			left: 5px;
		}
		.items img{
			position: absolute;
		}
		.items a:nth-child(1) img{
			top: 550px;
			left: 525px;
		}
		.items a:nth-child(2) img{
			top: 220px;
			left: 440px;
		}
		.items a:nth-child(3) img{
			top: 420px;
			left: 700px;
		}
		.items a:nth-child(4) img{
			top: 260px;
			left: 925px;
		}
		.items a:nth-child(5) img{
			top: 130px;
			left: 710px;
		}
		.items a:nth-child(6) img{
			top: 540px;
			left: 880px;
		}

After desining everything now it's a time for make them functional...just using a click event and animate to make them what you saw !!!


		const $items= $('.items img');
		const $iron = $('.iron');
		const $ironStick = $iron.css('left');
		$items.on("click", function(){
		    if($(this).hasClass('iron')){
		        $(this).animate({
		            left: '13%',
		            top: '350px' 
		        }, 1000);
		    }else{
		        console.log('not iron');
		        $(this).fadeOut();
		    }
		});