JavaScript

jquery animation with easing to slightly display an image 【jquery.easing.js】

 

Animation during page loading is an effective way to enhance the user experience in web development. Especially, animations that incorporate visually appealing elements can grab users’ attention and promote intuitive interaction. This article explains how to implement an animation using jQuery that briefly displays an image with easing effects (smooth transitions) when the page loads.

What are jQuery and easing?

What is jQuery?

First, jQuery is a JavaScript library widely used to simplify web page operations. It is a familiar tool for many developers because it can be relatively easy to use even for beginners. jQuery allows for concise descriptions of element manipulation, animation implementation, event handling, and is very convenient in web development.

What is easing?

Next, let’s explain easing. It is a technique to add smooth transitions during animations to create natural movements. For example, it gives an effect where the motion starts slowly, accelerates in the middle, and slows down again at the end. Compared to simply linear animations, this creates a more visually pleasing and realistic impression. Especially when used in the display and hiding of buttons or menus, it offers a smooth and intuitive user experience.

In this article, we use the plugin jquery.easing.1.3.js to animate the temporary display of an image during page loading and then hide it again after a certain time. By applying this easing effect, you can give the animation natural smoothness, providing users with a pleasant experience.

Sample code

Loading required files and writing JavaScript

First, load jquery.min.js (version 1.6.2) and jquery.easing.1.3.js. This allows you to use jQuery’s basic functionality as well as additional features for implementing easing effects.

Next, write the JavaScript code to display the image when the page is loaded. This code will animate the image to show it a few seconds after the page is loaded and hide it again afterward.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
mode=1;

setTimeout("anime01()",500);

function anime02(){
    $(function(){
        $("#idLogo01").hover(function(){
            $(this).stop().animate({top:'0px'}, 600,'easeInOutCubic');
        },
        function(){
            $(this).stop().animate({top:'-70px'}, 600,'easeInOutCubic');
        });

    });
}

function mcheck(){
    if(mode==2){clearInterval("tid");anime02();}
}

function anime01() {    
    var openDelay = 500;
    var closeDelay = 2700;
    
    setTimeout(function(){$("#idLogo01").animate({top:'0px'}, 1000,'easeInOutCubic');}, openDelay);
    setTimeout(function(){$("#idLogo01").animate({top:'-70px'}, 600,'easeInOutCubic');}, closeDelay);
    mode=2;
    
    return;
}

tid=setInterval("mcheck()",3000);
</script>

In this code, the `anime01` function animates the image to show it at a specified position. After a certain time, the image is hidden again. There’s also functionality to show the image when the mouse hovers over it and hide it again when the mouse moves out. This dynamic visual effect provides users with an interactive experience.

CSS for styling

Next, we introduce the CSS code for accurately displaying the image. The image is initially hidden outside the browser, and it appears at the timing specified in the animation.

<style type="text/css">
<!--
body {
    margin: 0px;
    font-size:14px;
}
h1{
    font-size:16px;
    font-weight:normal;
    line-height:1em;
    text-align:center;
    padding:15px 0 0 0;
}
p{
    font-weight:normal;
    line-height:1.4em;
    text-align:center;
}
#idHeader{
    width:70px;
    margin:0 auto;
}
#idHeader a img{
    position:relative;
    z-index:10;
}
#idHeader #idLogo01{
    position:relative;
    top:-70px;
    cursor:pointer;
}
#idHeader #idLogo01 img{
    z-index:1;
    position:relative;
}
-->
</style>

Here, you can see that the image is hidden outside the browser by default. The `top` property is used to position the image outside the browser, and this property is manipulated through the JavaScript animation with easing effects to show or hide the image.

HTML structure

Next, we explain the HTML structure where the image is placed. We prepare an image area with the ID “idLogo01” to hold the image.

<div id="idWrap">
    <div id="idHeader">
        <div id="idLogo01"><a href="/" title="DAD UNION" target="_blank"><img src="logo01.jpg" width="80" alt="DAD UNION" border="0" /></a></div>
    </div>

    <h1>The logo image above briefly appears with easing animation.</h1>
    <p>Initially, the logo image appears and then hides outside the browser.<br>
    It will reappear when you hover over it, and hide again on mouse out.</p>

</div>

In this HTML structure, the image area with the ID “idLogo01” is the target of the animation. By combining the JavaScript and CSS described earlier, this enables the easing effect for the animation when the page loads.

Demo of displaying an image briefly with easing in jQuery animation

We have prepared a demo page where you can see the actual animation based on the code introduced here. You can check the animation’s behavior through the link below.

Demo of displaying an image briefly with easing in jQuery animation

Refer to the demo page and try incorporating the animation into your own project.

Source of the jquery.easing.1.3.js plugin

Finally, we introduce the source of the jquery.easing.1.3.js plugin and the types of easing effects.

Source of jquery.easing.1.3.js plugin: jQuery Easing Plugin (version 1.3)
Types of easing effects: Easing/jQuery

Try different types of easing effects and find the one that best suits your project.

　
※Please use this information at your own risk. Do not copy the Google Analytics tag from the demo page’s head tag.

Animation jquery.easing.js
RELATED POST