Looking for help with creating a slider effect that is triggered when navigating to page 2. Ideally, the div should expand with a width of 200% or similar. Any assistance would be greatly appreciated!
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
body {
overflow: hidden; <!-- remove scroll -->
}
.page {
position: absolute;
padding: 12px;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.page.left {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.page.center {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.page.right {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.page.transition {
-webkit-transition-duration: .25s;
transition-duration: .25s;
}
</style>
</head>
<body>
<!-- PAGE 1 -->
<div id="homePage" class="page transition center" style="background-color: #5AAED5">
<h1>Home Page</h1>
<a href="javascript:slidePageFrom(page1, 'right');">Page 1</a><br/a>
<a href="javascript:slidePageFrom(page1, 'right');">Page 2</a>
</div>
<!-- PAGE 2 -->
<div id="p1" class="page transition right" style="background-color: #8ca83d">
<h1>Page 1</h1>
<a href="javascript:slidePageFrom(homePage, 'left');">Back</a>
</div>
<script>
var homePage = document.getElementById("homePage");
var page1 = document.getElementById("p1");
var currentPage = homePage;
function slidePageFrom(page, from) {
// Position the page at the starting position of the animation
page.className = "page " + from;
// Position the new page and the current page at the ending position of their animation with a transition class indicating the duration of the animation
page.className ="page transition center";
currentPage.className = "page transition " + (from === "left" ? "right" : "left");
currentPage = page;
}
</script>
</body>
</html>
Any assistance would be greatly appreciated!