By adding smooth animations during page transitions on your website, you can provide users with a pleasant browsing experience.
Especially with animsition.js, a convenient library that allows you to easily implement visual effects like slide, fade, rotate, flip, and zoom using simple code.
In this article, we will explain in detail how to apply animations to page transitions and link actions using animsition.js.
We also provide actual code examples and a demo page, so feel free to refer to them.
- CSS Code for Animating Page Transitions and Link Actions
- HTML Code for Animating Page Transitions and Link Actions
- JavaScript Code to Animate Page Transitions and Link Actions Using animsition.js
- Code for the Destination Page (page2.html)
- Demo Page Using animsition.js to Animate Page Transitions and Link Actions
- Source: ANIMSITION
- Summary
CSS Code for Animating Page Transitions and Link Actions
* Make sure to include the animsition.css file. Adjust other settings as needed.
<style type="text/css">
body{
font-size: 16px;
line-height: 1.4em;
text-align: center;
}
h1{
text-align: center;
font-size: 20px;
padding: 20px 0;
line-height: 1.4em;
}
</style>
<link href="animsition.css" rel="stylesheet">
HTML Code for Animating Page Transitions and Link Actions
* Prepare a page area with class="animsition". For links that trigger a transition, set class="animsition-link".
<div class="animsition">
<h1>This area will animate on page transitions or link actions.<br>Click the text link below to see the fade-in and fade-out effect when switching pages.</h1>
<div><a class="animsition-link" href="page2.html">Click here to switch to the next page.</a></div>
</div>
JavaScript Code to Animate Page Transitions and Link Actions Using animsition.js
* Include jquery-1.11.0.min.js and animsition.js. Then initialize with $('.animsition').animsition();
<script src="jquery-1.11.0.min.js"></script>
<script src="animsition.js" charset="utf-8"></script>
<script>
$(document).ready(function() {
$('.animsition').animsition();
});
</script>
Code for the Destination Page (page2.html)
* The content of the destination page (page2.html) is almost identical to the original page (index.html).
<style type="text/css">
body{
font-size: 16px;
line-height: 1.4em;
text-align: center;
}
h1{
text-align: center;
font-size: 20px;
padding: 20px 0;
line-height: 1.4em;
}
</style>
<link href="animsition.css" rel="stylesheet">
</head>
<body>
<div class="animsition">
<h1>You have switched pages.<br></h1>
<div><a class="animsition-link" href="./">Click here to return to the previous page.</a></div>
</div>
<script src="jquery-1.11.0.min.js"></script>
<script src="animsition.js" charset="utf-8"></script>
<script>
$(document).ready(function() {
$('.animsition').animsition();
});
</script>
Demo Page Using animsition.js to Animate Page Transitions and Link Actions
Demo Page: Animations on Page and Link Transitions Using animsition.js
Source: ANIMSITION
Here is the source:
Summary
By using animsition.js, you can easily implement animations for page transitions and link clicks without having to build your own special animation library.
With just a bit of CSS and JavaScript, you can add smooth fade-in/fade-out, slide, or flip effects—making it ideal when you want to bring your website to life.
Try incorporating the sample code from this article to create animations that best fit your site.
* If you reuse this content, please do so at your own risk.
Do not copy the Google Analytics tag included in the demo page’s <head> section.
