JavaScript | jQuery Tutorials

Show Tutorials

Tutorial 01

lightweight parallax hover tilt effect
ocean in sunset boat on the water

In this tutorial I created a parallax image effect using vanilla-tilt.js. So here we have an ocean background, with a boate in the foreground. So when the user hovers their cursor over the graphic, the water and boat tilt, but in a way that creates a parallax effect.

The only real requirement here is that the boat image needs a transparent background to create the parallax image effect, and not to simply cover the background.

We will be using the jQuery library and tilt.jquery. You can donloawd them by clicking on them. In JavaScript section I will explain how to use them in your code. The photo that I will be using is from here.

The Markup

The first thing that's needed is the HTML markup. Which is simply including 2 image tags. After having vanilla-tilt.js. on your folder the only thing you need is adding data attributes to the "background" img. So the HTML markup would be:

 
<img src="imgs/img-bg.jpg" class="background"  data-tilt data-tilt-speed="400" 
data-tilt-scale="1.1" data-tilt-max="20" data-tilt-perspective="500" >
<img src="imgs/img-front.png" class="box01" >

The CSS

Then these elements need styling. I will be using the relative and position absolute place the boat on its right position on the ocean background. and applying transform-style: preserve-3d; to the background and transform: translateZ(100px); to the boat.


.background {
    display: block;
    font-size: 36px;
    transform-style: preserve-3d;
    transform: perspective(500px);
    position: relative;
}

.box01{
	transform: translateZ(100px);
	position: absolute;
	top: 35%;
	right: 25%;
}

The JavaScript

Now you just need to inculde the jquery libraries in your code. So before closing the body tag simply put these two lines of code:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="https://unpkg.com/tilt.js@1.1.13/dest/tilt.jquery.min.js"></script>
close button

Tutorial 02

Fantabulous Tabs Simple Javascript animated tabs
Tab1
Tab2
Tab3
Tab1
User-centred compelling, one-to-one networking e-enable mindshare unleash disintermediate, granular innovative, synthesize technologies strategic." Global; orchestrate; syndicate visionary clicks-and-mortar implement relationships; reintermediate e-services post value-added visualize, integrateAJAX-enabled design engage design, expedite, ROI.
Tab2
Interactive architect widgets 24/365 engage data-driven expedite. Ubiquitous seamless mesh strategic mission-critical technologies capture, networking, engage, 24/365, rich-clientAPIs compelling matrix B2C streamline?
Tab3
Reinvent, vertical cutting-edge morph real-time eyeballs, rich-clientAPIs cross-media syndicate extensible rich-clientAPIs: webservices seamless bandwidth? Methodologies weblogs.

In this tutorial I created animated tab with simple Javascript. You will need two master divs in your markup. One is for tabs and the second is for their content. The markup is so simple:

The Markup

 
<div class="codepen-container">
<div id="icetab-container">
    <div class="icetab current-tab">Tab1</div>
    <div class="icetab">Tab2</div>
    <div class="icetab">Tab3</div>       
    </div>
    
    <div id="icetab-content">
    <div class="tabcontent tab-active">Tab1 <br>1 lorim ipsum</div> 
    <div class="tabcontent">Tab2 <br>2 lorim ipsum</div>
    <div class="tabcontent">Tab3 <br>23 lorim ipsum</div>
    </div>
    </div> 

The CSS

The css is shown as bellow:


div {
  box-sizing: border-box;
  transition: all ease-in-out .5s;
  -moz-transition: all ease-in-out .5s;
  -webkit-transition: all ease-in-out .5s;
}

.icetab {
  border: 2px solid #ff9900;
  display: inline-block; 
  border-bottom: 0px; 
  margin: 0px;  
  color: #fff;
  cursor: pointer;
  border-right: 0px;
}

.icetab:last-child {
  border-right: 2px solid #ff9900;  
}

#icetab-content {
  overflow: hidden;
  position: relative;
  border-top: 2px solid #ff9900;
}

.tabcontent {
  position: absolute;
  left: 0px;
  top: 0px;
  background: #fff;
  width: 100%;
  border-top: 0px;
  border: 2px solid #ff9900;
  border-top: 0px;
  transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
}

