My scroll is locked. :( Here is the plugin i used for an animated scroll feature: http://peachananr.github.io/onepage-scroll/Demo/demo.html
Also, here is a question i asked earlier in relation to this project for context: How to create a scroll that jumps down in increments the size of your viewport
I'm making a pretty simple website with my minimal understanding of html and css. I don't know javascript so I've been used this plug-in blindly and am having a hard time finding where I made a mistake.
/* ===========================================================
* jquery-onepage-scroll.js v1.3.1
* ===========================================================
* Copyright 2013 Pete Rojwongsuriya.
* http://www.thepetedesign.com
*
* Create an Apple-like website that let user scroll
* one page at a time
*
* Credit: Eike Send for the awesome swipe event
* https://github.com/peachananr/onepage-scroll
*
* License: GPL v3
*
* ========================================================== */
!function($){
var defaults = {
sectionContainer: "section",
easing: "ease",
animationTime: 1000,
pagination: true,
updateURL: false,
keyboard: true,
beforeMove: null,
afterMove: null,
loop: true,
responsiveFallback: false,
direction : 'vertical'
};
/*------------------------------------------------*/
/* Credit: Eike Send for the awesome swipe event */
/*------------------------------------------------*/
$.fn.swipeEvents = function() {
return this.each(function() {
var startX,
startY,
$this = $(this);
$this.bind('touchstart', touchstart);
function touchstart(event) {
var touches = event.originalEvent.touches;
if (touches && touches.length) {
startX = touches[0].pageX;
startY = touches[0].pageY;
$this.bind('touchmove', touchmove);
}
}
function touchmove(event) {
var touches = event.originalEvent.touches;
if (touches && touches.length) {
var deltaX = startX - touches[0].pageX;
var deltaY = startY - touches[0].pageY;
if (deltaX >= 50) {
$this.trigger("swipeLeft");
}
if (deltaX <= -50) {
$this.trigger("swipeRight");
}
if (deltaY >= 50) {
$this.trigger("swipeUp");
}
if (deltaY <= -50) {
$this.trigger("swipeDown");
}
if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
$this.unbind('touchmove', touchmove);
}
}
}
});
};
$.fn.onepage_scroll = function(options){
var settings = $.extend({}, defaults, options),
el = $(this),
sections = $(settings.sectionContainer)
total = sections.length,
status = "off",
topPos = 0,
leftPos = 0,
lastAnimation = 0,
quietPeriod = 500,
paginationList = "";
$.fn.transformPage = function(settings, pos, index) {
if (typeof settings.beforeMove == 'function') settings.beforeMove(index);
// Just a simple edit that makes use of modernizr to detect an IE8 browser and changes the transform method into
// an top animate so IE8 users can also use this script.
if($('html').hasClass('ie8')){
if (settings.direction == 'horizontal') {
var toppos = (el.width()/100)*pos;
$(this).animate({left: toppos+'px'},settings.animationTime);
} else {
var toppos = (el.height()/100)*pos;
$(this).animate({top: toppos+'px'},settings.animationTime);
}
} else{
$(this).css({
"-webkit-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
"-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing,
"-moz-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
"-moz-transition": "all " + settings.animationTime + "ms " + settings.easing,
"-ms-transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
"-ms-transition": "all " + settings.animationTime + "ms " + settings.easing,
"transform": ( settings.direction == 'horizontal' ) ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)",
"transition": "all " + settings.animationTime + "ms " + settings.easing
});
}
$(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
if (typeof settings.afterMove == 'function') settings.afterMove(index);
});
}
$.fn.moveDown = function() {
var el = $(this)
index = $(settings.sectionContainer +".active").data("index");
current = $(settings.sectionContainer + "[data-index='" + index + "']");
next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']");
if(next.length < 1) {
if (settings.loop == true) {
pos = 0;
next = $(settings.sectionContainer + "[data-index='1']");
} else {
return
}
}else {
pos = (index * 100) * -1;
}
if (typeof settings.beforeMove == 'function') settings.beforeMove( next.data("index"));
current.removeClass("active")
next.addClass("active");
if(settings.pagination == true) {
$(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
}
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))
if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1);
history.pushState( {}, document.title, href );
}
el.transformPage(settings, pos, next.data("index"));
}
$.fn.moveUp = function() {
var el = $(this)
index = $(settings.sectionContainer +".active").data("index");
current = $(settings.sectionContainer + "[data-index='" + index + "']");
next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']");
if(next.length < 1) {
if (settings.loop == true) {
pos = ((total - 1) * 100) * -1;
next = $(settings.sectionContainer + "[data-index='"+total+"']");
}
else {
return
}
}else {
pos = ((next.data("index") - 1) * 100) * -1;
}
if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index"));
current.removeClass("active")
next.addClass("active")
if(settings.pagination == true) {
$(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
}
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))
if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index - 1);
history.pushState( {}, document.title, href );
}
el.transformPage(settings, pos, next.data("index"));
}
$.fn.moveTo = function(page_index) {
current = $(settings.sectionContainer + ".active")
next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']");
if(next.length > 0) {
if (typeof settings.beforeMove == 'function') settings.beforeMove(next.data("index"));
current.removeClass("active")
next.addClass("active")
$(".onepage-pagination li a" + ".active").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active");
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))
pos = ((page_index - 1) * 100) * -1;
if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (page_index - 1);
history.pushState( {}, document.title, href );
}
el.transformPage(settings, pos, page_index);
}
}
function responsive() {
//start modification
var valForTest = false;
var typeOfRF = typeof settings.responsiveFallback
if(typeOfRF == "number"){
valForTest = $(window).width() < settings.responsiveFallback;
}
if(typeOfRF == "boolean"){
valForTest = settings.responsiveFallback;
}
if(typeOfRF == "function"){
valFunction = settings.responsiveFallback();
valForTest = valFunction;
typeOFv = typeof valForTest;
if(typeOFv == "number"){
valForTest = $(window).width() < valFunction;
}
}
//end modification
if (valForTest) {
$("body").addClass("disabled-onepage-scroll");
$(document).unbind('mousewheel DOMMouseScroll MozMousePixelScroll');
el.swipeEvents().unbind("swipeDown swipeUp");
} else {
if($("body").hasClass("disabled-onepage-scroll")) {
$("body").removeClass("disabled-onepage-scroll");
$("html, body, .wrapper").animate({ scrollTop: 0 }, "fast");
}
el.swipeEvents().bind("swipeDown", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveUp();
}).bind("swipeUp", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveDown();
});
$(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
init_scroll(event, delta);
});
}
}
function init_scroll(event, delta) {
deltaOfInterest = delta;
var timeNow = new Date().getTime();
// Cancel scroll if currently animating or within quiet period
if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
event.preventDefault();
return;
}
if (deltaOfInterest < 0) {
el.moveDown()
} else {
el.moveUp()
}
lastAnimation = timeNow;
}
// Prepare everything before binding wheel scroll
el.addClass("onepage-wrapper").css("position","relative");
$.each( sections, function(i) {
$(this).css({
position: "absolute",
top: topPos + "%"
}).addClass("section").attr("data-index", i+1);
$(this).css({
position: "absolute",
left: ( settings.direction == 'horizontal' )
? leftPos + "%"
: 0,
top: ( settings.direction == 'vertical' || settings.direction != 'horizontal' )
? topPos + "%"
: 0
});
if (settings.direction == 'horizontal')
leftPos = leftPos + 100;
else
topPos = topPos + 100;
if(settings.pagination == true) {
paginationList += "<li><a data-index='"+(i+1)+"' href='#" + (i+1) + "'></a></li>"
}
});
el.swipeEvents().bind("swipeDown", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveUp();
}).bind("swipeUp", function(event){
if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault();
el.moveDown();
});
// Create Pagination and Display Them
if (settings.pagination == true) {
if ($('ul.onepage-pagination').length < 1) $("<ul class='onepage-pagination'></ul>").prependTo("body");
if( settings.direction == 'horizontal' ) {
posLeft = (el.find(".onepage-pagination").width() / 2) * -1;
el.find(".onepage-pagination").css("margin-left", posLeft);
} else {
posTop = (el.find(".onepage-pagination").height() / 2) * -1;
el.find(".onepage-pagination").css("margin-top", posTop);
}
$('ul.onepage-pagination').html(paginationList);
}
if(window.location.hash != "" && window.location.hash != "#1") {
init_index = window.location.hash.replace("#", "")
if (parseInt(init_index) <= total && parseInt(init_index) > 0) {
$(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active")
$("body").addClass("viewing-page-"+ init_index)
if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active");
next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']");
if(next) {
next.addClass("active")
if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_index) + "']").addClass("active");
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"))
if (history.replaceState && settings.updateURL == true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (init_index);
history.pushState( {}, document.title, href );
}
}
pos = ((init_index - 1) * 100) * -1;
el.transformPage(settings, pos, init_index);
} else {
$(settings.sectionContainer + "[data-index='1']").addClass("active")
$("body").addClass("viewing-page-1")
if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active");
}
}else{
$(settings.sectionContainer + "[data-index='1']").addClass("active")
$("body").addClass("viewing-page-1")
if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active");
}
if(settings.pagination == true) {
$(".onepage-pagination li a").click(function (){
var page_index = $(this).data("index");
el.moveTo(page_index);
});
}
$(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
if(!$("body").hasClass("disabled-onepage-scroll")) init_scroll(event, delta);
});
if(settings.responsiveFallback != false) {
$(window).resize(function() {
responsive();
});
responsive();
}
if(settings.keyboard == true) {
$(document).keydown(function(e) {
var tag = e.target.tagName.toLowerCase();
if (!$("body").hasClass("disabled-onepage-scroll")) {
switch(e.which) {
case 38:
if (tag != 'input' && tag != 'textarea') el.moveUp()
break;
case 40:
if (tag != 'input' && tag != 'textarea') el.moveDown()
break;
case 32: //spacebar
if (tag != 'input' && tag != 'textarea') el.moveDown()
break;
case 33: //pageg up
if (tag != 'input' && tag != 'textarea') el.moveUp()
break;
case 34: //page dwn
if (tag != 'input' && tag != 'textarea') el.moveDown()
break;
case 36: //home
el.moveTo(1);
break;
case 35: //end
el.moveTo(total);
break;
default: return;
}
}
});
}
return false;
}
}(window.jQuery);* {
margin: 0;
padding: 0;
list-style: none;
}
p {
width: 55%;
}
.part1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #2980b9;
}
.menu {
display: flex;
position: fixed;
flex-direction: column;
text-align: right;
top: 10px;
right: 10px;
}
.menu li {
margin-left: 10px;
}
.part2 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #2c3e50;
}
.part3 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #16a085;
}
.part3 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #16a085;
}
.part4 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #16a685;
}
.part5 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #16a585;
}
.part6 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #16a485;
}
body, html {
margin: 0;
overflow: hidden;
-webkit-transition: opacity 400ms;
-moz-transition: opacity 400ms;
transition: opacity 400ms;
}
body, .onepage-wrapper, html {
display: block;
position: static;
padding: 0;
width: 100%;
height: 100%;
}
.onepage-wrapper {
width: 100%;
height: 100%;
display: block;
position: relative;
padding: 0;
-webkit-transform-style: preserve-3d;
}
.onepage-wrapper .section {
width: 100%;
height: 100%;
}
.onepage-pagination {
position: absolute;
right: 10px;
top: 50%;
z-index: 5;
list-style: none;
margin: 0;
padding: 0;
}
.onepage-pagination li {
padding: 0;
text-align: center;
}
.onepage-pagination li a{
padding: 10px;
width: 4px;
height: 4px;
display: block;
}
.onepage-pagination li a:before{
content: '';
position: absolute;
width: 4px;
height: 4px;
background: rgba(0,0,0,0.85);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.onepage-pagination li a.active:before{
width: 10px;
height: 10px;
background: none;
border: 1px solid black;
margin-top: -4px;
left: 8px;
}
.disabled-onepage-scroll, .disabled-onepage-scroll .wrapper {
overflow: auto;
}
.disabled-onepage-scroll .onepage-wrapper .section {
position: relative !important;
top: auto !important;
left: auto !important;
}
.disabled-onepage-scroll .onepage-wrapper {
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-ms-transform: none !important;
min-height: 100%;
}
.disabled-onepage-scroll .onepage-pagination {
display: none;
}
body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html {
position: inherit;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hellomynameischristian</title>
<link rel="stylesheet" type="text/css" href="projects+experiences.css">
<script src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery.onepage-scroll.js"></script>
<script>
$(".main").onepage_scroll({
sectionContainer: "section",
easing: "ease",
animationTime: 1000,
pagination: true,
updateURL: false,
beforeMove: function(index) {},
afterMove: function(index) {},
loop: false,
keyboard: true,
responsiveFallback: false,
direction: "vertical"
});
</script>
</head>
<body>
<div class="main">
<section class="part1">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur?</p>
</section>
<section class="part2">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur?</p>
</section>
<section class="part3">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur?
</p>
</section>
<section class="part4">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur?
</p>
</section>
<section class="part5">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur?
</p>
</section>
<section class="part6">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur?
</p>
</section>
<nav>
<ul class="menu">
<li><a href="../html/hellomynameischristian.html">homepage</a></li>
<li><a href="https://www.behance.net/christianmorgan2">design portfolio</a></li>
<li><a href="https://www.instagram.com/christian.m.morgan/">follow me on ig</a></li>
</ul>
</nav>
</div>
</body>
</html>