<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/caseymorrisus/pen/LVLqwR?depth=everything&order=popularity&page=12&q=translate&show_forks=false" />
<style class="cp-pen-styles">html {
background: #efefef;
background: -webkit-radial-gradient(center ellipse, #efefef 0%,#dddddd 100%);
background: radial-gradient(ellipse at center, #efefef 0%,#dddddd 100%);
padding-top: 100px;
}
.container {
display: block;
margin: 0 auto;
position: relative;
width: 400px;
height: 400px;
overflow: hidden;
background: #efefef;
border-radius: 50% 50%;
box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.1);
}
.container span {
position: absolute;
background: red;
background: -webkit-linear-gradient(top, #d64f89 0%,#fdb054 100%);
background: linear-gradient(to bottom, #d64f89 0%,#fdb054 100%);
z-index: 10;
width: 100%;
height: 100%;
opacity: 0.2
}
.container svg {
position: absolute;
left: -180px;
top: -70px;
}
#Wave1 {
-webkit-transform: translate(0px , 0px);
transform: translate(0px , 0px);
}
#Wave2 {
-webkit-transform: translate(50px , 0px);
transform: translate(50px , 0px);
}
#Wave3 {
-webkit-transform: translate(-50px , 0px);
transform: translate(-50px , 0px);
}
#Wave4 {
-webkit-transform: translate(50px , 0px);
transform: translate(50px , 0px);
}
#Cloud {
-webkit-transform: translate(700px, 300px);
transform: translate(700px, 300px);
}
#Cloud2 {
-webkit-transform: translate(700px, 300px) scale(0.5);
transform: translate(700px, 300px) scale(0.5);
}
#Cloud3 {
-webkit-transform: translate(500px, 450px) scale(0.3);
transform: translate(500px, 450px) scale(0.3);
}
#Rays {
/*transform: rotate(0deg)*/
}</style></head><body>
<div class="container">
<span></span>
<svg width="960px" height="540px" viewBox="0 0 1920 1080">
<defs>
<linearGradient x1="50%" y1="78.0612245%" x2="50%" y2="3.12944523%" id="linearGradient-1">
<stop stop-color="#D61BD6" offset="0%"></stop>
<stop stop-color="#FFB200" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="SunsetWaves">
<rect id="Sunset" fill="url(#linearGradient-1)" x="-341" y="-166" width="2552" height="1406"></rect>
<g id="Rays" transform="translate(-1362.000000, -947.000000) rotate(0, 1662, 1250)" fill="#FFFFFF" opacity="0.1">
<g id="1" transform="translate(756.000000, 0.000000)">
<path d="M838.992188,1099.49219 L2036.99219,863.492188 L1992.99219,747.492188 L838.992188,1099.49219 Z" id="Path-1-Copy" transform="translate(1437.992188, 923.492188) rotate(-15.000000) translate(-1437.992188, -923.492188) "></path>
<path d="M735.992188,972.60727 L1933.99219,736.60727 L1889.99219,620.60727 L735.992188,972.60727 Z" id="Path-1-Copy-2" transform="translate(1334.992188, 796.607270) rotate(-30.000000) translate(-1334.992188, -796.607270) "></path>
<path d="M603.992188,876.519986 L1801.99219,640.519986 L1757.99219,524.519986 L603.992188,876.519986 Z" id="Path-1-Copy-3" transform="translate(1202.992188, 700.519986) rotate(-45.000000) translate(-1202.992188, -700.519986) "></path>
<path d="M452.071716,818.242971 L1650.07172,582.242971 L1606.07172,466.242971 L452.071716,818.242971 Z" id="Path-1-Copy-4" transform="translate(1051.071716, 642.242971) rotate(-60.000000) translate(-1051.071716, -642.242971) "></path>
<path d="M290,800.386019 L1488,564.386019 L1444,448.386019 L290,800.386019 Z" id="Path-1-Copy-5" transform="translate(889.000000, 624.386019) rotate(-75.000000) translate(-889.000000, -624.386019) "></path>
<path d="M129,825.992188 L1327,589.992188 L1283,473.992188 L129,825.992188 Z" id="Path-1-Copy-6" transform="translate(728.000000, 649.992188) rotate(-90.000000) translate(-728.000000, -649.992188) "></path>
<path d="M-20.0355534,891.519986 L1177.96445,655.519986 L1133.96445,539.519986 L-20.0355534,891.519986 Z" id="Path-1-Copy-7" transform="translate(578.964447, 715.519986) rotate(-105.000000) translate(-578.964447, -715.519986) "></path>
<path d="M-146.928284,993.519986 L1051.07172,757.519986 L1007.07172,641.519986 L-146.928284,993.519986 Z" id="Path-1-Copy-8" transform="translate(452.071716, 817.519986) rotate(-120.000000) translate(-452.071716, -817.519986) "></path>
</g>
<g id="2" transform="translate(1133.500000, 1406.500000) rotate(-120.000000) translate(-1133.500000, -1406.500000) translate(102.000000, 694.000000)">
<path d="M838.992188,1099.49219 L2036.99219,863.492188 L1992.99219,747.492188 L838.992188,1099.49219 Z" id="Path-1-Copy" transform="translate(1437.992188, 923.492188) rotate(-15.000000) translate(-1437.992188, -923.492188) "></path>
<path d="M735.992188,972.60727 L1933.99219,736.60727 L1889.99219,620.60727 L735.992188,972.60727 Z" id="Path-1-Copy-2" transform="translate(1334.992188, 796.607270) rotate(-30.000000) translate(-1334.992188, -796.607270) "></path>
<path d="M603.992188,876.519986 L1801.99219,640.519986 L1757.99219,524.519986 L603.992188,876.519986 Z" id="Path-1-Copy-3" transform="translate(1202.992188, 700.519986) rotate(-45.000000) translate(-1202.992188, -700.519986) "></path>
<path d="M452.071716,818.242971 L1650.07172,582.242971 L1606.07172,466.242971 L452.071716,818.242971 Z" id="Path-1-Copy-4" transform="translate(1051.071716, 642.242971) rotate(-60.000000) translate(-1051.071716, -642.242971) "></path>
<path d="M290,800.386019 L1488,564.386019 L1444,448.386019 L290,800.386019 Z" id="Path-1-Copy-5" transform="translate(889.000000, 624.386019) rotate(-75.000000) translate(-889.000000, -624.386019) "></path>
<path d="M129,825.992188 L1327,589.992188 L1283,473.992188 L129,825.992188 Z" id="Path-1-Copy-6" transform="translate(728.000000, 649.992188) rotate(-90.000000) translate(-728.000000, -649.992188) "></path>
<path d="M-20.0355534,891.519986 L1177.96445,655.519986 L1133.96445,539.519986 L-20.0355534,891.519986 Z" id="Path-1-Copy-7" transform="translate(578.964447, 715.519986) rotate(-105.000000) translate(-578.964447, -715.519986) "></path>
<path d="M-146.928284,993.519986 L1051.07172,757.519986 L1007.07172,641.519986 L-146.928284,993.519986 Z" id="Path-1-Copy-8" transform="translate(452.071716, 817.519986) rotate(-120.000000) translate(-452.071716, -817.519986) "></path>
</g>
<g id="3" transform="translate(2063.500000, 1626.500000) rotate(-240.000000) translate(-2063.500000, -1626.500000) translate(1032.000000, 914.000000)">
<path d="M838.992188,1099.49219 L2036.99219,863.492188 L1992.99219,747.492188 L838.992188,1099.49219 Z" id="Path-1-Copy" transform="translate(1437.992188, 923.492188) rotate(-15.000000) translate(-1437.992188, -923.492188) "></path>
<path d="M735.992188,972.60727 L1933.99219,736.60727 L1889.99219,620.60727 L735.992188,972.60727 Z" id="Path-1-Copy-2" transform="translate(1334.992188, 796.607270) rotate(-30.000000) translate(-1334.992188, -796.607270) "></path>
<path d="M603.992188,876.519986 L1801.99219,640.519986 L1757.99219,524.519986 L603.992188,876.519986 Z" id="Path-1-Copy-3" transform="translate(1202.992188, 700.519986) rotate(-45.000000) translate(-1202.992188, -700.519986) "></path>
<path d="M452.071716,818.242971 L1650.07172,582.242971 L1606.07172,466.242971 L452.071716,818.242971 Z" id="Path-1-Copy-4" transform="translate(1051.071716, 642.242971) rotate(-60.000000) translate(-1051.071716, -642.242971) "></path>
<path d="M290,800.386019 L1488,564.386019 L1444,448.386019 L290,800.386019 Z" id="Path-1-Copy-5" transform="translate(889.000000, 624.386019) rotate(-75.000000) translate(-889.000000, -624.386019) "></path>
<path d="M129,825.992188 L1327,589.992188 L1283,473.992188 L129,825.992188 Z" id="Path-1-Copy-6" transform="translate(728.000000, 649.992188) rotate(-90.000000) translate(-728.000000, -649.992188) "></path>
<path d="M-20.0355534,891.519986 L1177.96445,655.519986 L1133.96445,539.519986 L-20.0355534,891.519986 Z" id="Path-1-Copy-7" transform="translate(578.964447, 715.519986) rotate(-105.000000) translate(-578.964447, -715.519986) "></path>
<path d="M-146.928284,993.519986 L1051.07172,757.519986 L1007.07172,641.519986 L-146.928284,993.519986 Z" id="Path-1-Copy-8" transform="translate(452.071716, 817.519986) rotate(-120.000000) translate(-452.071716, -817.519986) "></path>
</g>
</g>
<path d="M1997,639.153076 L1997,1080 L-41,1080 L-41,600 L-27.9799168,600 L-27.9798944,600.000002 C-2.79375546,625.855534 56.2178033,644 125,644 C192.03884,644 249.79606,626.763658 276.00001,601.950975 C302.203938,626.763658 359.961158,644 427,644 C494.03885,644 551.796076,626.763654 578,601.950966 C604.203924,626.763654 661.96115,644 729,644 C796.03885,644 853.796076,626.763654 880,601.950966 C906.203924,626.763654 963.96115,644 1031,644 C1098.03885,644 1155.79608,626.763654 1182,601.950966 C1208.20392,626.763654 1265.96115,644 1333,644 C1400.03885,644 1457.79608,626.763654 1484,601.950966 C1510.20392,626.763654 1567.96115,644 1635,644 C1702.03885,644 1759.79608,626.763654 1786,601.950966 C1812.20392,626.763654 1869.96115,644 1937,644 C1958.1579,644 1978.39129,642.28313 1997,639.15307 Z" id="Wave1" fill="#91BCEE"></path>
<path d="M1997,687.153076 L1997,1128 L-41,1128 L-41,648 L-27.9799168,648 L-27.9798944,648.000002 C-2.79375546,673.855534 56.2178033,692 125,692 C192.03884,692 249.79606,674.763658 276.00001,649.950975 C302.203938,674.763658 359.961158,692 427,692 C494.03885,692 551.796076,674.763654 578,649.950966 C604.203924,674.763654 661.96115,692 729,692 C796.03885,692 853.796076,674.763654 880,649.950966 C906.203924,674.763654 963.96115,692 1031,692 C1098.03885,692 1155.79608,674.763654 1182,649.950966 C1208.20392,674.763654 1265.96115,692 1333,692 C1400.03885,692 1457.79608,674.763654 1484,649.950966 C1510.20392,674.763654 1567.96115,692 1635,692 C1702.03885,692 1759.79608,674.763654 1786,649.950966 C1812.20392,674.763654 1869.96115,692 1937,692 C1958.1579,692 1978.39129,690.28313 1997,687.15307 Z" id="Wave2" fill="#4990E2"></path>
<path d="M1997,757.153076 L1997,1198 L-41,1198 L-41,718 L-27.9799168,718 L-27.9798944,718.000002 C-2.79375546,743.855534 56.2178033,762 125,762 C192.03884,762 249.79606,744.763658 276.00001,719.950975 C302.203938,744.763658 359.961158,762 427,762 C494.03885,762 551.796076,744.763654 578,719.950966 C604.203924,744.763654 661.96115,762 729,762 C796.03885,762 853.796076,744.763654 880,719.950966 C906.203924,744.763654 963.96115,762 1031,762 C1098.03885,762 1155.79608,744.763654 1182,719.950966 C1208.20392,744.763654 1265.96115,762 1333,762 C1400.03885,762 1457.79608,744.763654 1484,719.950966 C1510.20392,744.763654 1567.96115,762 1635,762 C1702.03885,762 1759.79608,744.763654 1786,719.950966 C1812.20392,744.763654 1869.96115,762 1937,762 C1958.1579,762 1978.39129,760.28313 1997,757.15307 Z" id="Wave3" fill="#3375C3" ></path>
<path d="M1997,820.153076 L1997,1261 L-41,1261 L-41,781 L-27.9799168,781 L-27.9798944,781.000002 C-2.79375546,806.855534 56.2178033,825 125,825 C192.03884,825 249.79606,807.763658 276.00001,782.950975 C302.203938,807.763658 359.961158,825 427,825 C494.03885,825 551.796076,807.763654 578,782.950966 C604.203924,807.763654 661.96115,825 729,825 C796.03885,825 853.796076,807.763654 880,782.950966 C906.203924,807.763654 963.96115,825 1031,825 C1098.03885,825 1155.79608,807.763654 1182,782.950966 C1208.20392,807.763654 1265.96115,825 1333,825 C1400.03885,825 1457.79608,807.763654 1484,782.950966 C1510.20392,807.763654 1567.96115,825 1635,825 C1702.03885,825 1759.79608,807.763654 1786,782.950966 C1812.20392,807.763654 1869.96115,825 1937,825 C1958.1579,825 1978.39129,823.28313 1997,820.15307 Z" id="Wave4" fill="#255B99" ></path>
<g id="Cloud" transform="translate(635.000000, 262.000000)" fill="#FFFFFF" opacity="0.8">
<rect id="Rectangle-6" x="55" y="96" width="251" height="110"></rect>
<circle id="Oval-29" cx="55" cy="151" r="55"></circle>
<circle id="Oval-29-Copy" cx="306" cy="151" r="55"></circle>
<circle id="Oval-31" cx="225" cy="81" r="81"></circle>
<circle id="Oval-32" cx="129.5" cy="108.5" r="64.5"></circle>
</g>
<g id="Cloud2" transform="translate(635.000000, 262.000000) scale(0.5)" fill="#FFFFFF" opacity="0.8">
<rect id="Rectangle-6" x="55" y="96" width="251" height="110"></rect>
<circle id="Oval-29" cx="55" cy="151" r="55"></circle>
<circle id="Oval-29-Copy" cx="306" cy="151" r="55"></circle>
<circle id="Oval-31" cx="225" cy="81" r="81"></circle>
<circle id="Oval-32" cx="129.5" cy="108.5" r="64.5"></circle>
</g>
<g id="Cloud3" transform="translate(635.000000, 262.000000) scale(0.5)" fill="#FFFFFF" opacity="0.8">
<rect id="Rectangle-6" x="55" y="96" width="251" height="110"></rect>
<circle id="Oval-29" cx="55" cy="151" r="55"></circle>
<circle id="Oval-29-Copy" cx="306" cy="151" r="55"></circle>
<circle id="Oval-31" cx="225" cy="81" r="81"></circle>
<circle id="Oval-32" cx="129.5" cy="108.5" r="64.5"></circle>
</g>
</g>
</g>
</svg>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >var elm1 = $('#Wave1');
var elm2 = $('#Wave2');
var elm3 = $('#Wave3');
var elm4 = $('#Wave4');
var cloud = $('#Cloud');
var cloud2 = $('#Cloud2');
var cloud3 = $('#Cloud3');
var rays = $('#Rays');
var fps = 1000/60;
rays.attr('transform', "translate(-1362.000000, -947.000000) rotate(0, 1662, 1250)");
var ray_deg = 0;
var cloud_x = 700;
var cloud2_x = 700;
var cloud3_x = 500;
var ray_anim = setInterval(function() {
ray_deg += 0.1;
rays.attr('transform', "translate(-1362.000000, -947.000000) rotate(" + ray_deg + ", 1662, 1250)");
}, (fps));
var cloud_anim = setInterval(function() {
if (cloud_x === 1170) {
cloud_x = 0;
} else {
cloud_x += 1;
}
cloud.css('transform', 'translate(' + cloud_x + 'px, 300px)');
}, (fps));
var cloud2_anim = setInterval(function() {
if (cloud2_x === 1170) {
cloud2_x = 0;
} else {
cloud2_x += 0.5;
}
cloud2.css('transform', 'translate(' + cloud2_x + 'px, 300px) scale(0.5)');
}, (fps));
var cloud3_anim = setInterval(function() {
if (cloud3_x === 1170) {
cloud3_x = 0;
} else {
cloud3_x += 0.5;
}
cloud3.css('transform', 'translate(' + cloud3_x + 'px, 380px) scale(0.3)');
}, (fps));
$( "html" ).mousemove(function( event ) {
var x = event.pageX;
var y = event.pageY;
changePosition(x, y, 4, elm1, 0);
changePosition(x, y, 3, elm2, 50);
changePosition(x, y, 2, elm3, -50);
changePosition(x, y, 1, elm4, 50);
});
function changePosition(x,y,speed,elm,start) {
var new_left = start + (x / (speed * 10));
var new_top = 0 + (y / (speed * 10));
//if (new_left >= 0) { new_left = 0; }
elm.css('transform', 'translate(' + new_left + 'px,' + new_top + 'px)');
};
//# sourceURL=pen.js
</script>
</body></html>
