├── .babelrc ├── .eslintrc ├── .flowconfig ├── .gitignore ├── .travis.yml ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── Makefile ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── dist ├── doormat.css ├── doormat.js ├── doormat.min.css └── doormat.min.js ├── doormat.config.json ├── package-lock.json ├── package.json ├── src ├── js │ ├── dev.js │ └── doormat.js ├── pug │ ├── dev.pug │ ├── index.pug │ └── mixins │ │ └── mixins.pug └── stylus │ ├── dev.styl │ └── doormat.styl └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "stage-2", 5 | "flow" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "node": true, 6 | "es6": true 7 | }, 8 | "parserOptions": { 9 | "sourceType": "script", 10 | }, 11 | "plugins": [ 12 | "prettier" 13 | ], 14 | "rules": { 15 | "prettier/prettier": ["error", { 16 | "semi": false, 17 | "singleQuote": true, 18 | "trailingComma": "all", 19 | "bracketSpacing": true, 20 | "parser": "flow" 21 | }], 22 | "no-console": 2, 23 | }, 24 | "extends": [ 25 | "prettier", 26 | "prettier/flowtype" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | [include] 4 | 5 | [libs] 6 | 7 | [lints] 8 | 9 | [options] 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | public 3 | .deploy 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | sudo: false 5 | install: 6 | - yarn 7 | script: 8 | - yarn run flow 9 | - make lint-scripts 10 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Issue summary 2 | 3 | ### Expected behavior 4 | 5 | ### Actual behavior 6 | 7 | ### Browser used 8 | 9 | ### Steps to reproduce 10 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | doormat - http://jh3y.github.io/doormat 2 | Licensed under the MIT license 3 | 4 | jh3y (c) 2017 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 7 | 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 9 | 10 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 11 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | PHONY: help 2 | 3 | MODULES = ./node_modules/.bin 4 | UGLIFY = $(MODULES)/uglifyjs 5 | STYLUS = $(MODULES)/stylus 6 | BABEL = $(MODULES)/babel 7 | ESLINT = $(MODULES)/eslint 8 | POSTCSS = $(MODULES)/postcss 9 | CLEANCSS = $(MODULES)/cleancss 10 | PUG = $(MODULES)/pug 11 | GHPAGES = $(MODULES)/gh-pages 12 | BS = $(MODULES)/browser-sync 13 | PRETTIER = $(MODULES)/prettier 14 | 15 | FILE_NAME = doormat 16 | OUTPUT_DIR = public 17 | DIST_DIR = dist 18 | SCRIPT_SRC = src/js 19 | SCRIPT_DEST = $(OUTPUT_DIR)/js 20 | STYLE_SRC = src/stylus 21 | STYLE_DEST = $(OUTPUT_DIR)/css 22 | MARKUP_SRC = src/pug 23 | MARKUP_DEST = $(OUTPUT_DIR) 24 | DEPLOY_DEST = .deploy/ 25 | 26 | UGLIFY_OPTS = $(DIST_DIR)/$(FILE_NAME).js --compress --mangle --comments -o $(DIST_DIR)/$(FILE_NAME).min.js 27 | CLEANCSS_OPTS = --s1 -o $(DIST_DIR)/$(FILE_NAME).min.css $(DIST_DIR)/$(FILE_NAME).css 28 | POSTCSS_OPTS = --use autoprefixer -d $(STYLE_DEST)/ $(STYLE_DEST)/*.css 29 | PRETTIER_OPTS = --trailing-comma all --single-quote --no-semi --write 30 | 31 | help: 32 | @grep -E '^[a-zA-Z\._-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}' 33 | 34 | compile-scripts: ## compiles scripts 35 | $(BABEL) $(SCRIPT_SRC) --out-dir $(SCRIPT_DEST) 36 | 37 | lint-scripts: ## lints JS files 38 | $(ESLINT) $(SCRIPT_SRC)/$(FILE_NAME).js 39 | 40 | watch-scripts: compile-scripts ## watch for script changes and compile 41 | $(BABEL) $(SCRIPT_SRC) --watch --out-dir $(SCRIPT_DEST) --source-maps 42 | 43 | publish-scripts: compile-scripts ## publish scripts to dist 44 | mkdir -pv $(DIST_DIR) && cp $(SCRIPT_DEST)/$(FILE_NAME).js $(DIST_DIR)/$(FILE_NAME).js && $(UGLIFY) $(UGLIFY_OPTS) 45 | 46 | compile-styles: ## compiles styles 47 | $(STYLUS) $(STYLE_SRC) -o $(STYLE_DEST) && $(POSTCSS) $(POSTCSS_OPTS) 48 | 49 | watch-styles: ## watches and compiles styles 50 | $(STYLUS) -w $(STYLE_SRC) -o $(STYLE_DEST) 51 | 52 | publish-styles: ## publish style files 53 | $(STYLUS) $(STYLE_SRC)/$(FILE_NAME).styl -o $(DIST_DIR)/ && $(CLEANCSS) $(CLEANCSS_OPTS) 54 | 55 | compile-markup: ## compiles markup 56 | $(PUG) -P $(MARKUP_SRC) -O $(FILE_NAME).config.json -o $(MARKUP_DEST) 57 | 58 | watch-markup: ## watch and compile markup 59 | $(PUG) -wP $(MARKUP_SRC) -O $(FILE_NAME).config.json -o $(MARKUP_DEST) 60 | 61 | publish-markup: ## publish index page for deployment 62 | $(PUG) $(MARKUP_SRC)/index.pug -O $(FILE_NAME).config.json -o $(MARKUP_DEST) 63 | 64 | setup: ## set up project for development 65 | npm install && mkdir -pv $(SCRIPT_DEST) && mkdir -pv $(STYLE_DEST) 66 | 67 | watch: ## run development watch 68 | make watch-scripts & make watch-styles & make watch-markup 69 | 70 | build: ## build sources 71 | make compile-scripts && make compile-styles && make compile-markup 72 | 73 | serve: build ## sets up browser-sync local static server with livereload 74 | $(BS) start --port 1987 --files $(OUTPUT_DIR)/ --server $(OUTPUT_DIR) 75 | 76 | develop: ## run development task 77 | make serve & make watch 78 | 79 | publish: ## publish files 80 | mkdir -pv $(DIST_DIR) && make publish-scripts && make publish-styles 81 | 82 | prettify: ## prettify scripts 83 | $(PRETTIER) $(PRETTIER_OPTS) $(SCRIPT_SRC)/* 84 | 85 | deploy: ## deploys demo to github-pages 86 | rm -rf $(DEPLOY_DEST) && mkdir -pv $(DEPLOY_DEST) $(DEPLOY_DEST)/js $(DEPLOY_DEST)/css && make publish-markup && make publish && cp $(MARKUP_DEST)/index.html $(DEPLOY_DEST)/index.html && cp $(DIST_DIR)/doormat.min.js $(DEPLOY_DEST)/js/doormat.js && cp $(DIST_DIR)/doormat.min.css $(DEPLOY_DEST)/css/doormat.css && make build && cp $(SCRIPT_DEST)/dev.js $(DEPLOY_DEST)/js && cp $(STYLE_DEST)/dev.css $(DEPLOY_DEST)/css && $(GHPAGES) -d $(DEPLOY_DEST) && make publish 87 | -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Fixes # || Adds new feature X 2 | 3 | Changes include; 4 | * a 5 | * b 6 | * c 7 | 8 | * [ ] Passes tests (`linting`, `flow`) 9 | * [ ] Code is `prettier` 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![NPM](https://nodei.co/npm/doormat.png?downloads=true)](https://nodei.co/npm/doormat/) 2 | 3 | [![Build Status](https://travis-ci.org/jh3y/doormat.svg?branch=master)](https://travis-ci.org/jh3y/doormat) 4 | ![img](https://img.shields.io/badge/license-MIT-blue.svg) 5 | ![img](https://img.shields.io/badge/dependencies-none-green.svg) 6 | [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) 7 | 8 | # Doormat 👞👡 9 | _an alternative way to traverse through your site content_ 😎 10 | 11 | ![alt tag](https://raw.github.com/jh3y/pics/master/doormat/GeneralUsage.gif) 12 | 13 | ## Index 14 | 15 | * [How](https://github.com/jh3y/doormat#how) 16 | * [Features](https://github.com/jh3y/doormat#features) 17 | * [Browser support](https://github.com/jh3y/doormat#browser-support) 18 | * [Usage](https://github.com/jh3y/doormat#usage) 19 | * [Options](https://github.com/jh3y/doormat#options) 20 | * [API](https://github.com/jh3y/doormat#api) 21 | * [Events](https://github.com/jh3y/doormat#events) 22 | * [curtain.js?](https://github.com/jh3y/doormat#curtain.js?) 23 | * [Customisation](https://github.com/jh3y/doormat#customisation) 24 | * [UI Effects](https://github.com/jh3y/doormat#ui-effects) 25 | * [Caveats](https://github.com/jh3y/doormat#caveats) 26 | * [Roll your own classes](https://github.com/jh3y/doormat#roll-your-own-classes) 27 | * [Development](https://github.com/jh3y/doormat#development) 28 | * [Contributing](https://github.com/jh3y/doormat#contributing) 29 | * [License](https://github.com/jh3y/doormat#license) 30 | 31 | ## How 32 | The trick is possible by making sections of the page `position: fixed` and `position: absolute` whilst setting a height for the container element equal to the combined height of the page sections. 33 | 34 | Page sections are given an appropriate `top` value that gives some buffer space for scrolling and give the parallax like illusion against whichever section is currently `position: fixed`. 35 | 36 | Dependent on the panel mode, as the `window` is scrolled panels come into or move out of the viewport to either reveal or cover up fixed position content. 37 | 38 | ## Features 39 | * Provides alternative way to traverse content 40 | * Configurable behavior 41 | * Inbound and outbound traversal modes 42 | * Panel snapping to either viewport or as a means of traversing panels 43 | * API for programmatically traversing content 44 | * Responsive 45 | * Animated scrolling 46 | * Simple to create custom effects/behavior with CSS with many possibilities. 47 | * Supports overflowing content in outbound mode(_refer to caveats_:sweat_smile:) 48 | * No dependencies! :tada: 49 | * Scroll/Resize optimization via `requestAnimationFrame` 50 | 51 | ![alt tag](https://raw.github.com/jh3y/pics/master/doormat/SnapViewport.gif) 52 | 53 | ## Browser support 54 | | Chrome | Firefox | Safari | Opera | Edge | IE | 55 | |:-------:|:-------:|:-------:|:-------:|:-------:|:--------:| 56 | | :smile: | :smile: | :smile: | :smile: | :smile: | :smile: | 57 | 58 | `v5` makes use of `requestAnimationFrame`, `viewport` units and the `Event` API. Most browsers should play nice except `Opera Mini` :-1:. `IE` support should be fine in version `11`. 59 | 60 | ## Usage 61 | To create your doormat. 62 | 63 | 1. Include `doormat{.min}.js` and `doormat{.min}.css` in your page/bundle. 64 | 65 | 2. Create your DOM/Page structure. The containing element needs the classname `dm`. This could be `body`. `doormat` uses panels for each section of content. Therefore, the children of our container need the class `dm-pnl`. `ol` and `ul` make good container elements :wink: A structure like the following is ideal. 66 | 67 | ```html̨ 68 | 69 |
    70 |
  1. Awesome
  2. 71 |
  3. Site
  4. 72 |
  5. Content
  6. 73 |
74 |