<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice"> <defs> <linearGradient id="foreGroundBlue"> <stop stop-color="#00354e"></stop> </linearGradient> <linearGradient id="foreGroundBlueToLight" gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#285e68"></stop> <stop offset="50%" stop-color="#00354e"></stop> <stop offset="100%" stop-color="#00354e"></stop> </linearGradient> <radialGradient id="backgroundRadial" spreadMethod="pad"> <stop offset="0%" stop-color="#96bda2"></stop> <stop offset="130%" stop-color="#2b606a"></stop> </radialGradient> <linearGradient id="midTreeColor" gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#477878"></stop> <stop offset="100%" stop-color="#044356"></stop> </linearGradient> <linearGradient id="bgTreeColor"> <stop stop-color="#477878"></stop> </linearGradient> <filter id="veryHighBlur"> <feGaussianBlur stdDeviation="2.5" in="SourceGraphic"></feGaussianBlur> </filter> <filter id="highBlur"> <feGaussianBlur stdDeviation="1.5" in="SourceGraphic"></feGaussianBlur> </filter> <filter id="mediumBlur"> <feGaussianBlur stdDeviation="1" in="SourceGraphic"></feGaussianBlur> </filter> <filter id="lowBlur"> <feGaussianBlur stdDeviation="0.25" in="SourceGraphic"></feGaussianBlur> </filter> </defs> <!--rect(x='0',y='0',width='400',height='300',fill='url(#backgroundRadial)')--> <g id="veryBackgroundTrees" filter="url(#veryHighBlur)" fill="#5f8e86"> <path id="leftTree3" d="m 93.691648,301.76775 11.869292,-95.45942 -26.516504,-8.08122 -10.101525,-20.70813 12.12183,18.94036 24.748739,4.54569 -1.76777,-18.94036 L 80,164.99998 71.72083,172.46822 52.275394,167.67 70,168.68015 76.266517,162.61923 66.922606,137.8705 80,160.59893 102.02541,176.00376 90.66119,148.98218 72.478445,138.12304 63.892148,112.36415 75,136.35527 95.964491,147.46695 110,121.20298 l -4.43906,-25.506346 7.82868,26.011426 -15.152286,29.7995 8.838836,20.20305 6.06091,4.54568 23.48605,-4.29314 8.37687,-5.55584 -15,-10.35407 -1.20555,-16.05326 3.53553,14.79057 15.40483,9.09138 21.2132,-8.88195 14.14214,-16.37186 20.96066,10.56348 -20.45559,-8.03811 -11.86929,13.84649 15.65736,5.34641 L 170,157.31593 l -20,8.33376 16.67516,16.92006 -18.43527,-14.39468 -8.23989,6.82491 -28.12561,8.32738 20.96067,117.43024 z"></path> <path id="rightTree3" d="M 233.43401,299.49491 245,214.99998 l -5,-17.53048 -16.75629,2.53048 -14.39467,-9.09647 14.89975,7.82868 13.88959,-2.77792 -8.95612,-8.8082 -10.23677,0.97952 10.6066,-3.12561 10.10152,8.42891 L 238.396,179.99998 225,163.12431 l 15,17.42513 1.7836,15.12691 3.2164,4.32363 8.29575,-10.10662 -6.56599,-9.89338 8.58629,8.73731 9.68395,-12.98607 -1.60273,-7.57615 3.53554,8.08123 -15.40483,21.46574 15.40483,-1.2627 -16.93281,3.54064 -2.00755,5.55074 4.04061,11.36421 -0.75762,34.09265 4.12939,49.75002 z"></path> </g> <g id="backgroundTrees" filter="url(#highBlur)" fill="#457979"> <path id="leftTree2" d="M 40,259.99998 50,187.14284 45.714285,164.99998 40,149.99998 5.7142857,148.57141 -25,127.14284 6.4285714,144.99998 37.22208,144.07649 30.000001,132.49998 -12.857143,119.99998 -30,95.714272 -10.892857,116.07141 26.428571,127.14284 3.5714286,105.17855 -10,79.999985 l 15,20 L 10,67.142844 7.8571428,102.14284 26.428571,119.99998 22.142857,92.857129 0,79.999985 20,86.428558 10.178571,55.178557 23.75,85.892843 30,62.142844 20,41.428558 32.857142,62.321415 26.785714,93.392844 33.571428,117.14284 45.714285,76.428558 38.571428,59.999985 47.678571,76.428557 37.321429,122.32141 44.285714,132.85712 76.428571,115.71427 60,102.85712 65.714285,79.999985 64.285714,102.85712 80,112.14284 102.14286,102.85712 83.571428,84.285701 82.142857,49.999985 86.785714,82.85713 106.42857,102.14284 124.28571,69.999985 108.39286,104.28569 97.857142,109.99998 48.75,140.53569 55.714285,153.57141 115,127.85712 130,96.428558 145,82.142844 131.42857,99.642842 122.32143,124.2857 160,116.42855 167.14286,95.714272 160,77.857129 168.75,93.571415 180,74.999987 169.10714,96.785699 165,114.99998 190.71429,131.96427 215,119.99998 l 7.14286,-29.999995 -13.57143,-14.285713 15,13.75 18.57143,-3.035714 -18.21429,4.999999 -7.5,29.285713 L 190,134.2857 l -24.28572,-14.28572 -42.85714,10 L 58.571428,161.07141 70,199.99998 l 3.571428,62.85714 z"></path> <path id="rightTree2" d="M 263.14474,299.74745 285.62063,184.99998 251.27544,161.35654 245,131.80958 253.29575,160.59893 285,177.26645 l 5,-28.03174 -6.90475,-14.14213 -20.96067,-7.32361 -8.08122,12.23101 L 260,126.75882 234.35539,108.071 220,136.86035 l -20.99995,1.26269 20.20305,-3.12306 13.13198,-28.69675 -18.68782,-15.40482 8.5863,-23.738585 -6.06092,22.84016 17.1726,14.030405 22.22335,-19.95051 -8.08122,-19.950513 10.85914,21.465742 -22.47589,19.950511 23.23351,15.40482 -7.07107,-20.950455 -14.64721,-8.343961 16.35146,6.81853 9.9125,25.758886 23.99113,5.76654 -9.34392,-22.18152 13.63706,23.48605 9.34391,-6.30453 L 299.51023,93.67633 278.8021,80.796884 300.77292,90.645871 305,72.210588 l -3.46947,-9.091373 5.80838,9.848987 -5.55584,24.243661 L 322.99627,84.07988 320,69.999985 325,85.34257 302.22208,99.999985 305,126.50628 l -10,9.59645 9.30845,10.35406 5.69155,-11.45681 -2.40855,-10 4.79822,11.10275 -10.85914,27.52666 17.42513,-14.14214 L 330,122.46567 l -7.50881,29.7995 28.53682,-12.87944 6.56599,-25.25382 -5.05076,28.03174 -31.8198,14.14213 25.00127,18.43528 29.7995,-13.38452 -29.7995,17.67767 -29.29443,-19.44543 -12.12183,11.36421 -2.0203,19.04699 12.62691,109.24239 z"></path> </g> <g id="middleTrees" fill="url(#midTreeColor)" filter="url(#mediumBlur)"> <path id="leftTree1" d="m 19.999997,264.99992 26.467017,-24.99999 8.532983,-40 7.22208,-18.69292 0.91245,-14.14214 3.03046,-17.16494 -8.5863,-18.1904 -9.596444,-26.8096 -1.010153,-15.000002 -13.637059,-11.22341 -3.335034,-8.77659 6.365492,6.75629 13.634508,8.24371 0,-10 -3.027907,-7.84016 -5.555839,-10.6066 3.583746,-11.55324 1.467017,13.06847 3.532983,5.55583 3.033009,-8.6243 -0.505077,-7.03306 3.535538,9.09137 -3.535538,9.09138 4.040608,11.11167 -1.56854,17.73864 2.07362,13.576092 9.59645,16.42391 3.32993,-20 -2.82486,-17.132032 6.566,-14.64722 -0.50508,-24.74873 -3.23606,-23.47202 -8.88577,-20.0000003 -17.172594,-28.2488197 -31.819805,5.55584 32.878169,-9.09137 21.16499,23.2335097 -21.16499,-61.4491597 -20,-12.79705 27.022856,12.79705 26.769044,67.5100797 6.2081,9.0913703 1.87312,26.26396 4.54569,17.13459 8.58119,-10 -3.02536,-16.22596 -8.08122,-12.6269 7.57615,5.55583 -3.03046,-26.7029703 -13.43911,-16.7335897 18.48987,15.6573697 5.050773,28.7893503 1.45936,12.28687 7.63201,-8.75134 -0.50508,-31.2486603 5.05077,-24.9999997 -0.91501,27.9643897 L 152.53303,-28.299652 120,-7.2319343e-5 118.69292,21.702898 142.43151,12.106458 120,28.268888 l -5,9.59645 6.72338,-2.86541 -11.72338,10 -2.41875,15 -4.54569,10 -0.81348,14.07989 -7.222083,10.92011 -2.06597,40.000002 2.06597,10 -5,11.55834 0.95939,16.66752 -2.06597,11.77414 -0.15611,16.00505 -6.91495,12.62691 5.05076,28.78934 16.667523,27.57869 z"></path> <path id="rightTree1" d="M 299.51023,299.49485 325,227.26895 327.28942,187.873 308.6016,159.99993 283.34779,166.15472 275,159.99993 l -30,12.2157 27.77792,-15.15228 -8.37049,-8.33376 -17.93021,6.27034 18.52278,-10 19.1054,16.01015 20.70813,-6.97719 -12.87944,-14.03296 19.44543,16.81088 16.3984,20.96066 -1.49865,-35.35534 -7.57614,-16.16244 -14.64722,-14.89974 -16.66751,10.85913 13.63706,-13.13198 -17.67767,-10.101532 -11.61676,4.545692 -9.59644,16.47467 2.86541,-15 -16.50247,1.55579 20.20305,-6.555792 -16.66752,-6.07112 22.96694,3.03046 11.88332,-1.95934 20.70813,12.060862 11.11168,7.93914 -6.17775,-16.272902 -13.98985,-17.17259 -24.53166,-6.56599 22.00628,2.53686 -18.23223,-19.45691 -15,-13.88961 -11.24994,2.27285 9.48217,-4.93648 -13.52278,-13.24627 16.16245,12.87945 14.89974,13.13198 -7.3236,-19.28039 1.51523,-12.79195 -7.74119,-9.09137 10.5191,8.83883 -0.75761,12.87945 9.09138,21.71828 30.89459,35.60788 -6.14586,-25.50636 1.3984,-13.13198 -7.20677,-17.56339 10.35406,18.03046 0.50508,12.41238 8.08122,26.5165 0.50507,10.606602 6.06092,-13.525332 L 325,121.70801 l 5,11.61675 8.90618,-36.870572 -5.05076,-21.45426 -8.85542,10 7.34018,-14.49492 L 330,48.471948 l -6.75119,-20.20306 13.63706,30.30458 1.51523,11.42646 4.54569,17.11035 8.56844,-15.84766 1.02801,-16.22468 -15.15229,-25.03801 14.14213,18.03046 L 355,26.753668 352.54324,6.0455377 l 6.06093,23.9544003 -3.60415,23.0177 12.69553,-14.64721 3.53553,-21.21321 -0.75762,22.22336 11.61677,-4.04061 -13.85798,8.5863 -10.63823,14.05336 15.15229,-7.97969 5.05076,-17.69043 -2.79705,20.20306 16.93919,1.51522 -19.1929,0.97215 -15.15229,7.61415 -0.82623,13.13199 -6.76777,10.6066 -6.76777,25.667582 29.26152,-33.243722 10.35407,-17.1726 -0.50508,-13.63706 4.54569,-17.96694 -2.39351,16.95679 0.50508,11.11168 10.45431,-17.41238 -13.61665,29.28167 6.566,1.32493 7.82868,-7.63838 -8.08122,9.86046 -9.34391,3.27152 -13.80721,18.24372 4.71583,1.20172 13.13199,-4.29315 -11.74303,6.69226 -9.72272,2.651652 -11.38207,13.74752 -5,7.21315 16.12954,-4.04061 12.12183,-14.64721 -10.6066,18.18274 10.10152,6.06092 -14.64721,-2.76899 -13.09908,2.26391 -6.5989,12.73609 0.50508,23.12433 9.83113,-3.03046 7.27284,-15.04311 11.68538,-0.0508 -10.10153,2.46697 -8.08122,17.67766 -9.59645,5.80839 1.51523,54.04699 22.50752,74.49489 z"></path> </g> <g id="foreGround" filter="url(#lowBlur)" fill="url(#foreGroundBlueToLight)" gradientTransform="rotate(90)"> <path id="leftRockPath" d="m -2.6822092e-6,254.99992 49.9999996822092,-5 10,-24.99999 -10,-25 -15,-10 -15,-10 -9.9999997,-25 -13.214286,-5 -16.7857143,5 -25,55 5,39.99999 z"></path> <path id="rightRockPath" d="m 360.71429,254.99992 -12.5,-18.92856 -8.21429,-20 6.78572,-11.07143 -0.71429,-10 10.71429,-27.85714 0.35714,-14.28572 15,-36.78571 6.42857,-6.07143 16.42857,0 7.85714,6.78571 12.14286,62.5 -1.42857,27.5 2.85714,29.28572 -20.71428,18.92856 z"></path> <path id="smallRock" d="m 325,258 1.27927,-14.39465 12.62691,-9.59645 9.84899,3.78808 -0.75762,13.43783 c -4.5483,6.54999 -14.37531,5.99999 -22.99755,6.76519 z"></path> <g id="owl" fill="#285e68"> <path id="owlBody" d="m 392.94934,107.69214 0,3.53553 -1.76777,0.12627 -0.25253,-3.6618 -0.92904,0.88388 0,2.77792 -2.10142,-0.25254 0.12627,-2.65165 c 0,0 -3.53554,-2.65165 -5.3033,-6.43972 -1.76777,-3.788072 -0.50508,-9.091372 -0.50508,-9.091372 l 1.89404,-5.3033 -0.88389,-5.80838 6.43972,4.67196 9.59645,-1.01016 -3.40926,5.68211 c 0,0 1.76777,4.41942 1.13642,9.596452 -0.63134,5.17703 -2.90419,6.56599 -4.04061,6.9448 z"></path> <g id="owlHead"> <ellipse id="owlRoundHead" cx="389.28754" cy="90.550011" rx="7.5435138" ry="6.1850381"></ellipse> <g id="owlEyes" fill="white"> <ellipse id="owlLeftEye" cx="386" cy="90.014526" rx="2" ry="1.8940361"></ellipse> <ellipse id="owlRightEye" cx="393" cy="91.932861" rx="2" ry="1.9328736"></ellipse> </g> </g> </g> </g> <g id="butterflies" fill="white"> <path id="butterfly1" d="m 130,166.07141 c 0,0 3.39286,4.10714 3.39286,0.71429 0,-3.39286 -6.25,5.35714 -5.71429,1.07142 C 128.21428,163.57141 130,166.07141 130,166.07141 Z"></path> <path id="butterfly2" d="m 119.10714,178.39284 c 0,0 -3.39285,-3.21429 -3.21428,-0.17857 0.17857,3.03571 8.15019,-5.05603 5.71428,0.35714 -1.60713,3.57143 -2.5,-0.17857 -2.5,-0.17857 z"></path> </g> <g id="groundAndGrass" fill="url(#foreGroundBlue)"> <rect x="-500" y="250" width="2000" height="500"></rect> <path id="grass1" d="m 165,249.99992 2.72716,-0.2525 c 0,0 2.27285,-26.84269 20.25254,-27.72718 2.11263,-0.10393 -17.97969,-4.34264 -22.9797,27.97968 z"></path> <path id="grass2" d="m 183,249.99992 2.72716,-0.2525 c -0.41258,1.65031 11.61684,-20.27699 29.84899,-22.17134 2.10386,-0.21859 -18.23223,-1.31218 -32.57615,22.42384 z"></path> </g> <g id="veryForeGround"></g> </svg> <script scr="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <script> //data var mousePosition = {x:window.innerWidth/2,y:window.innerHeight/2}, displacementVector = {x:0, y:0}, parallaxFactor = 10, //from farthest to closest layers = ['veryBackgroundTrees','backgroundTrees','middleTrees','foreGround','groundAndGrass']; function applyTransform(displacementVector) { var x, y, z, index; for(index = 0; index< layers.length; index++){ z = index + 1; x = (z * displacementVector.x * parallaxFactor); y = (z * displacementVector.y * parallaxFactor)/3; document.getElementById(layers[index]) .setAttribute('transform','translate('+x+', '+y+')'); } } /** * transform the mouse position to a vector. * returns -1 -1, if the mouse it at top left of the windows) */ function calculateVector(mousePosition) { return { x:mousePosition.x/window.innerWidth * 2 - 1, y:mousePosition.y/window.innerHeight * 2 - 1 }; } /** * Mouse move event handler */ function mouseMove(event) { //event.stopPropagation(); mousePosition = {x:event.clientX, y:event.clientY}; displacementVector = calculateVector(mousePosition); applyTransform(displacementVector); } /** * Touch move event handler */ function touchMove(event) { for(var i = 0;i<event.touches.length;i++){ mouseMove(event.touches[i]); } } /** * Request animation frame to animate the butterflies */ function animate(timestamp){ //TODO requestAnimationFrame(animate); } //init document.addEventListener('mousemove',mouseMove); document.addEventListener('touchmove',touchMove); animate(); //buterfflies flapping wings animation TweenMax.to('#butterfly1',0.10,{ transform:'scaleX(0.01)', transformOrigin:"50% 50%", repeat:-1, yoyo:true },0.05); TweenMax.to('#butterfly2',0.10,{ transform:'scaleX(0.01)', transformOrigin:"50% 50%", repeat:-1, yoyo:true}, 0); //owl blinking eyes var timeline = new TimelineLite({onCompleteParams:["{self}"],onComplete:function(tl){tl.play("start")}}); timeline.addLabel("start"); timeline.add( TweenMax.to(['#owlLeftEye','#owlRightEye'],2.75,{ transform:'scaleY(1)',}) ); timeline.add( TweenMax.to(['#owlLeftEye','#owlRightEye'],0.25,{ transform:'scaleY(0.01)', transformOrigin:"50% 50%", yoyo:true },0.05)); timeline.play("start"); </script>

