Hit enter after type your search item

Create animated intro by using jQuery

Animated intro by jQuery

The animated intro can be eye-catching as a user lands on your website; for getting the user attention. For creating animated text or mixed content intro, you may use the Gif file, flash etc. as an easier solution. However, it can be heavier than using the simple animated text.

In this tutorial, I am going to share a nice jQuery solution for creating animated intro for your website. This is a small piece of jQuery code with CSS. See the next section for a live demonstration and complete code.

A demo of jQuery animated intro

In the markup section for demonstrating this animated intro, the information is placed inside the div tags. The four main div elements with classes – slide (in all div tags), slide-a, slide-b, slide-c, and slide-d (one in each div) are created. The inner div tags are used to place the content of intro. You may place the simple text or other content inside these div tags.

All these main div elements are referenced in the jQuery code for creating the animation. Have a look at the live demo by clicking the image or link below:

jQuery animated intro

See online demo and code

The CSS used for the demo:


The markup:


Get the complete code, including the jQuery code from the demo page.

Credit: Mhmdhasan

This div height required for enabling the sticky sidebar