Page transition

Developer
Pedro Cacique
Size
2,127 Kb
Views
14,168
  1. Page transition Previews
  2. Page transition HTML Codes
  3. Page transition CSS Codes
  4. Page transition JS Codes

How do I make an page transition?

What is a page transition? How do you make a page transition? This script and codes were developed by Pedro Cacique on 20 November 2022, Sunday.

Page transition Previews
IQ Test

Page transition - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Page transition</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav>	<button id="nav1"></button>	<button id="nav2"></button>	<button id="nav3"></button>
</nav>
<section id="page1"></section>
<section id="page2"></section>
<section id="page3"></section> <script src="js/index.js"></script>
</body>
</html>

Page transition - Script Codes CSS Codes

html{	background-color:#fff;	height: 100%;
}
body{ background-color: #e8f3e2;	height: 100%;	margin:0;
}
section{ height: 80%; width: 90%; position:absolute; transition: all 1s;
}
#page1, #nav1{ background-color: #b5d780;
}
#page2,#nav2{ background-color: #fac1c4;
}
#page3, #nav3{ background-color: #c2e4d8;
}
nav{ top:0; margin: 0 auto; width: 200px; text-align: center; padding: 10px;
}
nav button{ border: none; width: 30px; height: 30px; border-radius: 50%;	cursor:pointer;
}
nav button:focus{ outline: none;
}

Page transition - Script Codes JS Codes

var pages = [];
var total = 3;
var w, h;
window.onload = function(){ w = document.body.clientWidth; h = document.body.clientHeight; for(var i=1; i<=total; i++){ page = document.getElementById("page"+i); page.style.left = (w/2 - page.offsetWidth/2)+"px"; page.style.top = (h/2 - page.offsetHeight/2)+"px"; page.style.left = -page.offsetWidth+"px"; page.style.zIndex = 1; page.style.opacity = 0; pages.push(page); document.getElementById("nav"+i).addEventListener("click", openPage, true); }
}
function openPage(event){ var num = parseInt(event.target.id.split("nav")[1]); for(var i=0; i<pages.length; i++){ page = pages[i]; page.style.left = -page.offsetWidth+"px"; page.style.zIndex = 1; page.style.opacity = 0; } page = pages[num-1]; page.style.left = (w/2 - page.offsetWidth/2)+"px"; page.style.zIndex = 2; page.style.opacity = 1;
}
Page transition - Script Codes
Page transition - Script Codes
Home Page Home
Developer Pedro Cacique
Username phcacique
Uploaded November 20, 2022
Rating 3
Size 2,127 Kb
Views 14,168
Do you need developer help for Page transition?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pedro Cacique (phcacique) Script Codes
Name
Web Theremin
Grid Interaction
One page scrolling
Aside Hover Menu
Platform game mechanics
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!