Skip to content

Instantly share code, notes, and snippets.

@fsimmons
Last active July 23, 2018 21:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fsimmons/3f517df493b798d862081cf5dfe60338 to your computer and use it in GitHub Desktop.
Save fsimmons/3f517df493b798d862081cf5dfe60338 to your computer and use it in GitHub Desktop.
<html>
<head>
<title>Homepage</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="swup.js"></script>
<script type="text/javascript">
$(function() {
var swup = new Swup();
});
</script>
<style type="text/css">
.a-fade {
transition: 4s;
opacity: 1;
}
html.is-animating .a-fade{
opacity: 0;
}
.loading {
display: none;
}
html.is-changing .loading{
display: block;
}
</style>
</head>
<body>
<div class="a-fade">
<main id="swup">
<h1>This is homepage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="index-2.html">Go to other page</a>
</main>
</div>
<div class="loading">We are loading...</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment