Parallax test

by InferOn

HTML

<script src="https://rawgithub.com/wagerfield/parallax/master/source/jquery.parallax.js"></script>
<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>
<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
<div class="wrapper">
    <div class="main layer" data-depth="1.00">
        <div class="image layer">
            <img src="http://lorempixel.com/75/150">
            <p>Lorem ipsum</p>
        </div>
        <div class="image layer">
            <img src="http://lorempixel.com/75/150">
            <p>Lorem ipsum</p>
        </div>
        <div class="image layer">
            <img src="http://lorempixel.com/75/150">
            <p>Lorem ipsum</p>
        </div>
        <div class="image layer">
            <img src="http://lorempixel.com/75/150">
            <p>Lorem ipsum</p>
        </div>
        <div class="image layer">
            <img src="http://lorempixel.com/75/150">
            <p>Lorem ipsum</p>
        </div>
        <div class="image layer">
            <img src="http://lorempixel.com/75/150">
            <p>Lorem ipsum</p>
        </div>
        <div class="image layer">
            <img src="http://lorempixel.com/75/150">
            <p>Lorem ipsum</p>
        </div>
        <div class="image layer">
            <img src="http://lorempixel.com/75/150">
            <p>Lorem ipsum</p>
        </div>
        <div class="image layer">
            <img src="http://lorempixel.com/75/150">
            <p>Lorem ipsum</p>
        </div>
        <div class="image layer">
            <img src="http://lorempixel.com/75/150">
            <p>Lorem ipsum</p>
        </div>
        <div class="image layer">
            <img src="http://lorempixel.com/75/150">
            <p>Lorem ipsum</p>
        </div>
        <div class="image layer">
            <img src="http://lorempixel.com/75/150">
            <p>Lorem ipsum</p>
        </div>
        <div class="image layer">
            <img...

CSS

* {
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
    display: block;
}
.wrapper p {
    background: #ccc;
    padding: 5px;
    display: none;
}
.wrapper {
    height: 600px;
    width: 120px;
    overflow: hidden;
    border: 4px solid black;
    float: right;
}
.main {
    height: 1200px;
    width: 800px;
    top: -500px;
    left: -500px;
    position: absolute;
}

JavaScript

$('.wrapper').parallax({
    scalarX: 100,
    scalarY: 50,
    originX: 0,
    originY: 0
});

$('.main').packery({
    itemSelector: '.image'
});

$('.wrapper').hoverIntent({
    over: function () {
        // Limit the X axis - DOESN'T HELP
        // $('.wrapper').parallax({
        //     limitX: 0
        // });
        
        $(this).animate({
            width: '300px'
        }, 100);
        
        // Reload Packery - DOESN'T HELP
        // pckry.layout();
        
        // Reload Parallax - DOESN'T HELP
        // parallax.disable();
        // parallax.enable();
    },
    out: function () {
        $(this).animate({
            width: '120px'
        }, 100);
        
        // $('.wrapper').parallax({
        //     limitX: false
        // });
    },
    timeout: 150
});