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)
