How to create websites like a PowerPoint slideshow

Photo by Patrick Hendry on Unsplash

Ever clicked on a link on a website and wondered why it couldn’t be as fluid as a PowerPoint slideshow?

Are you annoyed too of these standard jarring page loading?

Fortunately, there is a very simple solution. All you need is a little experience with CSS and JavaScript, and you can start building your own custom transitions.

In this article I will explain why you should use them in your next project and show you how to implement them on your website.

Why Use Cross-Document View Transitions?

Enhanced and improved user experience and resulting satisfaction when using the website.It improves the consistency of the website and thus contributes to a better understanding of the content.External libraries and frameworks are usually used for special effects, but this can lead to performance losses. The internal method, on the other hand, offers a faster and more effective way.

Implementing Cross-Document View Transitions

To implement cross-document view transitions, you will need to use a combination of HTML, CSS, and JavaScript.

Below, we will walk through the steps required to set up and implement these transitions.

Basic Setup

Start with a basic HTML structure for your multi-page application. Let’s create two simple HTML pages that we will navigate between.

Page 1: index.html

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Page 1</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<h1>Page 1</h1>
<a href=”page2.html” class=”transition-link”>Go to Page 2</a>
</div>
<script src=”transition.js”></script>
</body>
</html>

Page 2: page2.html

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Page 2</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<h1>Page 2</h1>
<a href=”index.html” class=”transition-link”>Go to Page 1</a>
</div>
<script src=”transition.js”></script>
</body>
</html>

CSS for Transitions

Define the CSS styles for the transitions. We will use basic fade-in and fade-out effects for simplicity.

/* styles.css */
body {
margin: 0;
font-family: Arial, sans-serif;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
transition: opacity 0.5s ease;
}

.hidden {
opacity: 0;
}

JavaScript for Handling Transitions

Implement the JavaScript logic to handle the transitions between pages. This includes adding event listeners to the links and managing the transition effect.

// transition.js
document.addEventListener(‘DOMContentLoaded’, () => {
const links = document.querySelectorAll(‘.transition-link’);

links.forEach(link => {
link.addEventListener(‘click’, event => {
event.preventDefault();
const targetUrl = event.target.href;

document.body.classList.add(‘hidden’);

setTimeout(() => {
window.location.href = targetUrl;
}, 500);
});
});
});

window.addEventListener(‘pageshow’, () => {
document.body.classList.remove(‘hidden’);
});

Putting It All Together

Make sure that the CSS and JavaScript files are correctly linked in both index.html and page2.html. When a user clicks on the link to navigate to another page, the current page will fade out, and the new page will fade in, creating a smooth transition effect.

Photo by Sean Whelan on Unsplash

Advanced Transitions

While the basic fade transition is a good starting point, you can get creative with more complex transitions such as slide, scale, or custom animations.

Here’s an example of a slide transition:

/* styles.css */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
transition: transform 0.5s ease, opacity 0.5s ease;
}

.hidden {
opacity: 0;
transform: translateX(-100%);
}

You can also add more intricate JavaScript to handle different types of transitions based on the navigation context.

Also make sure to check out this website for more information: https://developer.chrome.com/docs/web-platform/view-transitions/cross-document

Final Words

Cross-document view transitions are a powerful feature for enhancing the user experience in multi-page applications.

By implementing smooth and consistent transitions between pages, you can make your web application feel more modern and responsive.

Experiment with different types of transitions to find the ones that best suit your application’s design and user experience goals.

Happy coding!

Next-level User Experience With Cross-document View Transitions was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

​ Level Up Coding – Medium

about Infinite Loop Digital

We support businesses by identifying requirements and helping clients integrate AI seamlessly into their operations.

Gartner
Gartner Digital Workplace Summit Generative Al

GenAI sessions:

  • 4 Use Cases for Generative AI and ChatGPT in the Digital Workplace
  • How the Power of Generative AI Will Transform Knowledge Management
  • The Perils and Promises of Microsoft 365 Copilot
  • How to Be the Generative AI Champion Your CIO and Organization Need
  • How to Shift Organizational Culture Today to Embrace Generative AI Tomorrow
  • Mitigate the Risks of Generative AI by Enhancing Your Information Governance
  • Cultivate Essential Skills for Collaborating With Artificial Intelligence
  • Ask the Expert: Microsoft 365 Copilot
  • Generative AI Across Digital Workplace Markets
10 – 11 June 2024

London, U.K.