Adding visual effects to a website’s design is crucial for enhancing the user experience. Among these effects, a slow fade-in of elements is particularly effective in capturing user interest and giving the entire page a professional impression. In this article, we will explain in detail how to use the jQuery plugin “jquery.champagne.js” to randomly fade in list tag (li) elements in an easy-to-understand manner.
By using this plugin, each element in the list will be displayed slowly in random order when the page is displayed or when a specific action (such as a user clicking a button) occurs. This kind of effect is especially effective on portfolio sites or product listing pages.
What is jquery.champagne.js?
“jquery.champagne.js” is a lightweight jQuery plugin that allows specific elements on a webpage to fade in randomly. Although its structure is simple, it is widely used by designers and developers because it allows for the easy implementation of visually impactful effects. The standout feature of this plugin is that list elements appear in random order, as if champagne bubbles are rising one after another. This adds movement and visual rhythm to content such as lists or galleries.
CSS for Randomly Fading in List Tag Elements
First, let’s start by preparing the CSS to randomly fade in list tag elements. CSS is not only important for arranging and styling elements but also for controlling the speed and timing of the fade-in effect. Here, we use a stylesheet called champagne.css.
The following code is an example of CSS to set up a basic layout and style. You can customize this CSS to suit the design of your project.
<style>
body{
padding: 0;
text-align: center;
position: relative;
margin: 0;
height: 100%;
}
h1{
padding:10px 0;
font-size:18px;
line-height:1.4em;
}
</style>
<link rel="stylesheet" type="text/css" href="champagne.css">
In this CSS, the content is centered on the page, and the style for the h1 tag is adjusted. The champagne.css file contains keyframes animations to achieve the fade-in effect. Adjust these settings as necessary.
JavaScript to Randomly Fade in List Tag (li) Elements Using jquery.champagne.js
Next, let’s look at the JavaScript code to randomly fade in list tag elements. In this code, we load the jQuery library and the jquery.champagne.js plugin, and apply the fade-in effect to the target list tags.
Load the jquery.min.js and jquery.champagne.js files. Then, use $(selector).champagne() to apply the effect to the area (ul.champagne) where the fade-in will occur.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.champagne.js"></script>
<script type="text/javascript">
$(function () {
$('ul.champagne').champagne();
});
</script>
By adding this code to your HTML file, the list with the “champagne” class applied to the ul tag will fade in in random order when the page loads. Even if you’re unfamiliar with jQuery, this plugin allows you to easily create dynamic effects.
HTML for Randomly Fading in List Tag Elements
Next, let’s explain the HTML structure for the list tag elements. To apply the fade-in effect, the list tags need to have a specific class name.
We prepared multiple list tags (li) within the area that will fade in randomly (class=”champagne”).
<div class="clWrap">
<h1>Randomly Fade in List Elements</h1>
<div class="container">
<ul class="champagne">
<li class="post-item post-item-69"><a href="https://dad-union.com" title="DAD UNION">DAD UNION</a></li>
<li class="post-item post-item-78"><a href="https://dad-union.com/category/javascript" title="JavaScript">JavaScript</a></li>
<li class="post-item post-item-75"><a href="https://dad-union.com/category/jquery" title="jQuery">jQuery</a></li>
<li class="post-item post-item-60"><a href="https://dad-union.com/category/php" title="PHP">PHP</a></li>
<li class="post-item post-item-57"><a href="https://dad-union.com/category/css">CSS</a></li>
</ul>
</div><!--/container-->
</div>
In this example, the ul tag with the “champagne” class is the target for the fade-in effect. You can freely edit the list items (li) according to the content of your site.
Demo Page: Randomly Fade in li Tag Elements with jquery.champagne.js
For those who want to check the actual behavior, you can refer to the demo page from the link below. This page lets you see in real time how the code introduced above works.
jquery.champagne.js: Demo Page for Randomly Fading in li Tag Elements
Clicking this link will display a list with a random fade-in effect, allowing you to experience it in action. This gives you the opportunity to preview the effect and use it as a reference for customization.
Source: champagne.js | fresh tilled soil
You can download the source code for this plugin from the following link. If you want to further customize it or learn more about the internal structure of the plugin, refer to this resource.
Source: champagne.js | fresh tilled soil
Conclusion
By using jquery.champagne.js, you can easily add visual appeal to your webpage. The effect of randomly fading in list elements increases movement on the page and captures users’ attention. If you’re looking to incorporate new elements into your site’s design, be sure to give this plugin a try. Going forward, it’s important to always consider user-friendly web design from the user’s perspective.
Stay tuned as we continue to introduce technologies and tools that engineers and designers can easily implement.
※ Please use at your own discretion if you reuse this content.
Do not reuse the Google Analytics tag within the head tag of the demo page.
