Single page website

Developer
Chrysto
Size
2,688 Kb
Views
44,528
  1. Single page website Previews
  2. Single page website HTML Codes
  3. Single page website CSS Codes
  4. Single page website JS Codes

How do I make an single page website?

Just want to show to create effect similar to http://www.bus-project.info/ with GSAP. What is a single page website? How do you make a single page website? This script and codes were developed by Chrysto on 16 July 2022, Saturday.

Single page website Previews
IQ Test

Single page website - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single page website</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="menu"> <li class="to-home"><a href="#">Home</a></li> <li><a href="#about">About cats</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#links">Links</a></li> <li><a href="#contacts">Contacts</a></li> </ul> <div id="about" class="page"> <div class="page-content"> <h2>About cats</h2> <p>Cats are cute</p> </div> </div> <div id="gallery" class="page"> <div class="page-content"> <h2>Gallery</h2> <p>Gallery with cats</p> </div> </div> <div id="links" class="page"> <div class="page-content"> <h2>Links</h2> <p>Links to blogs with cats</p> </div> </div> <div id="contacts" class="page"> <div class="page-content"> <h2>Contacts</h2> <p>Some contact form</p> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Single page website - Script Codes CSS Codes

body,div,p {	margin:0;	padding:0;	font-family:Helvetica,sans-serif;	font-size:18px;
}
html {	background:url("http://ivayloyovchev.com/pulsepro/data/img/gallery/wedding/IMG_3312.jpg") no-repeat center center fixed;	-webkit-background-size:cover;	-moz-background-size:cover;	-o-background-size:cover;	background-size:cover;
}
.menu {	position:fixed;	top:10%;	left:-40px;	z-index:100;
}
.menu li {	list-style:none;	display:block;	margin-bottom:5px;	margin-left:0;	padding:20px;	background-color:rgba(0,0,0,0.7);	-webkit-box-sizing:border-box;	-moz-box-sizing:border-box;	box-sizing:border-box;	text-align:center;	width:140px;	cursor:pointer;
}
.menu li.active {	background-color:rgba(91,193,177,.75);	cursor:default;
}
.menu li a {	text-decoration:none;	color:#fff;
}
.page {	position:relative;	background-color:rgba(0,0,0,0.7);	width:70%;	height:100%;	position:fixed;	left:-70%;	overflow:hidden;	z-index:10;
}
.page-content {	position:absolute;	width:55%;	height:80%;	top:10%;	right:15%;	color:#fff;	overflow:auto;
}

Single page website - Script Codes JS Codes

$(function() {
//Image by Ivaylo Yovchev ( http://ivayloyovchev.com/weddings )	//elements	var $menu = $(".menu");	var $pages = $(".page");	var $menuLi = $menu.find("li").not(".to-home");	var $toHome = $menu.find(".to-home");	//interna vars	var currentPage = "";	$toHome.on("click", function() {	currentPage = "";	TweenMax.to($pages, 0.5, {	left: "-70%"	});	TweenLite.to($menuLi.filter(".active"), 0.5, {	className: "-=active"	});	});	$menuLi.on("click", function(event) {	var $this = $(this);	var thisHref = $this.find("a").attr("href");	if (currentPage !== thisHref && $pages.filter(thisHref).length > 0) {	currentPage = thisHref;	TweenMax.to($pages, 0.5, {	left: "-70%"	});	TweenMax.to($pages.filter(thisHref), 0.5, {	left: 0	});	TweenLite.to($menuLi.filter(".active"), 0.5, {	className: "-=active"	});	TweenLite.to($this, 0.5, {	className: "+=active"	});	}	event.preventDefault();	});
});
Single page website - Script Codes
Single page website - Script Codes
Home Page Home
Developer Chrysto
Username bassta
Uploaded July 16, 2022
Rating 4
Size 2,688 Kb
Views 44,528
Do you need developer help for Single page website?

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!

Chrysto (bassta) Script Codes
Name
Simple one page header concept
A Pen by Chrysto
Page Header animation
Lastik menu
GSAP Parallax
GIF-like animation with single image
Footer concept
Fullscreen Parallax
TweenLite staggerTo
One page website scrolling effect
Create amazing captions 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!