pfp

pure-full-page

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. / 原生 JS 编写的全屏滚动插件:兼容 IE 10+、手机触屏,Mac 触摸板优化,可自定义页面动画,gzip 文件 < 2.15KB。

Showing:

Popularity

Downloads/wk

3

GitHub Stars

115

Maintenance

Last Commit

4mos ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

1.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

license issues/PRs GitHub release

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.

DEMO; download file; 中文文档

Why I write it

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?

Instructions

1) Create html with the following structure

<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.

2) Import pureFullPage's JS and CSS files

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
  1. install npm package:
npm install pure-full-page
  1. 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.scss to 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 to import '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.

3) Create a new pureFullPage instance and initialize

// Create a new pureFullPage instance and initialize
new PureFullPage();

4) Custom parameters

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({
  delay: 1000,
  isShowNav: true,
  definePages: addAnimation,
});
param nametypedefault valuedefinition
delaynumber1000throttle function delay time, milisecond, in order to be compatible with Mac touchpad, this value is preferably greater than 1000
isShowNavbooleantruecontrols whether to display the right navigation
definePagesfunction() => {}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 function this is bound to the instance itself during the implementation of pureFullPage, which is convenient to get the entered page, see the following sample code for adding animation to the page that under pureFullPage:

// 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/

Read more

Please check Develop full scroll page by ES6 to know the details of developing this plugin (Chinese)。

License

MIT

re-develop

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

1) clone this project to your computer

git clone git@github.com:xiaogliu/pure-full-page.git

2) Install dependencies

npm install

3) 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100