unillax v1.0.6

Unillax

Unillax is a JavaScript library for websites that adds universal parallax effects to any element. Unillax can handle background and foreground effects with any standard HTML elements, making it universal and easy to implement for many projects.

Table of Contents

• Unillax
  • Table of Contents
  • Installing
    • Prerequisites
    • Installing the Package
  • Using Unillax
    • Including the script
    • Adding containers
      • Basic
      • Backgrounds
    • Adding elements
    • Controlling speed and depth
    • Controlling position
  • Local Development
    • Cloning the Repository
    • Linking to a test project
  • Contributing
    • Bugs
    • Feature Requests
    • Pull Requests
  • License

Installing

Prerequisites

• Node.js v12.8.1 or higher
• npm v6.10.2 or higher (Comes with Node.js)

Ensure you are running Node.js v12.8.1 or higher and npm v6.10.2 or higher before installing the package.

$ node -v
$ npm -v

Installing the Package

To install the package, set your working directory to the root of your project and install the npm module.

$ cd my-project-directory
$ npm install unillax

Using Unillax

Including the script

Implamenting Unillax into your website is easy. Simply include the JavaScript script in your HTML.

<script src="/node_modules/unillax/releases/unillax-min.js"></script>

Adding containers

Basic

Unillax conatiners are elements that have parallax elements inside of them. These are mostly used as background elements. To add a Unillax container, use the class unillax-container on the container you want to use. The elements inside the container will automaticly gain the parallax effect. See the basic example.

<div class="unillax-container" style="height: 400px;">
    <h1>Title</h1>
    <p>Content</p>
    ...
</div>

Backgrounds

Additionally, Unillax supports backgrounds to make a background image parallax effect. To do this, include an <img> tag at the top of your container with the unillax-background class. Then, wrap your content in a container using the unillax-overlay class. See the background example.

<div class="unillax-container" style="height: 400px;">
    <img src="/images/background.jpg" class="unillax-background">
    <div>
        <h1>Title</h1>
        <p>Content</p>
        ...
    </div>
</div>

Adding elements

Unillax elments float above all other elements and are not restricted to being inside of a container. They can appear to be above or below elements. See the element example.

<h1 class="unillax-element" data-unillax-depth="-8">I move faster than other elements.</h1>
<h1 class="unillax-element">I move slower than other elements.</h1>

Controlling speed and depth

To customize the speed of elements, use the HTML attribute data-unillax-depth. Values at 0 indicate no parralax effect, positive values are further from the viewport, and negitave values are towards the viewport. This means that positive values move slower and negitave values move faster.

Controlling position

By default, elements will reach a "centered" position at the top of the page. To change this, use the data-unillax-position attribute. The allowed values are top, middle, and bottom. This controls the position relative to the viewport where paralalx elements will center.

Local Development

The following instructions will describe how to install Unillax on your local machine for development or contributing. If you wish to only use Unillax in your projects, and not contribute, I would recomend installing the npm package.

Cloning the Repository

Clone the repository onto a local file path and set the current working directory to unillax. After this, feel free to make changes

$ git clone https://github.com/devisionbit/unillax.git
$ cd unillax

Linking to a test project

To develop Unillax, we will link the clones npm module to a test HTML project. First, set your working directory to your cloned version of Unillax and set up npm linking.

$ npm link

Then, set your working directory to the test project you want to test Unillax on. Configure this project to have its npm module update based on the local clone of Unillax.

$ npm link unillax

Contributing

Be sure to read the Contributor Covenant Code of Conduct before making a bug report, feature request, or pull request to help create a welcoming environment.

Bugs

If you have found a bug with Unillax, create a bug report. In the bug report please describe the bug, add steps to reproduce, explain expected behavior, attach screenshots, and state the platform. This helps us quickly identify and fix the bug.

Feature Requests

If you have an idea for a feature and would like to put it up for development create a feature request. To reduce the time of developing a new feature, please include information if the feature is related to an issue, a complete description of the solution, and alternatives to the solution.

Pull Requests

To contribute, fork the repository and create a pull request. When creating a pull request, please describe the changes made and explain the reasons for the changes to help quickly identify when to merge pull requests.

License

MIT