Scroll Hijacking with OnePage-Scroll.js

Developer
Cory Simmons
Size
5,337 Kb
Views
60,720
  1. Scroll Hijacking with OnePage-Scroll.js Previews
  2. Scroll Hijacking with OnePage-Scroll.js HTML Codes
  3. Scroll Hijacking with OnePage-Scroll.js CSS Codes
  4. Scroll Hijacking with OnePage-Scroll.js JS Codes

How do I make an scroll hijacking with onepage-scroll.js?

What is a scroll hijacking with onepage-scroll.js? How do you make a scroll hijacking with onepage-scroll.js? This script and codes were developed by Cory Simmons on 04 July 2022, Monday.

Scroll Hijacking with OnePage-Scroll.js Previews
IQ Test

Scroll Hijacking with OnePage-Scroll.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scroll Hijacking with OnePage-Scroll.js</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/lgrpa.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main"> <section class="block-1"> <div class="outer"> <div class="inner"> <div class="centered"> <h1>Hello World</h1> </div> </div> </div> </section> <section class="block-2"> <div class="outer"> <div class="inner"> <div class="centered"> <h1>Hello World 2</h1> </div> </div> </div> </section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='js/pqbgk.js'></script> <script src="js/index.js"></script>
</body>
</html>

Scroll Hijacking with OnePage-Scroll.js - Script Codes CSS Codes

.outer { display: table; width: 100%; height: 100%;
}
.inner { display: table-cell; vertical-align: middle; text-align: center;
}
.centered { position: relative; display: inline-block; width: 100%;
}
[class*="block-"] { color: #fff;
}
.block-1 { background: #f66;
}
.active h1 { -webkit-animation: slideInFromLeft 3s forwards; animation: slideInFromLeft 3s forwards;
}
.block-2 { background: #66f;
}
.onepage-pagination li a:before { background: #fff;
}
.onepage-pagination li a.active:before { border-color: #fff;
}
@-webkit-keyframes slideInFromLeft { 0% { margin-left: -100%; } 100% { margin-left: 0; }
}
@keyframes slideInFromLeft { 0% { margin-left: -100%; } 100% { margin-left: 0; }
}

Scroll Hijacking with OnePage-Scroll.js - Script Codes JS Codes

$(".main").onepage_scroll({ animationTime: 3000, afterMove: function(index) { $('section').eq(index).toggleClass('active'); }, easing: 'cubic-bezier(.46,.37,.29,.94)'
});
Scroll Hijacking with OnePage-Scroll.js - Script Codes
Scroll Hijacking with OnePage-Scroll.js - Script Codes
Home Page Home
Developer Cory Simmons
Username corysimmons
Uploaded July 04, 2022
Rating 3.5
Size 5,337 Kb
Views 60,720
Do you need developer help for Scroll Hijacking with OnePage-Scroll.js?

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!

Cory Simmons (corysimmons) Script Codes
Name
Basic Hamburger Menu
Responsive Dynamic Height Sticky Footer
Lost Grid - SCSS Demo
Lost Grid - Stylus Demo
Single element, pure CSS File Upload
A Pen by Cory Simmons
Axis CSS - Spinning Compass Entrance and Waves
Beaker Pour
Stylus Redesign
Frosted Glass Overlay
Create amazing Facebook ads 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!