<!DOCTYPE html>
<html>
<body>
    <head>
        <title>Example</title>
        <link rel="stylesheet" type="text/css" href="./style.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
    </head>
    <div class="container">

        <div class="toolbar font-family">
            <a class="item-toolbar" href="#">Welcom</a>
            <a class="item-toolbar" href="#">Project</a>
            <a class="item-toolbar" href="#">Contact</a>
            <a href="#" class="logo-glitch-index"><img></a>
        </div>
        <div class="header font-family">
            PROJECT <strong>Android</strong>
        </div>
        <div data-type="parallax" data-min-height="150px" data-src="https://glitch-inc.000webhostapp.com/img/parallax_background.png" data-animation="true" class="parallax-container"></div>

        <div class="text font-family">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae quos sint beatae iure porro voluptatem aliquam, culpa quas alias in hic architecto dolorem, explicabo ullam quaerat similique nesciunt repellat enim. <br> <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt vero unde maxime natus sunt, cum vel fugiat esse facilis molestiae saepe velit excepturi nemo quas veritatis nesciunt quasi magnam adipisci! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae quos sint beatae iure porro voluptatem aliquam, culpa quas alias in hic architecto dolorem, explicabo ullam quaerat similique nesciunt repellat enim. <br> <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt vero unde maxime natus sunt, cum vel fugiat esse facilis molestiae saepe velit excepturi nemo quas veritatis nesciunt quasi magnam adipisci! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae quos sint beatae iure porro voluptatem aliquam, culpa quas alias in hic architecto dolorem, explicabo ullam quaerat similique nesciunt repellat enim. <br> <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt vero unde maxime natus sunt, cum vel fugiat esse facilis molestiae saepe velit excepturi nemo quas veritatis nesciunt quasi magnam adipisci! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae quos sint beatae iure porro voluptatem aliquam, culpa quas alias in hic architecto dolorem, explicabo ullam quaerat similique nesciunt repellat enim. <br> <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt vero unde maxime natus sunt, cum vel fugiat esse facilis molestiae saepe velit excepturi nemo quas veritatis nesciunt quasi magnam adipisci!</div>

        <div data-type="parallax" data-min-height="150px" data-src="https://glitch-inc.000webhostapp.com/img/parallax_background.png" data-animation="true" class="parallax-container"></div>

        <div class="text font-family">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae quos sint beatae iure porro voluptatem aliquam, culpa quas alias in hic architecto dolorem, explicabo ullam quaerat similique nesciunt repellat enim. <br> <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt vero unde maxime natus sunt, cum vel fugiat esse facilis molestiae saepe velit excepturi nemo quas veritatis nesciunt quasi magnam adipisci! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae quos sint beatae iure porro voluptatem aliquam, culpa quas alias in hic architecto dolorem, explicabo ullam quaerat similique nesciunt repellat enim. <br> <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt vero unde maxime natus sunt, cum vel fugiat esse facilis molestiae saepe velit excepturi nemo quas veritatis nesciunt quasi magnam adipisci! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae quos sint beatae iure porro voluptatem aliquam, culpa quas alias in hic architecto dolorem, explicabo ullam quaerat similique nesciunt repellat enim. <br> <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt vero unde maxime natus sunt, cum vel fugiat esse facilis molestiae saepe velit excepturi nemo quas veritatis nesciunt quasi magnam adipisci! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae quos sint beatae iure porro voluptatem aliquam, culpa quas alias in hic architecto dolorem, explicabo ullam quaerat similique nesciunt repellat enim. <br> <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt vero unde maxime natus sunt, cum vel fugiat esse facilis molestiae saepe velit excepturi nemo quas veritatis nesciunt quasi magnam adipisci!</div>


    </div>

    <script src="./parallax.js"></script>
</body>
</html>
body {
    margin: auto 0;
    background: #DCDCDC;
}