.tabcontent:first-child {
  position: relative; 
}
.tabcontent.tab-active {
  border-top: 0px;
  display: block;
  transform: translateY(0%);
  -moz-transform: translateY(0%);
  -webkit-transform: translateY(0%);
}

body {
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
  background: #666;
  color: #454545;
}

.codepen-container {
  max-width: 700px;
  margin: 40px;
  margin-left: auto;
  margin-right: auto;
}

.title {
  color: #ff9900;
  text-align: center;
  letter-spacing: 14px;
  text-transform: uppercase;
  font-size: 17px;
  margin: 40px 0px;
}

.tabcontent {
  padding: 40px;
}

.icetab {
  padding: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.current-tab { 
  background: #ff9900;
}

The JavaScript

Now you just need to apply the Javascript. For that you may either have it in a seprate file and link it to your HTML or simply put it inside a script tag and have it befor closing body.


var tabs = document.getElementById('icetab-container').children;
var tabcontents = document.getElementById('icetab-content').children;

var myFunction = function() {
  var tabchange = this.mynum;
  for(var int=0;int<tabcontents.length;int++){
    tabcontents[int].className = ' tabcontent';
    tabs[int].className = ' icetab';
  }
  tabcontents[tabchange].classList.add('tab-active');
  this.classList.add('current-tab');
} 


for(var index=0;index<tabs.length;index++){
  tabs[index].mynum=index;
  tabs[index].addEventListener('click', myFunction, false);
}
A PEN BY Stephen Nelson
close button

Tutorial 03

Letter Drop
letter drop

In this tutorial I created letter drop by jQuery Plugin. You will need to include jQuery library in your HTML. I will expalin it in JavaScript section.

For the HTML, the only thing you need is a "h" tag or "p" tag. It is complately up to you if you want to drop just a word or a line of words. Let's have fun:

The Markup

 
<div class="container">
	<h5>letter drop</h5>
</div>

The CSS

The css is shown as bellow. In css we need to define a new class which is named letterDrop. We will call this class in javascript. Also we need a keyframe for applying the transformation in different position. For having two different colors applying to our word, we just simply need to apply a diffrenrt color to 2n childs of our word.


.letterDrop {
	position: relative;
	top: 20px;  
	display: inline-block;
	letter-spacing: 25px;
	opacity: 0.8;
	transform: rotateX(90deg);
	animation: letterDrop 1.2s ease 1 normal forwards;

	margin: 0;
	padding: 0;
	font-family: 'Lora', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 50px;
	color: goldenrod;
}

@keyframes letterDrop {
    10% {
        opacity: 0.5;
    }
    20% {
        opacity: 0.8;
        top: 90px;
        transform: rotateX(-360deg);
    }
    100% {
        opacity: 1;
        top: 150px;
        transform: rotateX(360deg);
    }
}


span:nth-child(2n) {
    	color: dimgrey;
}

The JavaScript

Now the fun part! Copy and paste these lines of code before closing the body tag. However, before that do not forget to include the jQuery library:



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>



(function($) {

$.fn.letterDrop = function() {
  // Chainability
  return this.each( function() { 
  
  var obj = $( this );
  
  var drop = {
    arr : obj.text().split( '' ),
    
    range : {
      min : 1,
      max : 9
    },
    
    styles : function() {
      var dropDelays = '\n', addCSS;
      
       for ( i = this.range.min; i <= this.range.max; i++ ) {
         dropDelays += '.ld' + i + ' { animation-delay: 2.' + i + 's; }\n';  
       }
      
        addCSS = $( '<style>' + dropDelays + '</style>' );
        $( 'head' ).append( addCSS );
    },
    
    main : function() {
      var dp = 0;
      obj.text( '' );
      
      $.each( this.arr, function( index, value ) {

        dp = dp.randomInt( drop.range.min, drop.range.max );
        
        if ( value === ' ' )
          value = ' ';
        
          obj.append( '<span class="letterDrop ld' + dp + '">' + value + '</span>' );
        
      });
          
    }
  };
   
  Number.prototype.randomInt = function ( min, max ) {
    return Math.floor( Math.random() * ( max - min + 1 ) + min );
  };
  
  
  // Create styles
  drop.styles();


    // Initialise
    drop.main();
  });

};

}(jQuery));


// USAGE
$( 'h5' ).letterDrop();

© A PEN BY Rich
close button

© 2017 Faezeh Omidi | For educational purposes