When building a website, it is intended to be striking, but without sacrificing usability and functionality. To achieve this, different animations or effects can be used to call user attention. However, implementing an animation can be limiting; for example, the wide variety of mobile devices on the market generate the need of implementing websites for a big quantity of different screen sizes.
Making an animation with JavaScript is relatively easy even if you are a beginner. It must be considered that, to begin, it is needed to be familiar with the JS events basics. These events allow detecting when a container has been accessed, the mouse has been moved, the user has clicked an element; among others. Once the event occurs, a specific section of code is executed, usually a function.
In this case, we will perform a simple animation : an element will go up little by little and will show a brief description when the mouse cursor enters it.
First, the HTML needs to be created, as follows:
As you can see, there are two events to consider, onmouseenter and onmouseleave. The onmouseenter event detects when the mouse enters the element where the event has been declared. Once the event occurs, the function inover (explained below) will be executed. In a similar way, the onmouseleave event detects when the mouse goes out of the element. Again, once the event happens, a function will be executed ; in this case the function outover.
The functions inover and outover are defined as follows:
The inover function receives the item with the class title-project as a parameter and adds it to the start class. Then, the frame function is called in time intervals defined with the setInterval method.
The aim of the frame function is to add up 2px to the position title-project start currently has. The frame function is called until the position of title-project start is 176px and the the information that title-project contains is shown; When the position is equal to 176px the clearTimeout method is called to stop executing the frame function inside the SetInterval.
On the other hand, The outover function receives the title-project start element as a parameter and removes the start class from it. Later, it calls the clearTimeout method to avoid calling the frame function and returns the element position to 0px; returning it to its original state and hiding the message.
Finally, CSS is used to create the starting styles:
In this case, CSS is used to define font sizes, background color and the height of the container. The following properties are applied to the container with col-sm-4, CSS would be defined as follows:
This is to avoid that the container is not displayed with its information when the animation has not been made.
As shown in previous example, implementing an animation with JavaScript is pretty easy; you just need to know about JS events. Although this blog only discussed two types of events (onmouseenter and onmouseleave) and a basic animation, JavaScript has a long list of defined events that will help you to create animations according to your needs.
In the next blog entry, I will explain the same animation but this time we will rely on CSS3 .
To see the result of this animation, you can go here
