Spicing Up the Bootstrap Carousel with CSS3 Animations

By admin / 9:47 pm, 26 Jun 2016 / CSS, jQuery / 0 Comment

In this article, I’m going to show how to add some fun animation effects to the Bootstrap Carousel.

Here we are going to use Animate.css, by Dan Eden for required animations.
To speed up the process, grab a starter template from the Bootstrap website and add the necessary files.
Here’s the code for the Bootstrap Carousel:

As a first step in this direction, delete the data-ride=”carousel” attribute from the .carousel element. The data-ride attribute initializes the carousel without having to write any JavaScript code. However, we’re going to take control of the carousel using JavaScript, therefore the data-ride attribute won’t be necessary.

Adding CSS to the Carousel:-

The snippet above ensures that the elements start their animation sequentially.

Writing the jQuery
Let’s start by initializing the carousel. In your custom JavaScript file, add this code snippet:

We’ve set the carousel in motion. Next, we tackle the animation.
To animate the captions in the first slide, the script has to fire as soon as the page finishes loading in the browser. However, to animate subsequent slides as they come into view, our code will have to fire on the slide.bs.carousel event. This means that the same code will be used twice: on page load and on the slide.bs.carousel event.

Here’s the code:

Check out this demo:-

View Demo

Add transition delay while showing sub-menus in navigation using jquery and CSS

By admin / 9:18 pm, 26 Jun 2016 / CSS, jQuery / 0 Comment

In this tutorial I will guide how to set increasing transition delay in sub-menus. Transition delay timing in every sub-menu will be more than what delay timing is set in just previous sub-menu. This will be done with help of jquery and CSS.

First, Check out this demo. This is what we are trying to achieve:-

View Demo

First, we will set global transition-delay in every sub-menu with CSS , like this :-

You can see transition delay is not defined here, so delay is set automatically 0s in every li. Now using jQuery we have to set transition delay in increasing order with every sub-menu. Here we go :-

We have set 60ms delay, so with every sub-menu, delay will be increased 60ms more than from previous sub-menu.

How To Create Ripple Effect Using jQuery & CSS3

By admin / 7:37 pm, 22 May 2016 / CSS, jQuery / 0 Comment

Ripple effect is very cool animation where an ink-drop like element moves out radially from the position where the user taps/clicks. In this post i am going to show you how you can create Ripple effect using jQuery and css.

Basically the main logic is create circle at specific cordinates(i.e where user click/taps) inside linked element(with overflow hidden).
The circles are initially scaled down to 0% and then animated to 100% so it can cover the parent element. As the circle increased their opacity will be
decreased and after that we will remove that circle using jQuery so when user gain click on element same actions will be performend.

So lets create button in html page:-

Now add this css:

Now its time to handle click events and generate the circle inside that element:-

Check out this demo. How it works :-

View Demo

Create a bouncing scroll down button using CSS and jQuery

By admin / 5:54 pm, 18 Apr 2016 / CSS, jQuery / 0 Comment

You must have seen in website where they use a bouncing scroll down button telling visitor to click it for scrolling down to the page. Here is a demo how can you do it.
First add this HTML where you want to show this button.

Now add this css which will animate your button :-

Now the final step is you have to use jQuery for scrolling down on click :-

You can check the demo below to see the final effect.

View Demo

Animate Html Elements everytime you scroll in viewport

By admin / 3:39 am, 15 Apr 2016 / CSS, jQuery / 0 Comment

You have been used so may plugins for revelaing HTML contents with animation in your website. As for example if you have used Wow.js , you must have noticed that it triggers animation only once when you scroll in contents in viewport.

What if you want animation triggers everytime you scroll in?

There is a solution – inViewport.js.
It enables you to trig animation only when content is in viewport. This is all we are trying to get. 🙂

In this trick i am using my own custom CSS for animation.
This is CSS part :-

class:slideanimlr for animating content left to right
class:slideanimrl for animating content right to left
class:slideanimzoom for animating content zoom in
class:slideanimbt for animating content bottom to top

 

Here is the js part :-

Now add any of the above written class or your own animation in your content and let your content reveal with animation everytime you scroll in viewport 🙂

Create a simple Sidebar menus or off-canvas navigations using jQuery and CSS

By admin / 2:48 am, 15 Apr 2016 / CSS, jQuery / 0 Comment

Here is the HTML structure of sidebar navigation :-

Now create a button so that you can click them for toggling reveal of your sidebar menu:-

Now use this script for toggling sidebar menu :-

Add this CSS for styling of Navigation Layout. This is a simple layout, you can customize according to your theme style :-

Now we have to add functionality for sliding down menus containing sub-menus. Add this jQuery part in custom js file or add in footer :-

For menu which has child menus, you need to remove href tag from that menu. use this script for removing href tag :-

You can check the demo below to see the final effect.

View Demo

Display a loading icon or preloader until the page loads completely using jQuery and CSS3 animation

By admin / 12:06 pm, 11 Apr 2016 / CSS, jQuery / 0 Comment

Isn’t it a great idea to show a cool animated image until your website is loading? Of Course, it will improve your site’s user experience.

Here is simple jQuery part :-


Add this HTML code just after opening <body> tag :-


Now use CSS3 animation to give a smooth rotating effect with transition :-

That’s it ! 🙂 You’r done.

Check our some stunning demos

View Demo 1
View Demo 2
View Demo 3
View Demo 4

How to Make Div Element 100% Height of Browser Window Using CSS Only

By admin / 12:42 am, 4 Apr 2016 / CSS / 0 Comment

There are many ways to make the height of your HTML elements to be exactly as the height of the browser screen, regardless of the screen resolution, browser, device, etc. Many of these options use JavaScript to find out the height of the window. But there’s a way to do this with pure CSS only.

What is Viewport-Percentage (or Viewport-Relative) Lengths?

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

So, by using viewport-percentage lenghts, HTML elements adjust automatically when the height or width of the screen changes.

There are a few options you may find useful:

vh (viewport height)
vw (viewport width)
vmin (viewport minimum length)
vmax (viewport maximum length)

Now, let’s have a look at a real example. Imagine you want to create a website with two sections, each one of them with the size of the browser window.

Here’s just a simplified code example of the HTML:

and here’s the CSS using vh:

That’s it.

Add animated plus minus symbol to a bootstrap accordion using CSS

By admin / 4:25 pm, 24 Mar 2016 / Bootstrap, CSS / 0 Comment

This is what we are trying to get :-

Capture  Capture1

Add class panel-icon__effect1 for plus-minus icon or panel-icon__effect2 for rotating plus-cross icon in top div :-

Now, add this HTML <span class="panel-icon pull-left"></span> for plus-minus icon we are talking about in every panel title:-

HTML part is done now. Now Add this css in your style.css

Done. Simple. 🙂 Isn’t it?

Final HTML code :-

CSS background-blend-mode Property

By admin / 4:09 pm, 24 Mar 2016 / CSS / 0 Comment

You can use anyone blend mode from all these available blend modes: