How to use jQuery and CSS3 to create beautiful website
For quite some time now the jQuery framework has been a great tool for creating beautiful web pages, and it gave us the means to code the designers idea into reality. In comparing with regular JavaScript the jQuery shortens the amount of time to code exactly the same thing by multiple factors.
//JavaScript
var array = document.getElementsByClassName("someClass");
for (index = 0; index < array.length; ++index) {
array[index].style.backgroundColor = "red";
}
//jQuery
$(".someClassjQuery").css("background-color", "red");
In the example above you can see the difference in amount of code. The code does exactly the same thing. It selects every div with „someClass“ name and colors that same div. In regular Javascript the function getElementsByClass goes through the whole DOM and puts all the elements with „someClass“ into na array, then we have to manually go through the whole array with the „for loop“ and do some action. The jQuery does that all for you.
By looking at this simple example, one can understand that using jQuery has become crucial in fast web development, and it became a standard in today’s coding. But it has flaws. People often confuse jQuery with JavaScript, and think they are two sperate coding languages. Their syntax maybe a little different, but they are the exact same thing. jQuery is nothing but a library with a set amount of functions that are predefined to match the developers common needs. Although JavaScript is a very fast language it cannot create those beautiful, fluid transitions, and animations as every designer would want them to be. It can only be done with CSS3, and it should be.
Why CSS3
The history of Cascading Style Sheets can easily be found on the Internet. The main difference between the previous CSS versions and the CSS3 is that the CSS3 is written in sperate documents or modules. The first working draft was published in June 1998 and it has been expanding ever since. As of 2012, there are over 50 working modules that are published by CSS Working Group.The main thing why CSS3 is so desirable are the animations that are available to use, and the simplicity of the syntax. Although there are quite a lot of animations, transitions, transformations that are available we will be focusing on using them with jQuery, but keeping the fluidity of CSS. A lot on CSS3 can be found http://www.html5andcss3.org/css3animation.php
Changing the key values only
In my experience, I learned that the main problem with the CSS3 is the word „when“. When will some animation occur. Although the CSS3 can be used as a standalone animations „generator“, I found that the best way to use it is with a little help of jQuery with changing of the key values in CSS. The CSS doesn’t support events. It has a hover effect, but only as a type of CSS selector, and it works great for simple onHover animations. For example:
.main_conatiner{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
box-sizing: border-box;
}
.victim{
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid #ccc;
background-color: #eee;
cursor: pointer;
position: absolute;
top: 10px;
left: 10px;
transition: .5s;
}
This code will change the color, size, and the decoration of the link when a user hovers over it. This could also be done with jQuery, but the main difference is that the jQuery uses an event, which triggers a function. In this function, you could add a class to the link which contains the exact the same attributes, or you could use a predefined jQuery function .css(); which takes two string parrametars which represent the attribute you want to style, and the value. For this kind of usage, it’s better to use CSS’s hover option, because it’s native, faster, and easier to implement, but developers will often turn to jQuery if more functionality is needed when you simply hover over a DOM element.
I mentioned earlier the keyword „when“. When is the main problem with the functionality of the WebPage. If you are an active developer you will hear thousands of times the word when. „When a user clicks here do this“, „When a user opens a page do that“ and on and on. And what better way to controlling the „when“ than with JavaScripts jQuery. This could be achieved with events. There are many types of events in jQuery, and it would be pointless to go through them all, so we will stick with the most commonly used. click();
In CSS there is a pseudo class called „:active“ and it gives a similar effect, but only when you click and hold your mouse down.
In the next section you will learn how to bind the click event with the CSS transitions.
Joining of the jQuery and CSS3
The effect i want to create with the examples belove is that a small div makes a round around the invisible box, than expands. The final touch is the spinning image that comes fading in.
First we will need a predefined element in HTML. A simple <div class=“victim“></div> will suffice.
This div hold’s an image with an opacity of 0. This image will be shown at the completion of all the transitions.
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="main_conatiner">
<div class="victim">
<img src="image.jpg" class="hidden_image" alt="">
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
.main_conatiner{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
box-sizing: border-box;
}
.victim{
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid #ccc;
background-color: #eee;
cursor: pointer;
position: absolute;
top: 10px;
left: 10px;
transition: .5s;
}
In CSS we will give the div it’s initial dimensions, color, and a couple more styles as shown in the example belove:
Now the jQuery part comes in, and we need to predefine a couple of things in order to get the transition effect we are looking after. There a couple of rules that need to be followed. To get the transition effect the CSS need’s to know what is the initial rule, and what will be the final rule in order to get the transition working. So if we want to move the div to the right, we will add a class that holds the atribute left: 510px. If the CSS didn’t know the inital left: 10px it would automatically jump to 510px without a nice and fluid transition. This is the part of changing the key values of the CSS with jQuery with an click event.
$(document).ready(function(){
$(".victim").click(function(){
$(this).addClass("go_right");
$(this).bind("transitionend", function(){
$(this).addClass("go_down");
$(this).bind("transitionend", function(){
$(this).removeClass("go_right");
$(this).bind("transitionend", function(){
$(this).removeClass("go_down");
$(this).bind("transitionend", function(){
expand();
});
});
});
});
});
function expand(){
$(".victim").css({"width":"610px", "height":"610px", "border":"none", "background-color":"#fff"});
fade_in_image();
}
function fade_in_image(){
$(".hidden_image").addClass("show_image");
}
});
The first line of code is a simple document ready function. It means that the there will be a function executed on a event that is called ready. Ready is a another jQuery function that triggers when the whole DOM of the document has been loaded.
The first step we have done is binded an click event to the to the selected div with the class „victim“. When that events occurs, we will trigger a function which will add a class of go_right.
go_right is a predefined class in CSS that has the atribute left: 510px;
.go_right{
left: 510px;
}
.go_right class will override the initial atribute left: 10px; and give the element a new value of 510px. The fun part is that this action will trigger the CSS module, and the transition of 0.5s will occur. That menas that the div won’t simply jump to the mark of 510px but it will slide there, and this will take 0.5s to complete.
The next line of code is very important in connecting the jQuery and CSS3 together.
$(this).bind(„transitionend“, function(){ ... });
We selected the element from the click event with „this“ selector and binded and event called transitionend witch triggers another function. transitionend is used because of the delay that CSS creates. Unless we use that event, the jQuery will fire all it’s functions much sooner than the CSS will be able to complete all the transitions, and we would not be getting the desired effect. So we delay the jQuery with this event, because it fires only when the CSS transition is finished.
So after the div slided to the right, we fire another function, that adds another class to our element.
.go_down{
top: 510px;
}
Following the logic as before, the div will slide down and fire another function on completion. This function will remove the class go_right and the div will slide to it’s horizontal starting point which is 10px;
This step will be repeated but this time, we shall remove on completion the go_down class. The div will slide in it’s original position, making a full circle around a borders of an invisible div.
When that happens, we will trigger an external function called expand(); . This function will expand the div to a sqare with the width and height of 610px. This action will also be affected by our transition because it’s in the same class, and the div has initial value of 100px. This time I wanted to show you how can jQuery add a temporary style to an element with a predefined function called .css(); As i have mentioned earlier this function can take two parameters which represent the atribute and a value in CSS, or it can take an array of multiple atributes and values. The syntax is a little bit different, but logic is the same. At the same time as this .css function fires we call another function that handles our image hidden earlier with the following atributes.
.hidden_image{
width: 100%;
height: 100%;
opacity: 0;
transition: 2s;
}
It has width and height of 100% which means that it will fill it’s parents div, opacity: 0, which means that is currently invisible, and transition of 2 seconds, which means that opacity and the dimensions will be animated, when changed. On firing the fade_in_image(); we add a class to the image called . show_image which holds the following atributes
.show_image{
opacity: 1;
transform:rotate(-3600deg);
-ms-transform:rotate(-3600deg); /* IE 9 */
-webkit-transform:rotate(-3600deg);
}
This class is interesting because it holdes another CSS3 property which is transform. Transform doesn’t need to have an initial value, because it takes the current value as a starting point. This class will slowly fade in our image, it will rotate our image to a -3600deg, and the width and height of 100% will follow the expanding div. And all of this will happen in a timeframe of 2 seconds predefinded in the earlier class.
The whole example can be seen on the following link:
http://devtvornica.com/blog_examples/blog_example1/
Conclusion
In this very simple example, we have demonstrated the potential capebilites of using two technologies that are commonly used in FrontEnd development. The CSS3 finally gives developers the tools needed to create beautiful animations, that make your website standout over the competition, and jQuery can be used as a kind of a controller for the words „when“ and „how“. There a couple of downsides of this whole animations thing, and that is the most common problem in web design. Browser compatibility. CSS3 is not supported on the older browsers. That is a fact that must be considered in predevelopment stage. I hope that you have found some useful information in this article.
See the latest updates on our social media channels