html { overflow: hidden; } body, html { height: 100%; width: 100%; margin: 0 auto; } body { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk2YmRhMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJiNjA2YSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: radial-gradient(#96bda2, #2b606a); background-repeat: no-repeat; background-size: 100% 100%; } svg { position: fixed; right: 0; left: 0; height: 100%; width: 100%; } .foreground { fill: #00354e; } .lightForeground { fill: #285e68; } .bgTreeColor { fill: #477878; } .notClearBackground { fill: #2b606a; } .veryClearBackground { fill: #96bda2; } .winking { -webkit-animation-name: winking; animation-name: winking; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; transform-origin: center center; } .flapping { transform-origin: center center; -webkit-animation-duration: .10s; animation-duration: .10s; -webkit-animation-name: flapping; animation-name: flapping; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } @-webkit-keyframes winking { 0% { transform: scale(1, 1); } 90% { transform: scale(1, 1); } 95% { transform: scale(1, 0.01); } 100% { transform: scale(1, 1); } } @keyframes winking { 0% { transform: scale(1, 1); } 90% { transform: scale(1, 1); } 95% { transform: scale(1, 0.01); } 100% { transform: scale(1, 1); } } @-webkit-keyframes flapping { 0% { transform: scale(1, 1); } 100% { transform: scale(0.01, 1); } } @keyframes flapping { 0% { transform: scale(1, 1); } 100% { transform: scale(0.01, 1); } }