<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"viewport"
content= "
width
=
device
-width,
initial-scale
=
1
.0">
<
title
>Transition</
title
>
<
style
>
.loader {
position: absolute;
width: 100%;
height: 100vh;
z-index: 99;
left: -100%;
transition: .1s;
}
img {
position: absolute;
left: 15%;
top: -2%;
width: 22%;
height: 30%;
}
.page1 {
position: absolute;
width: 100%;
height: 100vh;
}
.page2 {
position: absolute;
width: 100%;
height: 100vh;
display: none;
}
h4 {
margin-left: 15%;
font-size: 25px;
color: green;
}
a {
margin-left: 16.9%;
font-size: 15px;
padding: 4px 8px;
border: 2px solid black;
border-radius: 10px;
font-weight: bold;
cursor: pointer;
}
a:hover {
color: white;
background-color: black;
}
.gfg {
margin-left: 280px;
margin-top: -20px;
font-size: 20px;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"loader"
id
=
"loader"
>
<
img
src
=
alt
=
"gfg_img"
>
</
div
>
<
div
class
=
"page1"
id
=
"page1"
>
<
h4
> GeeksforGeeks 1st </
h4
>
<
h5
class
=
"gfg"
>Image Scrolling</
h5
>
<
a
onclick
=
"appearP2() "
>Image Scroll</
a
>
</
div
>
<
div
class
=
"page2"
id
=
"page2"
>
<
h4
> GeeksforGeeks 2nd </
h4
>
<
h5
class
=
"gfg"
>Image Scrolling</
h5
>
<
a
onclick
=
"appearP1() "
>Image Scroll</
a
>
</
div
>
<
script
>
// Function for page one
function appearP2() {
// Code for loader and both pages
var loader = document.getElementById('loader');
var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
loader.style.left = "0";
// Timeout method which will display our
// next page and block first page
setTimeout(function () {
loader.style.left = "-100%";
page1.style.display = "none";
page2.style.display = 'block';
// Set time 2000 to show transition
}, 2000)
}
// Function for page two
function appearP1() {
// Code for loader and both pages
var loader = document.getElementById('loader');
var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
loader.style.left = "0";
// Timeout method which will display our next page
// and block second page
setTimeout(function () {
loader.style.left = "-100%";
page1.style.display = "block";
page2.style.display = 'none';
// Set time 2000 to show transition
}, 2000)
}
</
script
>
</
body
>
</
html
>