In this article, we will learn how to implement the rapid animation effect for a set of images using the JavaScript RapidLayersAnimation plugin. The rapid page or image transition is a type of layered animation effect used in developing web pages for getting some high-quality navigation system worthy of a smart browse.
Note: Please download the JavaScript RapidLayersAnimation plugin in the working folder and include the required files in the head section of your HTML code.
<link href=”https://use.typekit.net/idd0zbe.css” rel=”stylesheet”type=”text/css”/>
<link href=”base.98fd6c19.css” rel=”stylesheet” type=”text/css”/>
<script src=js.00a46daa.js”></script>
Example: The following example demonstrates the rapid layered animation effect for the given images using HTML controls and JavaScript-based RapidLayersAnimation plugin. Different classes like “grid__item”, “menu__item”, “menu__item–current” of the “base.98fd6c19.css” file of the plugin are attached to the HTML tags as shown below for the expected output. HTML svg elements are also used for presenting the user cursor.
<!DOCTYPE html><html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1" />
<title>Image Layers Animation Plugin</title>
<meta name="description"
content="A fast image layers
animation for a website" />
<meta name="keywords"
content="Enter keywords for search" />
<link rel="stylesheet"
<link rel="stylesheet"
type="text/css"
href="base.98fd6c19.css" />
</head>
<body class="loading">
<main class="intro">
<div class="frame">
<p class="frame__info">
Click the middle Active menu item.
</p>
</div>
<div class="content">
<!-- Enter the images to be shown at
the end in grid format-->
<div class="grid">
<div class="grid__item grid__item--a"
style="background-image: url(background18.PNG);">
</div>
<div class="grid__item grid__item--b"
style="background-image: url(background17.PNG);">
</div>
<div class="grid__item grid__item--c"
style="background-image: url(background2.jpg);">
</div>
<div class="grid__item grid__item--d"
style="background-image: url(background3.jpg);">
</div>
<div class="grid__item grid__item--e"
style="background-image: url(background11.jpg);">
</div>
<div class="grid__item grid__item--f"
style="background-image: url(background14.jpg);">
</div>
</div>
<nav class="menu">
<a class="menu__item">
<!-- Enter menu name and sub-title related to it-->
<h3 class="menu__item-title">
Menu 1
</h3>
<p class="menu__item-subtitle">
Sub-title
</p>
</a>
<!-- Enter active menu for click event output,
notice the plugin's classname-->
<a class="menu__item menu__item--current">
<h3 class="menu__item-title">
Active Menu
</h3>
<p class="menu__item-subtitle">
Click here
</p>
</a>
<a class="menu__item">
<h3 class="menu__item-title">
Menu 3
</h3>
<p class="menu__item-subtitle">
Sub-title
</p>
</a>
</nav>
</div>
<div class="layers">
<!-- Provide the images for fast image layer animation
to be provided as background images.-->
<div class="layers__item">
<div class="layers__item-img"
style="background-image: url(background2.jpg);">
</div>
</div>
<div class="layers__item">
<div class="layers__item-img"
style="background-image: url(background3.jpg);">
</div>
</div>
<div class="layers__item">
<div class="layers__item-img"
style="background-image: url(background11.jpg);">
</div>
</div>
<div class="layers__item">
<div class="layers__item-img"
style="background-image: url(background12.PNG);">
</div>
</div>
<div class="layers__item">
<div class="layers__item-img"
style="background-image: url(background13.PNG);">
</div>
</div>
<div class="layers__item">
<div class="layers__item-img"
style="background-image: url(background14.jpg);">
</div>
</div>
<div class="layers__item">
<div class="layers__item-img"
style="background-image: url(background15.PNG);">
</div>
</div>
<div class="layers__item">
<div class="layers__item-img"
style="background-image: url(background19.PNG);">
</div>
</div>
<div class="layers__item">
<div class="layers__item-img"
style="background-image: url(background20.PNG);">
</div>
</div>
<div class="layers__item">
<div class="layers__item-img"
style="background-image: url(background16.jpg);">
</div>
</div>
</div>
</main>
<svg class="cursor"
width="220"
height="220"
viewBox="0 0 220 220">
<circle class="cursor__inner"
cx="120"
cy="120"
r="60">
</circle>
</svg>
<script src="js.00a46daa.js"> </script>
</body>
</html>
|
Output: