<div><svg class="parallax" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 805 603.8"><style>.tt0{fill:url(#SVGID_1_);} .tt1{fill:url(#SVGID_2_);} .tt2{fill:url(#SVGID_3_);} .tt4{fill:url(#SVGID_5_);} .tt5{fill:#2B9BCC;} .tt7{fill:#DBDBDB;} .tt8{fill:#F9F9F9;} .tt9{fill:#C7A65A;} .tt10{fill:#FFFFFF;} .tt11{fill:#C8F7C6;} .tt12{fill:#E2C07D;} .tt13{fill:#34485E;} .tt14{fill:#A38241;} .tt15{fill:none;stroke:#F9F9F9;stroke-width:0.5;stroke-miterlimit:10;} .tt16{fill:none;stroke:#4F4F4F;stroke-width:0.5;stroke-miterlimit:10;} .tt17{fill:#F4C362;} .tt18{fill:url(#SVGID_6_);} .tt19{fill:#007055;} .tt20{fill:#3D3D3D;} .tt21{fill:#C92A37;} .tt22{fill:none;stroke:#3D3D3D;stroke-miterlimit:10;} .tt23{fill:#E0E0E0;} .tt24{clip-path:url(#SVGID_8_);} .tt25{fill:#D6A143;}</style><g class="bg1"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-22.225" y1="128.955" x2="824.15" y2="233.271"><stop offset="0" stop-color="#6CB8F1"/><stop offset="1" stop-color="#99B8F1"/></linearGradient><path class="tt0" d="M-34.5-25.9h874v414.4h-874z"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-36.344" y1="237.407" x2="842.139" y2="345.681"><stop offset="0" stop-color="#89CDF7"/><stop offset="1" stop-color="#89CDD7"/></linearGradient><path class="tt1" d="M712.5 251.4c-58.1-6-68.9-43.1-174.4-43.1s-259.4 69.9-316.4 61.1c-57-8.7-88.3-29.5-135.6-40.4-47.4-10.9-120.6-6.5-120.6-6.5v144.6h874V215.9c-35.5 2.2-68.9 41.5-127 35.5zm-698 0c-11 0-19.9-3.7-19.9-8.2 0-4.5 8.9-8.2 19.9-8.2 11 0 19.9 3.7 19.9 8.2 0 4.5-8.9 8.2-19.9 8.2zm44.1 13.2c-6.8 0-12.3-2.3-12.3-5.1s5.5-5.1 12.3-5.1c6.8 0 12.3 2.3 12.3 5.1 0 2.9-5.5 5.1-12.3 5.1zm474.7 3.2c-22.5 0-40.8-7.3-40.8-16.4 0-9 18.3-16.4 40.8-16.4 22.5 0 40.8 7.3 40.8 16.4 0 9-18.3 16.4-40.8 16.4z"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="378.782" y1="287.133" x2="839.332" y2="343.896"><stop offset="0" stop-color="#18A7AA"/><stop offset="1" stop-color="#188BAA"/></linearGradient><path class="tt2" d="M804.6 296.7l-15.9-.7-3.6-8.3-3.5 8-92.2-3.8-4.6-10.9-4.6 10.5-9.4-.4L634 299l-2-4.7-2.4 5.6-105.4 22.5-41.6-1.3-2-4.6-1.9 4.5-9.5-.3-4.2-9.7-4.1 9.5-21.4-.7-16.6 5.6-3.3-7.8-4.4 10.4-43.2 14.5h467.5v-54.8"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="402.516" y1="140.948" x2="402.516" y2="-19.437"><stop offset="0" stop-color="#FFF" stop-opacity="0"/><stop offset=".8" stop-color="#FFF"/></g>
<g class="bg2"><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-45.333" y1="430.686" x2="850.365" y2="541.081"><stop offset="0" stop-color="#498EC4"/><stop offset="1" stop-color="#2694C4"/></linearGradient><path class="tt4" d="M-34.5 342.5h874v286.7h-874z"/><path class="tt5" d="M-34.5 603.1h249.1l-89.6-16 272.4-12-58.6-8.8h96l-18.2-8.7 235-9.8 125.6-16.4h62.3v98.2h-874M357.4 503.1l34.7 12.1 192-3.2 46.3-6.7M453.5 425.5l-165.9-29H-34.5V443h441.4l-48.7-7.5M418.3 440.5h64.3l-29.1-5.9M574.1 404.1h-189l88.4 15.6M-13.7 534.1h228.3L46.3 545.6"/></g>
<g class="bg3"><path class="tt7" d="M437.3 479h48.2v12.3h-48.2z"/><path class="tt7" d="M479.2 475.4h25.3v5.7h-25.3zM518.8 473.1h15.6v8.1h-15.6zM408.2 483.7h24.9v5h-24.9z"/><path class="tt8" d="M396.9 477.1h13.8V488h-13.8z"/><path class="tt9" d="M506.8 476.7h13.8v7.7h-13.8z"/><path class="tt10" d="M513.3 257.1s-30.7 159.8-58.4 196.1l58.4 7.3V257.1zM555.7 301.1s5.8 103.8-6.8 135.6c0 0 27.4 10.4 48.2 14.2 20.8 3.8 21.3 9.7 21.3 9.7s-46.2-126.8-62.7-159.5z"/><path class="tt11" d="M513.3 214.6s35.6 49 104.3 250.1l3.3-.4s-57.4-178.8-104.4-252.2l-3.2 2.5z"/><path class="tt9" d="M511.5 212.2h3.7v273h-3.7z"/><path class="tt12" d="M509 467.4h8.7v17H509z"/><path class="tt8" d="M468.2 480.4H560v10.9h-91.8z"/><path class="tt8" d="M526.6 478.3h22.3v5.4h-22.3z"/><path class="tt13" d="M569 507.6l-157.3-.2c-6.5-.1-12.3-7.3-12.8-13.8 0 0-1.1-4-.4-5 114.3 2.5 198.6-6.3 198.6-6.3l-.2 1.2c-1.8 14-13.8 24.3-27.9 24.1z"/><path class="tt10" d="M518.8 352.3h14.3v5.8h-14.3z"/><path class="tt10" d="M515.2 357.4h20.1v2.5h-20.1zM542.7 479.1c-3.1 0-5-.1-5-.1l.1-1.4c.1 0 15 1 30.9-2.8 16.7-4.1 47.9-11.7 61.7-11.9v1.4c-13.6.2-45.9 8.1-61.4 11.8-10.4 2.5-20.5 3-26.3 3z"/><path class="tt14" d="M512.8 204.3h1v7.8h-1z"/><path class="tt10" d="M542.7 483.4c-3.1 0-5-.1-5.1-.1l.1-1.4c.1 0 15 1 30.9-2.8 16.7-4.1 47.9-11.7 61.7-11.9v1.4c-13.6.2-45.9 8.1-61.4 11.8-10.3 2.6-20.4 3-26.2 3z"/><path class="tt10" d="M550.5 485.5c-8.7 0-15.2-1.1-15.4-1.1l.2-1.4c.2 0 17.9 2.9 33.7-.9 17.4-4.2 47.9-10.3 61.3-10.5v1.4c-13.2.2-43.6 6.2-61 10.5-6.3 1.5-13 2-18.8 2z"/><path class="tt10" d="M616.268 464.177l6.064-1.292 3.168 14.866-6.064 1.293z"/><path class="tt9" d="M389.2 485.9s3.7.1 10.2.3c6.5.2 15.7.4 26.8.6 5.6.1 11.6.1 17.9.2 6.4 0 13.1.1 20 .1h10.6c3.6 0 7.2 0 10.8-.1 7.3-.1 14.7-.1 22.1-.3 3.7-.1 7.4-.2 11.1-.2 3.7-.1 7.4-.2 11-.3 3.6-.1 7.3-.2 10.8-.4 3.6-.2 7.1-.3 10.6-.5 6.9-.3 13.6-.8 20-1.2 6.4-.4 12.3-1 17.9-1.5 5.5-.4 10.6-1.1 15-1.6 2.2-.3 4.3-.5 6.3-.8 1.9-.3 3.7-.6 5.3-.9 6.4-1.1 10-1.7 10-1.7l.5 2.7s-3.7.6-10.1 1.6c-1.6.2-3.4.6-5.3.8-1.9.2-4.1.5-6.3.7-4.5.5-9.6 1.2-15.1 1.6-5.5.5-11.5 1.1-17.9 1.4-6.4.4-13.1.9-20 1.1-3.5.2-7 .3-10.6.5-3.6.2-7.2.3-10.8.4-3.6.1-7.3.2-11 .4-3.7.1-7.4.2-11.1.2-7.4.2-14.8.3-22.1.4-3.6.1-7.3.1-10.8.1h-30.6c-6.4-.1-12.4-.1-17.9-.2-11.1-.1-20.4-.3-26.9-.4-6.5-.2-10.2-.3-10.2-.3l-.2-2.7z"/><path class="tt14" d="M510.1 211h6.2v1.7h-6.2z"/><path class="tt15" d="M513.2 211.8L403.8 480.4M513.3 214.6l29.4 268.8M513.3 214.6L535.4 483"/><path class="tt16" d="M513.3 214.6l35.6 269.1M513.8 212.2l-64.4 271.5"/><path class="tt15" d="M548.9 436.7l-24.6 45.8"/><path class="tt12" d="M511.5 458.1l-64.5-7.8-.8 2.6 65.3 7.8"/><path class="tt13" d="M593.5 484.7l38.6-5.6 1.1 1.9-39.7 7.8"/></g>
<g class="bg4"><path class="tt17" d="M367.8 425.5H-34.5V308.7l255.7 41.5 68.9 48"/><linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-40.26" y1="355.684" x2="283.973" y2="395.645"><stop offset="0" stop-color="#029373"/><stop offset="1" stop-color="#02AA73"/></linearGradient><path class="tt18" d="M-34.5 404.1s78.4 5.3 97.1 3.9c18.7-1.4-5-7.2 14.4-9.4s79.2 3 102.3 5.5c23 2.4 26.6-24.2 46.8-24.2s58 14.2 58 14.2l-63-45-255.6-40.4v95.4z"/><path class="tt19" d="M89 303.8l-13.7 32h27.5M-5.4 347.1l-9.8 22.8H4.4M152.8 331.3l-7.7 17.9h15.4M179.1 356l-6.1 14.3h12.3"/><path class="tt10" d="M307.4 413.9l-57.9-9.8 9.8-195.8h39.4M263.4 169.1h30.1v26.4h-30.1z"/><path class="tt10" d="M265.9 152.4H291v24.2h-25.1z"/><path class="tt20" d="M268.3 152.4h20.2v16.7h-20.2z"/><path class="tt10" d="M277.1 152.4h2.7v18.7h-2.7zM275.5 135h5.8v5.8h-5.8z"/><path class="tt21" d="M292.9 153.7H264l10.5-13.8h7.9"/><path class="tt22" d="M260.4 179.4h36.1v16.1h-36.1z"/><path class="tt22" d="M264.9 179.4h3.9v15.7h-3.9zM272.8 179.4h3.9v15.7h-3.9zM280.7 179.4h3.9v15.7h-3.9zM288.5 179.4h3.9v15.7h-3.9z"/><path class="tt21" d="M298.8 208.4h-39l-11.1-16.5h59"/><path class="tt23" d="M265.8 152.4h25.3v5.9h-25.3z"/><path class="tt10" d="M263.4 152.4h30.1v2.6h-30.1zM247.6 190.8h61.2v2.6h-61.2z"/><g><defs><path id="SVGID_7_" d="M307.4 413.9l-57.9-9.8 9.8-195.8h39.4z"/></defs><clipPath id="SVGID_8_"><use xlink:href="#SVGID_7_" overflow="visible"/></clipPath><g class="tt24"><path class="tt21" d="M241.1 208.3h74.2v33.1h-74.2zM241.1 283.4h74.2v33.1h-74.2zM241.1 358.6h74.2v53.3h-74.2z"/></g></g><path class="tt20" d="M263.4 220.5h2.9v7.8h-2.9zM295 296h2.9v7.8H295z"/><path class="tt25" d="M249.5 404.1l75.8 21.4h42.5l-60.6-21.3s-1.6 2.8-18.3 2.8c-19.5 0-39.4-2.9-39.4-2.9z"/></g>
</svg></div>
<a href="https://github.com/esteban-m/jParallax" target="_blank">Download Plugin</a>
html,body {
padding: 0;
margin: 0;
position: relative;
}
div {
display: block;
position: relative;
}
svg {
max-width: 100%;
}
a {
position: fixed;
top: 2em;
left: 2em;
z-index: 99999;
text-decoration: none;
color: #FFF;
padding: .5em;
font-family: arial;
border: 2px solid #FFF;
}
/*START PLUGIN jParallax*/
(function($) {
$.fn.extend({
jParallax: function(opt) {
var defaults = { moveFactor: 5, targetContainer: 'body' },
o = $.extend(defaults, opt);
return this.each(function() {
var background = $(this);
$(o.targetContainer).on('mousemove', function(e){
mouseX = e.pageX;
mouseY = e.pageY;
windowWidth = $(window).width();
windowHeight = $(window).height();
percentX = (0-((mouseX/windowWidth)*o.moveFactor) - (o.moveFactor/2)+o.moveFactor)/2;
percentY = (0-((mouseY/windowHeight)*o.moveFactor) - (o.moveFactor/2)+o.moveFactor)/2;
background[0].style.transform = "translate("+percentX+"%,"+percentY+"%)";
});
});
}
});
}(jQuery));
/*END PLUGIN jParallax*/
/*Invoke*/
$('.bg1').jParallax({ moveFactor: 5, targetContainer: '.parallax' });
$('.bg2').jParallax({ moveFactor: 10, targetContainer: '.parallax' });
$('.bg3').jParallax({ moveFactor: 15, targetContainer: '.parallax' });
$('.bg4').jParallax({ moveFactor: 20, targetContainer: '.parallax' });
This Pen doesn't use any external CSS resources.