Full-screen scrolling plugin written in native JS: compatible with IE 10+, mobile phone touch screen, Mac touch pad optimization, customizable page animation, gzip file <2.15KB.
There are already many full-screen scrolling plugins, such as the famous fullPage, Why do I write another one?
The existing plug-ins have the following problems:
- First of all, the biggest problem is that the most popular plugins all rely on jQuery, which means that it is a very painful thing to use in projects that use React or Vue: I only need a full-screen scrolling plugin, but I also need to import jQuery. That's ridiculous!
- Secondly, many existing full-screen scrolling plugins have too much features, which was an advantage in the past few years, but now (2018-4) I think it's a disadvantage: front-end development has undergone great changes, of which the most important one change is that ES6 natively supports modular development. The biggest feature of modular development is that a module is best to focus on only one feature, and use many small modules build a complete system. From this perspective, a large and feature-rich plugin is contradictory the principle of modular development.
In contrast, this plugin in native JS has the following benefits:
- Plugins written in native languages will not be affected by the usage scenarios of dependent plugins (plugins that depend on jQuery are not suitable for use in single-page applications (react/vue)), so they are more flexible in use;
- With modular development, plugins developed in native languages can focus on only one function, so the amount of code can be small, which is convenient for development and maintenance;
- Finally, with the updating of JS/CSS/HTML and browsers, the cost of writing plugins in native languages is getting lower and lower, so why not?
<div id="pureFullPage">
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
</div>The div with id pureFullPage is the container for all scrolling pages, and the div with class page is the container for specific pages.
The page container id must be pureFullPage, and the specific page class must contain page, because css will set the style according to #pureFullPage and .page.
The JS and CSS compressed files of pureFullPage are in the dist directory, and the source files are in the src directory.
- import by path
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="youtpath/pureFullPage.min.css" />
</head>
<body>
...
<script src="youtpath/pureFullPage.min.js"></script>
</body>
</html>- import by ES6 modular
- install npm package：
npm install pure-full-page- import js and css file
Note: The css file needs to be imported separately.
// css imported separately
import "pure-full-page/lib/pureFullPage.min.css";
import PureFullPage from "pure-full-page";But in fact, most of the code in the css file is to define the style of navigation (rotation point on the right). If you have the need for custom navigation, you can copy
src/css/pureFullPage.scssto your own project, and then rewrite your own navigation style instead of customizing the style by overwriting. If this is the case, you do not need toimport 'pure-full-page/lib/pureFullPage.min.css';.
- Other instructions
At first, the page background was defined in pureFullPage.min.css, but considering that the background is often customized during use, in order to reduce redundant code, the background is not set in the CSS of the plugin, so if you need you should write by yourself.
// Create a new pureFullPage instance and initialize
new PureFullPage();When instantiating pureFullPage, an object is accepted as a parameter, which can control whether to display the right navigation (It often does not need the right navigation on mobile) and custom page animation. The sample code is as follows:
new PureFullPage({
isShowNav: true,
definePages: addAnimation,
});| param name | type | default value | definition |
|---|---|---|---|
isShowNav |
boolean | true |
controls whether to display the right navigation |
definePages |
function | () => {} |
This function will be triggered every time the page scrolls. It is mainly used to get the page element to be entered, and get the page element, you can perform related operations, generally add animation. |
If you need to customize the function of
definePages, when define it that its definition cannot be used arrow function, because the custom functionthisis bound to the instance itself during the implementation ofpureFullPage, which is convenient to get the entered page, see the following sample code for adding animation to the page that underpureFullPage:
// do not use arrow function
let addAnimation = function() {
// i represents the index of the page that will be entered every time you slide, you can get the current page element through this.pages[i]
let i = -(this.currentPosition / this.viewHeight);
// Add animation to the page to be entered
document.querySelector(".fade-in").classList.remove("fade-in");
this.pages[i].querySelector("p").classList.add("fade-in");
};The complete code for adding animations is in the directory of
demo/add_animation/
Please check Develop full scroll page by ES6 to know the details of developing this plugin (Chinese)。
MIT
If you want to develop full scroll page plugin based on this project, the following info maybe help:
-
Project structure
.
|-- demo
| |-- add_animation # demo with animation
| |-- simple # simplest demo
|-- dist # compressed prod code
|-- lib # code used by npm package, CommonJS specification |-- src # source code -
develop
- clone this project to your computer
git clone git@github.com:xiaogliu/pure-full-page.git- Install dependencies
npm install- Managed by gulp during development
# The process of sending monitors the changes of files in the src directory, and updates the files under dist if there are changes
npm run watch
# Manually generate the files under the new dist
npm run build- Develop you code in
./srcfile
Will auto compile file to ./dist(used without NPM/ES6 modular) and ./lib (used in NPM/ES6 modular)