One page website scrolling effect

Developer
Chrysto
Size
2,764 Kb
Views
32,384
  1. One page website scrolling effect Previews
  2. One page website scrolling effect HTML Codes
  3. One page website scrolling effect CSS Codes
  4. One page website scrolling effect JS Codes

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
IQ Test

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
Name
Medium.com style header effect
GIF-like animation with single image
Page Header animation
Infinite scrolling horizontal text
Fullscreen Parallax
Fullscreen image in Canvas
Single page website
Simple one page header concept
TweenMax text - changing slogans
Click outside element
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!