In web design, the impact of visual motion on user experience is significant. Especially when using a grid layout, it is possible to create a neat and orderly impression while making it even more attractive with dynamic animations. In this article, I will explain in detail how to display a grid area with a bouncing animation using a jQuery plugin called dylay.js. I will guide you step by step for easy understanding, so please read through to the end.
What is dylay.js?
dylay.js is a jQuery plugin that dynamically arranges grid layouts and displays elements with smooth animations. By using this plugin, you can add motion to your page design and provide an interactive experience for users. It is especially appealing because it allows you to achieve bouncing animations for elements, giving your grid layout a unique charm that others do not have.
How to Display a Grid with Bouncing Animation Using dylay.js
Let’s take a closer look at how to actually display a grid area with a bouncing animation using dylay.js. First, we will load the necessary files and perform basic settings. After that, we’ll add a sorting function so that the grid elements can be rearranged freely.
JavaScript Setup
First, load the jquery.min.js, jquery.easing.1.3.js, and dylay.js files. Next, use dylay.js to set up the grid layout. Use the following code to display the grid elements with a bouncing effect. Write $(grid area).dylay({speed and easing settings}) and $(grid area).dylay('sort', sorting rule) for sorting by the specified rule.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="dylay.js"></script>
<script type="text/javascript">
$(function() {
$('#dylay').dylay({
speed:1500,
easing:'easeOutElastic',
selector:'>li' // Child elements to be arranged
});
// Sorting
$('#sorts a').on('click', function () {
$('#dylay').dylay('sort', $(this).data('sort-by'), $(this).data('sort-way'));
return false;
});
});
</script>
In this code, the speed and easing are set to make the grid elements appear with a bouncing effect. Additionally, by adding the sorting function, it is possible to rearrange the grid elements simply by clicking a link.
CSS for Displaying the Grid with Bouncing Animation
Next, define the styles for the grid elements used by dylay.js in CSS. This is the CSS description for the grid area (#dylay li). Please add the following code to the style tag in your HTML file.
<style type="text/css" media="all">
<!--
body{
margin:0;
padding:0;
}
h1{
text-align:center;
font-size:18px;
font-weight:bold;
padding:15px 0 10px 0;
line-height:1.4em;
}
.clWrap{
width:80%;
margin:0 auto;
}
#sorts{
margin:0 auto;
padding:0 0 20px 0;
list-style:none;
width:200px;
}
#sorts li{
padding-bottom:4px;
}
#sorts li a{
color:#0066FF;
font-size:16px;
text-decoration:none;
}
#sorts li a:hover{
color:#0099FF;
}
#dylay{
margin:0;
padding:0;
list-style:none;
}
#dylay li{
float:left;
padding:3% 0;
margin:1%;
border-radius:5px;
background:#0066FF;
list-style:none;
font-size:14px;
text-align:center;
font-weight:bold;
color:#FFFFFF;
width:10%;
}
-->
</style>
This CSS code defines the appearance of the grid elements. The float property is used to arrange the elements horizontally, and the border-radius is used to round the corners, adding a softness to the appearance.
HTML Example
Next, I’ll explain how to use dylay.js in an actual HTML file. Below is an example of HTML to set up the grid layout.
Set the group (class=”voyelle” or class=”consonne”) and sort order (data-foo=”number”) for the grid area (id=”dylay”).
<div class="clWrap">
<h1>Display Grid with Bouncing Animation<br />
(You can also sort with the links below)</h1>
<ul id="sorts">
<li><a href="#">Text Ascending</a></li>
<li><a href="#" data-sort-way="desc">Text Descending</a></li>
<li><a href="#" data-sort-by="foo">data-foo Value (Ascending)</a></li>
<li><a href="#" data-sort-by="foo" data-sort-way="desc">data-foo Value (Descending)</a></li>
</ul>
<ul id="dylay">
<li style="height:20px;" class="voyelle" data-foo="5">E</li>
<li style="height:40px;" class="consonne" data-foo="6">F</li>
<li style="height:40px;" class="consonne" data-foo="3">C</li>
<li style="height:20px;" class="consonne" data-foo="2">B</li>
<li style="height:60px;" class="voyelle" data-foo="4">D</li>
<li style="height:60px;" class="consonne" data-foo="1">A</li>
<li style="height:20px;" class="consonne" data-foo="7">G</li>
<li style="height:20px;" class="voyelle" data-foo="8">H</li>
<li style="height:40px;" class="consonne" data-foo="9">I</li>
<li style="height:40px;" class="consonne" data-foo="10">J</li>
<li style="height:20px;" class="consonne" data-foo="11">K</li>
<li style="height:60px;" class="voyelle" data-foo="12">L</li>
<li style="height:60px;" class="consonne" data-foo="13">M</li>
<li style="height:20px;" class="consonne" data-foo="14">N</li>
<li style="height:20px;" class="consonne" data-foo="15">O</li>
<li style="height:60px;" class="consonne" data-foo="16">P</li>
<li style="height:20px;" class="consonne" data-foo="17">Q</li>
<li style="height:40px;" class="consonne" data-foo="18">R</li>
<li style="height:20px;" class="consonne" data-foo="19">S</li>
<li style="height:40px;" class="consonne" data-foo="20">T</li>
<li style="height:20px;" class="consonne" data-foo="21">U</li>
<li style="height:40px;" class="consonne" data-foo="22">V</li>
<li style="height:60px;" class="consonne" data-foo="23">W</li>
<li style="height:40px;" class="consonne" data-foo="24">X</li>
<li style="height:60px;" class="consonne" data-foo="25">Y</li>
<li style="height:40px;" class="consonne" data-foo="26">Z</li>
</ul>
</div><!--/clWrap-->
In this HTML code, the li tags are placed as grid elements within the ul tag with id=”dylay”. The class and data-foo attributes are used to provide sorting criteria for each element.
dylay.js: Demo Page for Displaying a Grid with Bouncing Animation
If you want to check the actual motion, please refer to the demo page from the link below. On the demo page, you can see the grid elements being displayed with a bouncing effect and how the sorting function works.
dylay.js: Demo Page with Bouncing Animation
Source: DyLay – a simple dynamic layout jQuery plugin
Source: DyLay – a simple dynamic layout jQuery plugin
Conclusion
In this article, I explained in detail how to display a grid area with a bouncing animation using dylay.js. By utilizing this plugin, you can easily create visually appealing web pages. It is user-friendly and easy to customize, so be sure to give it a try. In the future of web design, dynamic grid layouts will become an even more important element.
Please note: If you reuse this content, do so at your own risk. Do not reuse the Google Analytics tag from the demo page.
