One page website scrolling effect

Developer
Size
2,764 Kb
Views
32,384

How do I make an one page website scrolling effect?

Unoptimized, test effect for a one-pager. Images copyrighted to Ivaylo Yovchev Photography ( http://ivayloyovchev.com ). What is a one page website scrolling effect? How do you make a one page website scrolling effect? This script and codes were developed by Chrysto on 16 July 2022, Saturday.

One page website scrolling effect Previews

One page website scrolling effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>One page website scrolling effect</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="slides-holder"> <div class="slide" id="slide-1"> <div class="fade-text">SLIDE 1</div> </div> <div class="slide" id="slide-2"> <div class="fade-text">SLIDE 2</div> </div> <div class="slide" id="slide-3"> <div class="fade-text">SLIDE 3</div> </div> <div class="slide" id="slide-4"> <div class="fade-text">SLIDE 4</div> </div> <div class="slide" id="slide-5"> <div class="fade-text">SLIDE 5</div> </div> <div class="slide" id="slide-6"> <div class="fade-text">SLIDE 6</div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

One page website scrolling effect - Script Codes CSS Codes

body,html {	margin:0;	padding:0;
}
/* Effect
*/
#slides-holder {	position:relative;	width:100%;
}
.slide {	position:relative;	width:100%;	top:0;	left:0;
}
.slide.fixed {	position:fixed;	top:0;	left:0;	width:100%;
}
.slide-fake-height {	position:relative;	display:none;
}
.slide-fake-height.visible {	display:block;
}
/* Demo styles
*/
.fade-text {	display:inline-block;	position:absolute;	font-family:HelveticaNeue,helvetica,arial;	font-size:60px;	opacity:.2;	-webkit-transition:all 500ms ease-out;	transition:all 500ms ease-out;
}
.fixed .fade-text {	opacity:1;
}
.slide {	background-size:cover;	background-position:center center;	background-repeat:no-repeat;
}	#slide-1 {	background-image:url(http://cloud.bassta.bg/fullscreenslides/slide1bg.jpg);	}	#slide-1 .fade-text {	left:10%;	top:40%;	}	#slide-2 {	background-image:url(http://cloud.bassta.bg/fullscreenslides/slide2bg.jpg);	}	#slide-2 .fade-text {	left:5%;	top:40%;	}	#slide-3 {	background-image:url(http://cloud.bassta.bg/fullscreenslides/slide3bg.jpg);	}	#slide-3 .fade-text { color: white;	left:10%;	top:20%;	}	#slide-4 {	background-image:url(http://cloud.bassta.bg/fullscreenslides/slide4bg.jpg);	}	#slide-4 .fade-text {	right:10%;	top:10%;	}	#slide-5 {	background-image:url(http://cloud.bassta.bg/fullscreenslides/slide5bg.jpg);	}	#slide-5 .fade-text {	left:50%;	top:5%;	}	#slide-6 {	background-image:url(http://cloud.bassta.bg/fullscreenslides/slide6bg.jpg);	}	#slide-6 .fade-text { color: white;	left:10%;	top:10%;	}

One page website scrolling effect - Script Codes JS Codes

/* Image copyright - Ivaylo Yovchev Photography ( http://ivayloyovchev.com/ )
*/
var $window = $(window);
var $holder = $("#slides-holder");
var $slides = $holder.find(".slide");
$slides.each(function(index, element) {	$(element).css("z-index", 100 + index).after($("<div />", {	class: "slide-fake-height"	}));
});
var $fakeHeights = $slides.next(".slide-fake-height");
var $toReize = $holder.add($slides).add($fakeHeights);
var scrollFixer = 3;
$window.on("resize", onResize).resize();
$window.on("scroll", function(event) {	( !! window.requestAnimationFrame) ? requestAnimationFrame(onScroll) : onScroll();
});
function onResize(event) {	$toReize.css({	height: $window.innerHeight() + "px"	});	onScroll();
}
function onScroll(event) { var scrollTop = Math.abs($window.scrollTop()) + scrollFixer; $slides.each(function(index, element) {	var $slide = $(element);	var $fakeHeight = $slide.next(".slide-fake-height");	//This can be optimised a lot, but this is just a demo effect	var slideTop = $slide.hasClass("fixed") ? $fakeHeight.offset().top : $slide.offset().top;	if (slideTop < scrollTop ) {	$slide.addClass("fixed");	$fakeHeight.addClass("visible");	} else {	$slide.removeClass("fixed");	$fakeHeight.removeClass("visible");	}	});
}
One page website scrolling effect - Script Codes
One page website scrolling effect - Script Codes
Home Page Home
Developer Chrysto
Username bassta
Uploaded July 16, 2022
Rating 3.5
Size 2,764 Kb
Views 32,384
Do you need developer help for One page website scrolling effect?

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
Create amazing web content 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!