paradise-edge

index.html

<div id="container" class="container">
		<ul id="scene" class="scene">    
            <li class="layer" data-depth="0.05"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/manHuntDown005-1-psd-01-01_cleaned.svg"></li>
            <li class="layer" data-depth="0.10"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/manHuntDown005-1-psd-11_cleaned.svg"></li>     
            <li class="layer" data-depth="0.10"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/manHuntDown005-1-psd-10_cleaned.svg"></li>
            <li class="layer" data-depth="0.10"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/manHuntDown005-1-psd-09_cleaned.svg"></li>
            <li class="layer" data-depth="0.05"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/manHuntDown005-1-psd-04_cleaned.svg"></li>
            <li class="layer" data-depth="0.05"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/manHuntDown005-1-psd-03_cleaned.svg"></li>
            <li class="layer" data-depth="0.05"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/manHuntDown005-1-psd-02_cleaned.svg"></li>     
            <li class="layer" data-depth="0.15"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/manHuntDown005-1-psd-06_cleaned.svg"></li>
            <li class="layer" data-depth="0.15"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/manHuntDown005-1-psd-05_cleaned.svg"></li>    
            <li class="layer" data-depth="0.15"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/manHuntDown005-1-psd-08_cleaned.svg"></li>
            <li class="layer" data-depth="0.15"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/manHuntDown005-1-psd-07_cleaned.svg"></li>  
		</ul>
	</div>

paradise-edge.markdown

paradise-edge ('-' * 13) paralax.js on top of pretty cool composition with cyberpunk theme created by frenchman from Osaka Edgy Ziane.

original composition which i used comes from web-comic in the making: Paradise Diary. check out his page for more great artwork and comic itself.

i was merely fooling around with pretty graphics.

A Pen by @rafszul on CodePen.

License.

script.js

var scene = document.getElementById('scene');
	var parallax = new Parallax(scene);

style.css

body {
    font-family: monospace;
    font-size: 18px;
    background: #05040B;
    color: #05040B;
    margin: 0;
}
img {
    display: block;
    min-width: 100%;

    
}

.container {
    position: relative;
    max-width: 100%;
}

.scene {
    padding: 40px;
    margin: 0px;
}

.expand-width {
    width: 100%;
}

.layer:nth-child(1) {
    min-width: 100%;
    min-height: 100%;
    opacity: 0.90;
}

.layer:nth-child(2) {
    min-width: 100%;
    opacity: 0.8;
}

.layer:nth-child(3) {
    min-width: 100%;
    opacity: 1;
}

.layer:nth-child(4) {
    min-width: 100%;
    opacity: 1;
}

.layer:nth-child(5) {
    min-width: 100%;
    opacity: 0.80;
}

.layer:nth-child(6) {
    min-width: 100%;
    opacity: 0.80;
}

.layer:nth-child(7) {
    min-width: 100%;
    opacity: 0.80;
}

.layer:nth-child(8) {
    min-width: 100%;
    opacity: 1;
}

.layer:nth-child(9) {
    min-width: 100%;
    opacity: 1;
}

.layer:nth-child(10) {
    min-width: 100%;
    opacity: 1;
}

.layer:nth-child(11) {
    min-width: 100%;
    opacity: 1.0;
}