Skip to content
This asset controls sections in a page. It resizes sections to fullscreen resolution and moves these individually by wheel/touch events.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs build. Apr 21, 2019
gulp removed unnecessary gulp tasks. Apr 18, 2019
src added the way to control the horizontal touch event. May 16, 2019
.editorconfig added gulpfiles. Apr 14, 2019
.gitignore added gulpfiles. Apr 14, 2019
README.md Update README.md Apr 28, 2019
gulpfile.js removed unnecessary gulp tasks. Apr 18, 2019
package.json ncu -u May 1, 2019
screenshot.gif added a screenshot animation gif file. Apr 19, 2019

README.md

fullscreen-slider

screenshot

This asset controls sections in a page.
It resizes sections to fullscreen resolution and moves these individually by wheel/touch events.
https://ykob.github.io/fullscreen-slider/

Usage

  1. You must install the necessary npm modules.
    This class depends on below modules.
    https://www.npmjs.com/package/normalize-wheel
npm i normalize-wheel --save
  1. Import FullscreenSlider class.
    https://github.com/ykob/fullscreen-slider/blob/master/src/js/modules/fullscreen_slider/index.js
    Like as below.
import FullscreenSlider from '../modules/fullscreen_slider/';
  1. Create an instance and set wrapper element (ex: document) and 2D resolution object to arguments as below.
const fsSlider = new FullscreenSlider(
  document,
  {
    x: window.innerWidth,
    y: window.innerHeight
  }
);
  1. Bind the resize event. You should run the reset method before running the resize method to set the resolution to the section elements correctly. Also, you should set an object that has window resolution to an argument of the "resize" method to resize the sections to full-screen size.
window.addEventListener('resize', () => {
  fsSlider.reset();
  fsSlider.resize(
    {
      x: window.innerWidth,
      y: window.innerHeight
    }
  );
});
  1. Run the start method when you want to start the animation.
fsSlider.start();
You can’t perform that action at this time.