.container {
    margin: 52px 100px;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.toolbar {
    background-color: #FFFFFF;
    padding: 24px;
}

.logo-glitch-index {
    float: right;
    height: 100%;
    transform: translate(0%, -30%) !important;
  }
  
  .logo-glitch-index img {
    content: url('https://glitch-inc.000webhostapp.com/img/avatar_circle.ico');
    height: 56px;
    width: 56px;
    border-radius: 50%;
  }

.item-toolbar {
    color: rgba(0, 0, 0, 0.6);
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 10px;
    margin: 0 10px;
}

.header {
    color: #E57373;
    background-color: #FFFFFF;
    font-size: 56px;
    width: 100%;
    text-align: center;
    margin-top: 72px;
    padding-bottom: 25px;
}

.text {
    padding: 48px;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
}

.font-family {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

var containerQuery = document.querySelector('.parallax-container');

// Get all the elements than use the animation of Parallax
var elements = document.querySelectorAll("[data-type=parallax]");
/**
 * Constructor
 * 
 * @param  {[type]} imageUrl [Your image]
 * @param  {[type]} minHeight [Minimum of height of the view]
 * @param  {[type]} minWidth [Minimum of width of the view]
 * @param  {[type]} animation [Activate animation Parallax]
 */
function Parallax(operator, imageUrl, minHeight, minWidth, animation)
{
    
    /**
     * See if the variable imageUrl value is empty
     * 
     * @param  {[type]} imageUrl [description]
     */
    if (imageUrl != "")
    {
        /**
         * To create and initiate the properties of Parallax
         * 
         * @type {[object]} create [description]
         */
        this.create(operator, imageUrl, minHeight, minWidth);
    }
    else
    {
        console.error("Parallax: Vous ne pouvez pas créer un parallax sans image." + "Si cette erreur persiste, il se pourrait que l’emplacement de votre image ne sois pas trouvée en raison d’un chemin d’accès erroné." + "Ou que l’attribut {@data-src} soit vide ou non inscrit dans votre fichier HTML");
    }

    /**
     * To see if the animation is requested
     * 
     * @param {[type]} animation [description]
     */
    if (animation == "true")
    {
        window.addEventListener("scroll", () =>
        {
            elements[operator].style.backgroundPositionY = -window.scrollY / 4 + "px";
        });
    }
}

Parallax.prototype = 
{
    /**
     * Create a default Values
     * 
     * @param {[type]} attributes [description]
     */
    attributes: 
    {
        src: "",
        minHeight: 100,
        minWidth: 100,
        animation: false
    },
    
    /**
     * Attaching multiple properties to customize the @Parallax view
     * 
     * @param  {[type]} imageUrl [descrption]
     * @param  {[type]} minHeight [descrption]
     * @param  {[type]} minWidth [descrption]
     */
    create: function(operator, imageUrl, minHeight, minWidth)
    {
        var backgroundFixed = "background-attachment:fixed;";
        var backgroundPositionX = "background-position-x:center;";
        var backgroundNoRepeat = "background-repeat:no-repeat;";
        var backgroundInHerit = "background-size:inherit;";
        var appendsSrcFirst = "background-image:url(\"";
        var appendsSrcLast = "\");";

        var defaultValues = backgroundFixed + backgroundPositionX + backgroundNoRepeat + backgroundInHerit;

        elements[operator].setAttribute("style", defaultValues + minHeight + minWidth + appendsSrcFirst + imageUrl + appendsSrcLast);
    }
};

/**
 * Search the all elements than use the data Parallax
 * Looping all the elements, for get each values of each element
 */

for (var i = 0; i < elements.length; i++)
{
    if (elements[i].getAttribute("data-type") == "parallax")
    {
        var attributes = {};

        var dataSrc = "data-src";
        var dataMinHeight = "data-min-height";
        var dataMinWidth = "data-min-width";
        var dataAnimation = "data-animation";

        if (elements[i].getAttribute(dataSrc) != "")
        {
            attributes.src = elements[i].getAttribute(dataSrc);
        }
        else
        {
            console.error("Parallax: Vous ne pouvez pas créer un parallax sans image." + "Si cette erreur persiste, il se pourrait que l’emplacement de votre image ne sois pas trouvée en raison d’un chemin d’accès erroné." + "Ou que l’attribut {@data-src} soit vide ou non inscrit dans votre fichier HTML");
        }

        if (elements[i].getAttribute(dataMinHeight) != null)
        {
            attributes.minHeight = "min-height:" + elements[i].getAttribute(dataMinHeight) + ";";
        }
        else
        {
            attributes.minHeight = "min-height:200px;";
        }

        if (elements[i].getAttribute(dataMinWidth) != null)
        {
            attributes.minWidth = "min-width:" + elements[i].getAttribute(dataMinWidth) + ";";
        }
        else
        {
            attributes.minWidth = "min-width:100%;";
        }

        if (elements[i].getAttribute(dataAnimation) == "true")
        {
            attributes.animation = elements[i].getAttribute(dataAnimation);
        }

        /**
         * Create instance
         * 
         * @param  {[type]} attributes.src [description]
         * @param  {[type]} attributes.minHeight [description]
         * @param  {[type]} attributes.minWidth [description]
         * @param  {[type]} attributes.animation [description]
         */
        new Parallax(i, attributes.src, attributes.minHeight, attributes.minWidth, attributes.animation);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.