Page Swipe Transition
Create a cinematic exit. Instead of an abrupt page load, this script slides a colored panel across the screen to wipe away the old content.
Click below to simulate the transition effect.
Copy the Script
<style>
#loader {
position: fixed; top: 0; left: -100%;
width: 100%; height: 100%;
background: #333; transition: left 0.5s;
z-index: 9999;
}
</style>
<div id="loader"></div>
<script>
function goTo(url) {
var layer = document.getElementById('loader');
layer.style.left = '0'; // Slide in
// Wait for animation then go
setTimeout(function() {
window.location = url;
}, 500);
}
</script>
<a href="#" onclick="goTo('next.html'); return false;">Next Page</a>Frequently Asked Questions
Yes. You need to intercept link clicks using JavaScript (`e.preventDefault()`), trigger the animation, and then redirect the window location after the animation finishes.
Yes. By adjusting the CSS `transform: translateX()`, you can make the swipe come from the left, right, top, or bottom.
Yes. Since it essentially just delays the standard link navigation by a few milliseconds, search engines can still crawl the links normally.