Follow Us On Telegram Telegram link
HTML
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodeAtNow - Polaroid Selfie</title> <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <svg class="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> <title>3D polaroid</title> <defs> <clipPath id="topMask"> <rect class="topMask"x="313.2" y="214.6" fill="#D2FF15" width="172" height="114.6"/> </clipPath> <clipPath id="botMask"> <rect class="botMask" x="313.2" y="339" fill="#D2FF15" width="172" height="57"/> </clipPath> <clipPath id="photoMask"> <rect x="313.2" y="354" fill="#D2FF15" width="172" height="57"/> </clipPath> <rect id="slot" x="333" y="349" width="133" height="21" rx="10.38" ry="10.38" fill="#333"/> </defs> <g id="wholeCamera"> <g clip-path="url(#topMask)"> <rect id="baseTop" x="313.32" y="224.58" width="172" height="172" rx="24.03" ry="24.03" fill="#eae4d5" opacity="1"/> </g> <g clip-path="url(#botMask)"> <rect id="baseBot" x="313.32" y="224.58" width="172" height="172" rx="24.03" ry="24.03" fill="#3d3d3d"/> <rect id="baseBot" data-name="baseBot" x="313.32" y="214.58" width="172" height="172" rx="24.03" ry="24.03" fill="#4d4c4c"/> </g> <use xlink:href="#slot"/> <rect x="313.32" y="329.18" width="172" height="9.82" fill="#3d3d3d"/> <circle id="mainButton" cx="336.31" cy="299" r="12" fill="#ff7878" stroke="#f5f3ed" stroke-miterlimit="10" stroke-width="4"/> <circle id="flashSdjuster" cx="459.64" cy="308.93" r="9.5" fill="#676766" stroke="#4d4c4c" stroke-miterlimit="10" stroke-width="3"/> <rect id="flash" x="446" y="260.13" width="28.62" height="28.63" rx="3.63" ry="3.63" fill="#676766" stroke="#4d4c4c" stroke-miterlimit="10" stroke-width="3"/> <g id="spectrumGroup"> <rect x="362" y="290.18" width="12" height="39" fill="#db4f3a"/> <rect x="374" y="290.18" width="12" height="39" fill="#df5b40"/> <rect x="386" y="290.18" width="12" height="39" fill="#f79341"/> <rect x="422" y="290.18" width="12" height="39" fill="#58c1dd"/> <rect x="410" y="290.18" width="12" height="39" fill="#9cba43"/> <rect x="398" y="290.18" width="12" height="39" fill="#f7c65d"/> </g> <circle id="lensOuter" cx="397.15" cy="279.14" r="38.5" fill="#676766" stroke="#4d4c4c" stroke-miterlimit="10" stroke-width="6"/> <circle id="lensMIddle" cx="397.15" cy="279.14" r="34" fill="#676766" stroke="#f5f3ed" stroke-miterlimit="10" stroke-width="3"/> <circle id="lensInner" cx="397.15" cy="279.14" r="17" fill="#9adaf2" stroke="#4d4c4c" stroke-miterlimit="10" stroke-width="4"/> <ellipse id="flashAdjusterShine" transform="matrix(0.4209 -0.9071 0.9071 0.4209 -9.5811 595.9479)" fill="#CBC9C8" cx="462" cy="305.5" rx="3.1" ry="4.6"/> <ellipse id="lensShine" transform="matrix(0.4209 -0.9071 0.9071 0.4209 -13.626 522.7598)" fill="#E4F5FA" cx="402.6" cy="272.1" rx="5" ry="7.3"/> <path id="model" fill="#4D4C4C" d="M348.8,274.8h-24.6c-1.1,0-2-0.9-2-2v-10.6c0-1.1,0.9-2,2-2h24.6c1.1,0,2,0.9,2,2v10.6 C350.8,273.9,349.9,274.8,348.8,274.8z"/> </g> <g id="flashGroup"> <polygon id="flashStar" fill="#FFF" points="463.2,276 493,275 463,271.9 462,242.2 459,272 429.2,273 459,276.2 460,305.9"/> <ellipse id="flashHalo1" fill="none" stroke="#FFF" stroke-miterlimit="10" cx="462" cy="272.9" rx="0" ry="0"/> <ellipse id="flashHalo2" fill="none" stroke="#FFF" stroke-width="2" stroke-miterlimit="10" cx="462" cy="272.9" rx="0" ry="0"/> </g> <path id="photoEnd" fill="none" d="M477.5,370H322.5c-0.6,0-1-0.5-1-1V182c0-0.6,0.5-1,1-1h154.9c0.6,0,1,0.5,1,1v187 C478.5,369.6,478,370,477.5,370z"/> <g id="endGroup"> <path id="photoStart" fill="#EEEBE4" d="M450.6,394.7c5,0,7.8-2.4,7-7l-5-26.2c-0.7-4.1-2.3-7-7-7h-90.9c-4.7,0-6.3,2.9-7,7 l-5,26.2c-0.8,4.6,2,7,7,7H450.6z"/> <rect id="photoContent" x="260" y="166" fill="#C2EB87" width="280" height="270" opacity="0"/> <use id="duplicateCamera" xlink:href="#wholeCamera"/> <use id="slotShadow" xlink:href="#slot" opacity="0.8"/> </g> <rect id="mainFlash" width="100%" height="100%" fill="#ededed" opacity="0"/> </svg> <!-- partial --> <script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script> <script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script><script src="./script.js"></script> </body> </html>
CSS
body { background-color:#11131e; overflow: hidden; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } svg{ width:100%; height:100%; visibility:hidden; overflow:hidden; }
JS
var xmlns = "http://www.w3.org/2000/svg", xlinkns = "http://www.w3.org/1999/xlink", select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); } TweenMax.set('svg', { visibility: 'visible' }) TweenMax.set('#duplicateCamera', { transformOrigin:'50% 50%', alpha:0, scaleY:1 }) var tl = new TimelineMax({repeat:-1}).timeScale(2); tl.fromTo('#flashStar', 0.4, { rotation:90, scale:0.3, transformOrigin:'50% 50%' }, { rotation:0, scale:2 }) .to('#flash', 0.05,{ fill:'#ededed', repeat:1, yoyo:true },'-=0.4') .set('#flashStar',{ alpha:0 },'-=0.2') .to('#flashHalo1', 0.6, { attr:{ rx:17, ry:25 }, alpha:0, transformOrigin:'50% 50%' },'-=0.4') .to('#flashHalo2',0.4, { attr:{ rx:27, ry:35 }, alpha:0, transformOrigin:'50% 50%' },'-=0.6') .to('#mainFlash', 0.05,{ alpha:1, repeat:1, yoyo:true },'-=0.5') .fromTo('#photoStart', 1, { y:0, scaleY:0},{ scaleY:1.5, transformOrigin:'50% 0%', ease:Power4.easeIn }) .to('#photoStart', 0.5, { //delay:0.5, y:20, transformOrigin:'50% 50%' }) .set('#slotShadow', { alpha:0 }) .to('#photoStart', 1, { y:150, scale:2, morphSVG:{shape:'#photoEnd'}, ease:Expo.easeInOut }) .to('#photoContent', 3, { alpha:1, transformOrigin:'50% 150%' }) .from('#photoContent', 3, { fill:'#212121' },'-=3') .to('#duplicateCamera', 3, { alpha:1, ease:Power3.easeInOut },'-=3') .to('#endGroup', 4, { rotation:35, transformOrigin:'0% 0%', ease:Elastic.easeOut.config(1.2,0.47) }) .to('#endGroup', 2, { y:'+=3800', ease:Power1.easeIn },'-=3') //ScrubGSAPTimeline(tl)