JS Tutorial
- Overview
- Documents
Adjector.js is a simple jQuery plugin I built for the footer of my site. Though I’m using it to flip some of my adjectives, you can use it as a clean and minimal Content Slider, Testimonial Rotator, Post-Excerpt Rotator and so on.
Source: onextrapixel.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" type="text/css" href="css/adjector.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/adjector.js"></script>
2. HTML
<h1 class=“contain”>
<span class="adject">Im</span>
<span class=“adject">Robo | Geek | Cool | Lazy | Nerd</span>
</h1>
There is not much difference in the above two sections of code but for the <h1> and <div> tags. The <div> was used in Demo 4 is on the demand of styling the text using CSS. The common classes in both the examples are “contain” and“adject”
- “contain” It is like a container which has objects which will be flipped/rotated. There can be more than one object for the same purpose as in the first example.
- “adject” This class contains the content that has to be flipped/rotated. The content is separated by a separator which is by default ‘|’ but can be changed using jQuery (talked about the same later in the tutorial)
3. JAVASCRIPT
$(document).ready(function(){
$(".contain .adject").adjector({
arm: 0
});
});
The above JS code should be called in the <header> after including the adjector.js file in your HTML document. The code above will call the adjector function and tell it the container tag - “.contain” and flipper tag - “.adject” and supply the input values. If the input values are not specified the plugin will use a set of default values as in Demo 1. But do make sure that the “.contain” and “.adject” classes are mentioned correctly (though you can change the name). Following are the options which you can play with using jQuery:
- sep It is the char that you are using to differentiate between the blocks of strings, by default it is set to ‘|’ but you can change it as in Demo 3 code.
- stay It is the time duration, in ms, for which a given text block stays on the screen. For single words like in Demo 1-3 a lower value is used but for paragraph content, as in Demo 4, a value of around 3000ms is used (mention only the numerical value and not the units – ms).
- trans It is the time duration, in ms, of the animation, ie., it is the time between the start of flip/rotate and the end of flip/rotate (mention only the numerical value and not the units – ms).
- arm Consider a circle the centre of which is rotating and the text is at the other end of the radius. If the arm (radius) is 0 then the text will rotate at the centre, i.e, flip on the axis (Demo 2). If it +ve the text will rotate from left-to-right and inverse is true for a -ve value. The magnitude of arm will determine the displacement while flipping/rotating. Try and do some experiments to get a better understanding.
