https://github.com/pixelbyaj/sitepage

Design your own Site with beautiful full-page scrolling using JSON and template View
https://github.com/pixelbyaj/sitepage

donations html html-structure javascript javascript-library scrolling sitepage smooth-scrolling typescript website-builder website-design website-generation website-theme

Last synced: about 1 month ago
JSON representation

Design your own Site with beautiful full-page scrolling using JSON and template View

• Host: GitHub
• URL: https://github.com/pixelbyaj/sitepage
• Owner: pixelbyaj
• License: gpl-3.0
• Created: 2020-02-15T10:35:06.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-08-02T14:42:17.000Z (10 months ago)
• Last Synced: 2025-04-10T18:46:02.408Z (about 1 month ago)
• Topics: donations, html, html-structure, javascript, javascript-library, scrolling, sitepage, smooth-scrolling, typescript, website-builder, website-design, website-generation, website-theme
• Language: TypeScript
• Homepage: https://www.pixelbyaj.com/sitepage/
• Size: 373 KB
• Stars: 14
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# sitePage.js

[![sitePage.js version](https://img.shields.io/npm/v/sitepage.js/latest)](https://www.npmjs.com/package/sitepage.js)

[![Known Vulnerabilities](https://snyk.io/test/github/pixelbyaj/sitePage/badge.svg?targetFile=package.json)](https://snyk.io/test/github/pixelbyaj/sitePage?targetFile=package.json)

[![npm](https://img.shields.io/npm/dt/sitepage.js.svg)](https://www.npmjs.com/package/sitepage.js)

[![License](https://img.shields.io/badge/License-GPL-blue.svg)](https://www.gnu.org/licenses/gpl-3.0.html)

[![PayPal Donate](https://img.shields.io/badge/donate-PayPal.me-ff69b4.svg)](https://www.paypal.me/pixelbyaj)

[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/sitepage.js/badge/day?style=rounded)](https://www.jsdelivr.com/package/npm/sitepage.js)

[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/sitepage.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/sitepage.js)

[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/sitepage.js/badge/year?style=rounded)](https://www.jsdelivr.com/package/npm/sitepage.js)

A simple and easy to use library that creates single page scrolling websites with horizontal or vertical scrolling.

- [DEMO](https://www.pixelbyaj.com/sitepage/)

- [StackBlitz](https://stackblitz.com/edit/sitepagejs)

- [Introduction](https://github.com/pixelbyaj/sitepage#introduction)

- [Compatibility](https://github.com/pixelbyaj/sitepage#compatibility)

- [License](https://github.com/pixelbyaj/sitepage#license)

- [Usage](https://github.com/pixelbyaj/sitepage#usage)

- [Options](https://github.com/pixelbyaj/sitepage#options)

- [Reporting issues](https://github.com/pixelbyaj/sitepage#reporting-issues)

- [Contributing to sitepage](https://github.com/pixelbyaj/sitepage#contributing-to-sitepagejs)

- [Changelog](https://github.com/pixelbyaj/sitepage#changelog)

- [Resources](https://github.com/pixelbyaj/sitepage#resources)

- [Donations](https://github.com/pixelbyaj/sitepage#donations)

## Introduction

Suggestion are more than welcome, not only for feature requests but also for coding style improvements.

Let's make this a great library to make people's lives easier!

## Compatibility

sitepage is fully functional on all modern browsers.

It also provides touch support for mobile phones, tablets and touch screen computers.

## License

### Open source license

If you are creating an open source application under a license compatible with the [GPL](https://www.gnu.org/licenses/gpl-3.0.html), you may use sitePage under the terms of the GPL.

**The credit comments in the JavaScript and CSS files should be kept intact** (even after combination or minification)

## Usage

As you can see in the example files, you will need to include:

 - The JavaScript file `sitepage` (or its minified version `sitepage.min.js`)

 - The css file `https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css`

 - The css file `sitepage.min.css`

### Install using  npm

**Optionally**, you can install sitepage with bower or npm if you prefer:

Terminal:

```shell

// With npm

npm install sitepage.js

```

### Including files:

```html

```

### Optional use of CDN

```html

```

### Required HTML structure

Start your HTML document with the compulsory [HTML DOCTYPE declaration](http://www.corelangs.com/html/introduction/doctype.html) on the 1st line of your HTML code. You might have troubles with sections heights otherwise. The examples provided use HTML 5 doctype ``.

Each section will be defined with an element containing the `section` class.

The active section by default will be the first section, which is taken as the home page.

Sections will get placed inside a wrapper (`
` in this case). The wrapper can not be the `body` element.

```html



	



```


You can see a fully working example of the HTML structure in the [`index.html` file](https://pixelbyaj.github.io/sitepage/).

### Initialization

#### Initialization with Vanilla Javascript

All you need to do is call sitepage before the closing `