CSS3 has opened a whole new world for designers and developers to not only add ‘stand-out’ content to their websites but also to make it talk to the user.
In this tutorial I’ll help you add one such snippet to your own website. Adjector.js is a flexible, minimal and elegant content flipper/rotator which takes only a few minutes to integrate. So let’s get started.
You can also take a look at our other tutorial that allow you to add rotating text to your website with minimal markup changes.
[tut demo=”https://onextrapixel.com/examples/adjector-content-flipper/” download=”https://onextrapixel.com/examples/adjector-content-flipper/adjector-content-flipper.zip”]
Using Adjector.js
Where you can use it
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.
How to use it
Adjector.js is a simple jQuery plugin and takes only a couple of minutes to integrate and here is how:
HTML
<h1 class=“contain”> <span class="adject">Im</span> <span class=“adject">Robo | Geek | Cool | Lazy | Nerd</span> </h1>
The above HTML Markup is for Demos 1-3.
<div id="sub" class=“contain"> <span class=“adject”> [ Paragraph 1 ] | [ Paragraph 1 ] | [ Paragraph 1 ] | [ Paragraph 1 ] | [ Paragraph 1 ] </span> </div>
The above HTML Markup is for Demo 4.
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).
JS
<script type="text/javascript">
$(document).ready(function(){
$(".contain .adject").adjector();
});
</script>
The above JS is for Demo 1.
<script type="text/javascript">
$(document).ready(function(){
$(".contain .adject").adjector({
arm: 0
});
});
</script>
The above JS is for Demo 2.
<script type="text/javascript">
$(document).ready(function(){
$(".contain .adject").adjector({
sep: "|",
stay: 1000,
trans: 800,
arm: -150
});
});
</script>
The above JS is for Demo 3.
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.
CSS
Though most of the CSS is determined by the JS depending on the input values and called in-line there is a few line of code which found its place in a separated .css file.
/* ====================================
* adjector.css
* ====================================
* Copyright 2014 Arsh Shah Dilbagi.
* http://robo.im
*
* ================================= */
.adjecting {
display: inline-block;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin-x: 50%;
}
.adjecting .front-face, .adjecting .back-face {
display: inline-block;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.adjecting .front-face {
position: absolute;
}
.adjecting .back-face {
position: relative;
}
/* ======================================================
* CSS for Demo pages only - Not required with the plugin
* =================================================== */
#robo-wrapper {
display: inline-block;
width: 100%;
text-align: center;
}
#robo-wrapper h1 {
font-family: 'Raleway', sans-serif;
font-size: 100px;
font-weight: 900;
text-transform: uppercase;
}
#robo-wrapper #option-details {
display: inline-block;
font-size: 18px;
padding: 2px 7px;
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.08);
font-family: monospace;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
}
.paragraph-content #heading {
width: 400px;
height: 70px;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
font-size: 60px;
font-weight: 900;
text-align: center;
}
.paragraph-content #sub {
width: 400px;
height: 300px;
margin: 0 auto;
font-size: 20px;
text-align: justify;
}
Most of the above code is either simple CSS or basic CSS3 properties which I believe you will have already gone through. The major transform properties are called from the jQuery according to the user input and this is what makes this plugin a lot more flexible than others.
[tut demo=”https://onextrapixel.com/examples/adjector-content-flipper/” download=”https://onextrapixel.com/examples/adjector-content-flipper/adjector-content-flipper.zip”]
Conclusion
Adjector.js is a great jQuery plugin which anyone can use and make his/her content talk. So what are you waiting for infuse life into your content now! I hope you enjoyed following this tutorial and my plugin. Feel free to drop me a line in the comments below.
