Javascript&jQuery

Tutorial

Let’s play with code!

Flipping and rotating text

Learn how to

Scrolling effects

Learn how to

Animation

Learn how to

1. Flipping and rotating

We are going to use Wodry.js - a simple jQuery plugin for a text flipping or rotating.
Wodry.js has features that allow you to set animation from animations collection.

Demo

I like javascript|jQuery

It’s cool|awesome

I can flip|rotate text

How it works

1. Download plugin and include wodry.css and wodry.js (or wodry.min.js) files into your project folder.

2. Links these files to your HTML and do not forget link jQuery as well.

3. Now you are ready to set up HTML, jQuery and style your content like so:

		
			<div>
				<p>I like <span class="wodry1">javascript|jQuery </span></p>
				<p>It's <span class="wodry2">cool|awesome</span></p>
				<p>I can <span class="wodry3">flip|rotate</span> text</p>
			</div>
		
		
			.wodry1,
			.wodry2,
			.wodry3 {
			color: #F6DEC4;
		}
		
		
		$('.wodry1').wodry({
			animation: 'rotateAll',
			delay: 1000
		});

		$('.wodry2').wodry({
			animation: 'rotateX',
			delay: 1000,
			animationDuration: 800
		});

		$('.wodry3').wodry({
			animation: 'rotateY',
			delay: 1000,
			animationDuration: 300
		});
		

Custom settings

Settings object has the following fields:

  • Separator: sets a custom separator between flipped text. Default value: “|”
  • Delay: sets a delay of interations. Default value: 2000
  • Animation duration: sets duration of animation. Default value: 500
  • Animation: sets a type of animation. Default value: “rotateY”
  • Callback: sets a callback that calls on each iteration. Default value: an empty function
  • Shift: specify the X, Y and Z values of shifting. Default value: {x:0,y:0,z:0}

List of animations: rotateX, rotateY, rotateAll, scaleX, scaleY, scaleAll, clockwise, anticlockwise.

2. Scrolling effects

For scrolling effects we are going to use another jQuery plugin called AOS - Animate On Scroll Library.
AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it’s previous state and are ready to animate again if you scroll down.

Demo

1
2
3
4
5

How it works

1. Download plugin from GitHub and put CSS and JS files from “dist” file into your project folder.

2. Then link these files to your HTML. Do not forget link jQuery as well.

3. Now you are ready to set up your HTML, jQuery and style your content like so:

		
		<div>
			<div class="item" data-aos="fade-up">1</div>
			<div class="items_container">
				<div class="item" data-aos="fade-right" data-aos-easing="ease-in-sine">2</div>
				<div class="item" data-aos="fade-left" data-aos-easing="ease-in-sine">3</div>
			</div>
			<div class="items_container">
				<div class="item" data-aos="flip-left" data-aos-delay="300">4</div>
				<div class="item" data-aos="flip-right" data-aos-delay="300">5</div>
			</div>
		</div>
		
		
		.items_container {
			display: -webkit-flex;
			display: flex;
			-webkit-justify-content: space-around;
			justify-content: space-around;
		}

		.item {
			width: 150px;
			height: 150px;
			margin: 35px auto;
			padding-top: 35px;
			background: #AA3763;
			text-align: center;
			color: #FFF;
			font-size: 3em;
		}
		
		
		AOS.init({
			duration: 1200
		});
		

More interesting effects check out here!

Additional Features

Settings object has the following fields:

  • Anchor: animate one element based on position of other element
  • Anchor placement: animate an element based on it’s position on the screen. It doesn’t have to animate only when it appears in viewport, but for example when bottom part of it hits middle of the screen
  • Both way animations: by default elements animate while you scroll up and down, but you can force it to animate only once
  • Easy disabling: disable animations on mobile devices using predefined options like mobile, phone, tablet or with a custom condition/function
  • Async aware: recalculates positions of elements on DOM changes, so after loading something using Ajax, you don’t have to worry about anything (unless you support IE9, because it needs mutation observer)
  • No dependencies: this library is written in pure JS and doesn’t rely on any dependencies

3. Animation

Now we are going to create animation using animate.css library and jQuery. Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and etc.

Demo

Click on a shape!

1
2
3
4
5
6

How it works

1. Download plugin from GitHub and include the stylesheet on your HTML’s head or use CDN:

		
		<head>
			<link rel="stylesheet" href="http://s.mlcdn.co/animate.css">
		</head>
		

2. You can do a whole bunch of interesting stuff with animate.css when you combine it with jQuery. So do not forget link jQuery as well.

3. Now you are ready to set up your HTML, jQuery and style your content like so:

		
		<div class="animation">
			<div class="shape shape_01"></div>
			<div class="shape shape_02"></div>
			<div class="shape shape_03"></div>
			<div class="shape shape_04"></div>
			<div class="shape shape_05"></div>
			<div class="shape shape_06"></div>
		</div>
		
		
		.shape { 
			width: 100px;
			height: 100px; 
			margin: 10px auto;
			padding-top: 7px;
			background: #AA3763;
			text-align: center;
			color: #FFF;
			font-size: 2em;
		}
		
		
	$(function() {
			var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
			$('.shape_01').on('click',function(){
			$('.shape_01').addClass('animated zoomInLeft').one(animationEnd,function(){
				$(this).removeClass('animated zoomInLeft');
			});
		});
	});

	$(function() {
			var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
			$('.shape_02').on('click',function(){
			$('.shape_02').addClass('animated swing').one(animationEnd,function(){
				$(this).removeClass('animated swing');
			});
		});
	});

	$(function() {
		var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
		$('.shape_03').on('click',function(){
		$('.shape_03').addClass('animated shake').one(animationEnd,function(){
			$(this).removeClass('animated shake');
		});
	});
	});

	$(function() {
		var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
		$('.shape_04').on('click',function(){
		$('.shape_04').addClass('animated jello').one(animationEnd,function(){
			$(this).removeClass('animated jello');
		});
	});
	});

	$(function() {
		var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
		$('.shape_05').on('click',function(){
		$('.shape_05').addClass('animated tada').one(animationEnd,function(){
			$(this).removeClass('animated tada');
		});
	});
	});

	$(function() {
		var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
		$('.shape_06').on('click',function(){
		$('.shape_06').addClass('animated fadeOutDown').one(animationEnd,function(){
			$(this).removeClass('animated fadeOutDown');
		});
	});
	});
					
		

More interesting effects check out here!

The End

Have fun!