Redcentric - Virtual Worlds

‘Virtual Worlds’ is a site developed to show similarities between the video game worlds of MMORPG games Eve Online, World of Warcraft, and Second Life.

It is a one page piece that features the fantastic parallax.js plugin by Matthew Wagerfield & Claudio Guglieri. Each of the three sections contains a multilayered image that parallaxes based on mouse position, in addition to having a few animations sprinkled in such as the spinning asteroids on Eve Online, and the fading light beams on Second Life. It’s particularly cool when viewed on an iPad as the parallax can be controlled by tilting!

Skewed Content

The tilted main navigation has been done by skewing the containing <div> for each item by -20deg. The inner contents of the <div> are then skewed back straight by 20deg. Developing it this way rather than using images means there is no overlap in the clickable area for each item.

div {
    transform: skew(-20deg, 0);

    .skew {
        transform: skew(20deg, 0);
    }
}

Parallax.js

The plugin used to achieve the parallax effect on each of the virtual worlds is actually quite simple to implement. First create an unordered list as a container, then each list item within will become one of the parallax layers. Set a data-depth attribute on each layer to determine how much each item will move.

<ul class="wow-bg world-bg">
    <li class="layer bg" data-depth="0.00"></li>
    <li class="layer layer-1" data-depth="0.10"></li>
    <li class="layer layer-2" data-depth="0.20"></li>
    <li class="layer layer-3" data-depth="0.30"></li>
    <li class="layer layer-4" data-depth="0.90"></li>
    <li class="layer layer-5" data-depth="0.50"></li>
    <li class="layer layer-6" data-depth="0.20"></li>
    <li class="layer layer-6-2" data-depth="0.20"></li>
    <li class="layer layer-7-1" data-depth="0.50"></li>
    <li class="layer layer-7-2" data-depth="0.70"></li>
    <li class="layer layer-8" data-depth="0.80"></li>
</ul>