Advance Swapping Panel Animation with JavaScript


In this article, we are creating advance swapping panel animation with Javascript. But what is the meaning of swapping panel here? Well, in this tutorial we are creating a simple and very amazing three panel that swap with each other when the user clicks on it. So when the user clicks on the first panel it will swap and slide on the place of the third panel. Now in this tutorial, we are creating three panels and swap it with each other. Let me show you what we are creating.

Swapping Panel Animation

In the above image, you will see we are creating three panels. In the image first panel is active and have an active hover effect. When you move your mouse over the panel you will see the shadow effect on the panel. Now we will look at the example of how to create this amazing animation.

We are adding a click event on the panel. So when you click on the first panel it will swap and slide to the last panel position. When you click on the second panel the last panel swap and slide to the first and the first one slide and take the last position. Don’t get confused. I will explain it later in this article. So let’s get started and create Swapping panel animation.

Create Index.html and style.css

Well, when you are working with the javascript or any web application you need to add HTML code. As always we create the index.html file in the visual code editor. In this file, we create three panels and also link the style.css file. After creating the index file create the style.css file and link this file to the index.html file. In the head section of HTML file link style.css file.

Import this code in Index.html file

What is happening in the above code.

  • In the above code, we are first link style.css file in the head section.
  • create the container class and center the inner child elements.
  • In the container, class create the inner class and insert three layers using a division tag.
  • You will see at the last we are using Jquery in this tutorial. So to minimize the javascript code we are using jquery library.

Style.css

In this file, we are creating three panels and also center this panel. let me show you the stylesheet.

  • In the above CSS stylesheet, we first specify background radial gradient to the body tag.
  • we are using container class to center the element.
  • we will specify the inner class and applied the position relative. using relative property we specify the absolute position to the panels and space them at the same place.
  • Select panels using Layer1, Layer2, and Layer3 class. To select all this class we are using the class attribute and specify a matching value. Using * we select all three classes and specify position absolute and place then at the same position.
  • Create a hover effect in CSS and specify box shadow and scale property.

JavaScript

Now keep eye on this topic. Now the complicated part is javascript. In javascript, we have done most of the things. We will first add Jquery and use it to minimize the javascript selection code. To create swapping panel animation we create the click event. So in the javascript code, we also add a click event and change some CSS properties.

Now, look at the JavaScript code. Import this code just after the closing <Body> tag.

Update Index.html file.

  • Update Index.html file and add script tag. In this script tag, we are adding javascript code.
  • we will first call the Jquery library onload event. This event will execute when the DOM element is completely loaded.
  • In this function, we create three variable layer1, layer2, and layer3. You will see we specify some value to that variables. Now, these values are the position. To get these position just use the Jquery position() function and call left property.
  • Add this code in your script tag to see the left value of layer.  var value = Layer1.position().left; alert(value);  This code will give you the left position of the element. we use this code to get the value of the element and specify the left value.
  • So in the javascript code, you will see we specify this value to the panel. After specifying the value it will separate and use this left value to swap the element.
  • Look at this code

    In this code, we will create a click event using on method.
  • So Using on the method we get the event and using the event parameter we get the type and target value. Target value refers to the clicked element.
  • Using this click event we will first check which element is clicked and then use if statement we change CSS left the property of each element.
  • So when you click on the element it will check first which element is clicked and then just after that change the left property of remaining element that’s it.
  • So I hope you understand what is going on.

Run Index.html file and click on the layers you will get swapping panel animation.

That is all for now, We will see you in the next article. For more information visit our youtube channel.