Polaroid Snap Realistic
How do I make an polaroid snap realistic?
What is a polaroid snap realistic? How do you make a polaroid snap realistic? This script and codes were developed by Keyon on 10 January 2023, Tuesday.
Polaroid Snap Realistic Previews
Polaroid Snap Realistic - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Polaroid Snap Realistic</title> <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="polaroidbody"> <div class="lights1"></div> <div class="lights2"></div> <div class="rainbow"> <div class="pink"></div> <div class="amber"></div> <div class="yellow1"></div> <div class="yellow2"></div> <div class="green"></div> <div class="blue"></div> </div> <div class="lensoutline"> <div class="lens-layer1"> <div class="lens-layer2outline"> <p class="polaroid-lenstext">POLAROID CAMERA + PRINTER</p> <div class="lens-layer2"> <div class="lens-layer2filler1"></div> <div class="lens-layer2filler2"></div> <div class="lens-layer2filler3"></div> <div class="lens-layer2filler4"></div> <div class="lens-layer2filler5"></div> <div class="lens-layer3outline"></div> <div class="lens-layer3"> <div class="lens-glass"></div> <div class="lens-closed"></div> </div> </div> </div> </div> </div> <div class="flash-border"> <div class="flash-filler1"></div> <div class="flash-filler2"></div> <div class="flash-filler3"></div> <div class="flash-filler4"></div> <div class="flash"></div> </div> <div class="viewfinder-body"> <div class="viewfinder-border1"></div> <div class="viewfinder-border2"></div> <div class="viewfinder"></div> </div> <div class="shotbutton"></div>
</div>
<div class="areashot bot_1"> <div id="shot" class="beforepullout startingshotposition"></div>
</div>
<a class="backbutton invisible"><span>─</span>Put it away and take a new shot<span>─</span></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script>
<script src='https://codepen.io/Keyon/full/fa626e28bc29470f6cfe31d64a76a79d/'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/531144/jquery.lettering-0.6.1.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Polaroid Snap Realistic - Script Codes CSS Codes
body { margin: 0px; background: #ECEFF1;
}
.polaroidbody { position: absolute; right: calc(50vw - 275px); top: calc(50vh - 175px); width: 575px; height: 345px; background: #edeef0; /*border-radius: 45px 0px 0px 45px;*/ border-radius: 45px; box-shadow: inset 15px -25px 55px -10px rgba(0,0,0,0.25), inset -15px 15px 40px -7px rgba(255,255,255,0.70), inset -15px 0px 10px -11px rgba(0,0,0,0.30);
}
.lensoutline { position: absolute; /*background: #393939;*/ background: #212121; width: 190px; height: 190px; border-radius: 100%; margin-left: 200px; top: calc(50% - 95px); box-shadow: -7px 7px 50px -2px rgba(0,0,0,0.60), 9px -9px 20px 7px rgba(255,255,255,0.7);
}
.lens-layer1{ position: absolute; /*background: #393939;*/ background: -webkit-linear-gradient(120deg, #3c3c3c, #454648, #3b3b3b); background: linear-gradient(-30deg, #3c3c3c, #454648, #3b3b3b); width: 175px; height: 175px; border-radius: 100%; margin-left: 7.5px; top: 7.5px;
}
.lens-layer2outline{ position: absolute; background: #2c2c2c; width: 120px; height: 120px; border-radius: 100%; margin-left: 27.5px; top: 27.5px;
}
.lens-layer2filler1{ position: absolute; background: #2a2a2a; width: 92px; height: 92px; border-radius: 100%; margin-left: 4px; top: 4px; border: 1px solid #353535;
}
.lens-layer2filler2{ position: absolute; background: #2b2b2b; width: 84px; height: 84px; border-radius: 100%; margin-left: 8px; top: 8px; border: 1px solid #353535;
}
.lens-layer2filler3{ position: absolute; background: #2a2a2a; width: 76px; height: 76px; border-radius: 100%; margin-left:12px; top: 12px; border: 1px solid #353535;
}
.lens-layer2filler4{ position: absolute; background: #2b2b2b; width: 68px; height: 68px; border-radius: 100%; margin-left: 16px; top: 16px; border: 1px solid #353535;
}
.lens-layer2filler5{ position: absolute; background: #2a2a2a; width: 60px; height: 60px; border-radius: 100%; margin-left: 20px; top: 20px; border: 1px solid #353535;
}
.lens-layer2{ position: absolute; /*background: #2a2a2a;*/ background: #313131; width: 100px; height: 100px; border-radius: 100%; margin-left: 10px; top: 10px;
}
.polaroid-lenstext{ position: absolute; color: #fff; font-size: 4.5px; font-family: Verdana; margin-left: 40px; margin-top: 5px; -webkit-transform: rotate(-15deg); transform: rotate(-15deg);
}
.polaroid-lenstext span { position: absolute; -webkit-transform-origin: bottom center; transform-origin: bottom center; height: 55px; width: 10px;
}
.char1 { -webkit-transform: rotate(-41deg); transform: rotate(-41deg); }/* P */
.char2 { -webkit-transform: rotate(-37deg); transform: rotate(-37deg); }/* O */
.char3 { -webkit-transform: rotate(-31deg); transform: rotate(-31deg); }/* L */
.char4 { -webkit-transform: rotate(-26deg); transform: rotate(-26deg); }/* A */
.char5 { -webkit-transform: rotate(-21deg); transform: rotate(-21deg); }/* R */
.char6 { -webkit-transform: rotate(-16deg); transform: rotate(-16deg); }/* O */
.char7 { -webkit-transform: rotate(-11deg); transform: rotate(-11deg); }/* I */
.char8 { -webkit-transform: rotate(-7.5deg); transform: rotate(-7.5deg); }/* D */
.char9 { -webkit-transform: rotate(0deg); transform: rotate(0deg); }/* */
.char10 { -webkit-transform: rotate(6deg); transform: rotate(6deg); }/* C */
.char11 { -webkit-transform: rotate(11deg); transform: rotate(11deg); }/* A */
.char12 { -webkit-transform: rotate(16deg); transform: rotate(16deg); }/* M */
.char13 { -webkit-transform: rotate(22deg); transform: rotate(22deg); }/* E */
.char14 { -webkit-transform: rotate(27deg); transform: rotate(27deg); }/* R */
.char15 { -webkit-transform: rotate(32deg); transform: rotate(32deg); }/* A */
.char16 { -webkit-transform: rotate(35deg); transform: rotate(35deg); }/* */
.char17 { -webkit-transform: rotate(40deg); transform: rotate(40deg); }/* + */
.char18 { -webkit-transform: rotate(46deg); transform: rotate(46deg); }/* */
.char19 { -webkit-transform: rotate(48deg); transform: rotate(48deg); }/* P */
.char20 { -webkit-transform: rotate(53deg); transform: rotate(53deg); }/* R */
.char21 { -webkit-transform: rotate(59deg); transform: rotate(59deg); }/* I */
.char22 { -webkit-transform: rotate(63deg); transform: rotate(63deg); }/* N */
.char23 { -webkit-transform: rotate(70deg); transform: rotate(70deg); }/* T */
.char24 { -webkit-transform: rotate(74.5deg); transform: rotate(74.5deg); }/* E */
.char25 { -webkit-transform: rotate(80deg); transform: rotate(80deg); }/* R */
.lens-layer3outline { position: absolute; background: #414244; width: 50px; height: 50px; border-radius: 100%; margin-left: 25px; margin-top: 25px; opacity: 0.35;
}
.lens-layer3 { position: absolute; background: #0d0d0d; width: 37px; height: 37px; border-radius: 100%; margin-left: 31.3px; margin-top: 31.3px;
}
.lens-glass { position: absolute; /*background: #3F51B5;*/ background: #343539; width: 25px; height: 25px; border-radius: 100%; margin-left:6px; margin-top: 6px; /*opacity: 0.2;*/
}
.glasseffect { position: absolute; background: #607D8B; width: 15px; height: 20px; border-radius: 100%; margin-left:17px; margin-top: 7px; opacity: 0.3; -webkit-filter: blur(3px); -moz-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px);
}
.lens-closed { position: absolute; width: 1px; height: 25px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background: #0d0d0d; left: 18px; top: 6px;
}
.flash { position: absolute; width: 25px; height: 25px; border-radius: 100%; /*background: #faf7e0;*/ background: -webkit-radial-gradient(#FFFDE7, #d7d7ce, #8c8c8c); background: radial-gradient(#FFFDE7, #d7d7ce, #8c8c8c); top: 2px; left: 2px;
}
.flash-border { position: absolute; width: 29px; height: 29px; border-radius: 100%; background: -webkit-linear-gradient(120deg, #868686, #d6d6d6); background: linear-gradient(-30deg, #868686, #d6d6d6); top: 50px; left: 147px;
}
.viewfinder-body { position: absolute; width: 145px; height: 55px; background: #272727; border-width: 1px 1px 0px 1px; border-style: solid; border-color: #212121; border-radius: 13px 13px 5px 5px; top: -50px; left: 220px;
}
.viewfinder-border1 { position: absolute; background: #313131; width: 60px; height: 45px; border-radius: 10px 10px 5px 5px; left: 42.4px; top: 5.2px; border: 1px solid #424242;
}
.viewfinder-border2 { position: absolute; background: #272727; width: 57px; height: 43px; border-radius: 10px 10px 5px 5px; left: 44px; top: 7px; border: 1px solid #424242;
}
.viewfinder { position: absolute; background: #eceff1; width: 50px; height: 37px; border-radius: 5px; left: 48.3px; top: 12px;
}
.shotbutton { position: absolute; /*background: #EF5350;*/ background: -webkit-linear-gradient(bottom, #EF5350, #E57373); background: linear-gradient(0deg, #EF5350, #E57373); width: 50px; height:7px; border-radius: 100%; left: 55px; top: -5px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer;
}
.shotbutton:active { height: 5px; top: -3px;
}
.rainbow { position: absolute; width: 274px; height: 33px; left: 300px; top: 160px;
}
.pink { background: #df118f; height: 5px; border-radius: 0px 4px 0px 0px;
}
.amber { background: #e39d25; height: 5px;
}
.yellow1 { background: #ffd30c; height: 5px;
}
.yellow2 { background: #e9f178; height: 5px;
}
.green { background: #76c045; height: 5px;
}
.blue { background: #08a1e2; height: 5px; border-radius: 0px 0px 4px 0px;
}
/*
.lights1 { background: transparent; position: absolute; right: 40px; width: 50px; height: 300px; border-radius: 0px 45px 0px 0px; z-index: 999; box-shadow: inset -15px 15px 40px -5px rgba(255,255,255,0.70);
}
.lights2 { background: transparent; position: absolute; right: -10px; top: 10px; width: 50px; height: 275px; border-radius: 0px 0px 0px 0px; z-index: 999; box-shadow: inset 15px 0px 40px -5px rgba(255,255,255,0.70);
}*/
.lights1 { position: absolute; width: 12px; height: 300px; background: #fff; right: 13px; top: 15px; z-index: 998; -webkit-filter: blur(7px); filter: blur(7px); opacity: 0.9;
}
.flash-filler1 { background: transparent; position: absolute; width: 18.5px; height: 18.5px; z-index: 998; border-radius: 100%; top: 4px; left: 4px; border: 1px solid black; opacity: 0.10;
}
.flash-filler2 { background: transparent; position: absolute; width: 15px; height: 15px; z-index: 998; border-radius: 100%; top: 5.8px; left: 5.8px; border: 1px solid black; opacity: 0.10;
}
.flash-filler3 { background: transparent; position: absolute; width: 11px; height: 11px; z-index: 998; border-radius: 100%; top: 7.7px; left: 7.7px; border: 1px solid black; opacity: 0.10;
}
.flash-filler4 { background: transparent; position: absolute; width: 7px; height: 7px; z-index: 998; border-radius: 100%; top: 9.6px; left: 9.6px; border: 1px solid black; opacity: 0.10;
}
#shot { position: fixed; width: 370px; height: 225px; background: url(https://images.pexels.com/photos/87293/pexels-photo-87293.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); background-size: cover; background-position: center; border-radius: 1px;
}
.beforepullout { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer;
}
.beforepullout:hover { -webkit-transform: translate(calc(50vw - 470px))!important; transform: translate(calc(50vw - 470px))!important;
}
.startingshotposition { top: calc(50vh - 112.5px); -webkit-transform: translate(calc(50vw - 465px)); transform: translate(calc(50vw - 465px));
}
.afterclickshotposition { top: calc(50vh - 112.5px); -webkit-transform: rotateY(0deg) scale(1.05) translate(calc(50vw - 225px)); transform: rotateY(0deg) scale(1.05) translate(calc(50vw - 225px));
}
.animationsh { top: calc(50vh - 112.5px); width: 370px; height: 225px; -webkit-animation: shotanimation 3s ease; animation: shotanimation 3s ease;
}
/*
@-webkit-keyframes shotanimatiom { 0% {left: calc(50vw - 470px); transform: rotateY(0deg)} 30% {left: calc(50vw - 725px); transform: rotateY(-15deg)} 100% {left: calc(50vw - 185px); transform: rotateY(0deg) scale(1.05)}
}*/
@-webkit-keyframes shotanimation { 0% {-webkit-transform: rotateY(0deg) translate(calc(50vw - 470px));transform: rotateY(0deg) translate(calc(50vw - 470px))} 30% {-webkit-transform: rotateY(-15deg) scale(0.9) translate(calc(50vw - 700px));transform: rotateY(-15deg) scale(0.9) translate(calc(50vw - 700px))} 100% {-webkit-transform: rotateY(0deg) scale(1.05) translate(calc(50vw - 225px));transform: rotateY(0deg) scale(1.05) translate(calc(50vw - 225px))}
}
@-webkit-keyframes backtothecamera { 0% {-webkit-transform: rotateY(0deg) scale(1.05) translate(calc(50vw - 225px));transform: rotateY(0deg) scale(1.05) translate(calc(50vw - 225px)); opacity: 1;} 37% {-webkit-transform: rotateY(0deg) scale(1.05) translate(calc(50vw - 225px));transform: rotateY(0deg) scale(1.05) translate(calc(50vw - 225px)); opacity: 0;}
/* 31% {transform: rotateY(0deg) scale(1) translate(calc(50vw - 230px)); opacity: 1;} 100% {transform: rotateY(0deg) translate(calc(50vw - 470px))}*/
}
.returncamera { top: calc(50vh - 112.5px); -webkit-animation: backtothecamera 3s ease; animation: backtothecamera 3s ease;
}
.afterpullout { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
#dragarea { cursor: -webkit-grab; cursor: grab; width: 370px; height: 225px;
}
.areashot { width: 100vw; height: 100vh; position: fixed; -webkit-perspective: 900px; perspective: 900px; z-index: 999;
}
.bot_1 { z-index: -1 !important;
}
.invisible { opacity: 0; pointer-events: none;
}
.backbutton { font-family: PT Sans; font-size: 19px; position: absolute; bottom: calc(50vh - 225px); width: 100vw; z-index:999; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; text-align: center;
}
.backbutton:hover { letter-spacing: 1.2px;
}
.backbutton span { color: transparent; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.backbutton:hover span { color: #000;
}Polaroid Snap Realistic - Script Codes JS Codes
//Lettering.js
$(".polaroid-lenstext").lettering();
$('.polaroid-lenstext2').lettering();
//Shot... things
$('#shot').click(function(){ $('#shot').removeClass('returncamera'); $('#shot').addClass('animationsh'); $('#shot').addClass('afterclickshotposition'); $('#shot').removeClass('beforepullout'); $('#shot').removeClass('startingposition'); $('#shot').addClass('afterpullout'); $('.areashot').delay(1000).queue(function() { $('a.backbutton').removeClass('invisible'); $(".areashot").removeClass('bot_1').dequeue(); });
});
$('.backbutton').click(function(){ $('.areashot').delay(1000).queue(function() { $('a.backbutton').addClass('invisible'); $(".areashot").addClass('bot_1').dequeue(); }); $('#shot').addClass('returncamera'); $('#shot').removeClass('animationsh'); $('#shot').removeClass('afterclickshotposition'); $('#shot').addClass('beforepullout'); $('#shot').addClass('startingposition'); $('#shot').removeClass('afterpullout');
});
| Developer | Keyon |
| Username | Keyon |
| Uploaded | January 10, 2023 |
| Rating | 4 |
| Size | 4,845 Kb |
| Views | 6,072 |
Do you need developer help for Polaroid Snap Realistic?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Keyon (Keyon) Script Codes
| Name | Size |
| Play of the Game | 2,781 Kb |
| Zelda Breath of the Wild Cartridge | 3,561 Kb |
| Profile Box | 3,090 Kb |
| Material Vintage - Modal | 3,624 Kb |
| Heart Beat | 3,505 Kb |
| Presentation - Material Design and Parallax | 6,536 Kb |
| Gooey mouse follow | 2,876 Kb |
| MEMOREYES | 2,914 Kb |
| Notepad Project Neon | 5,072 Kb |
| Marco, the angry rectangle | 2,672 Kb |
Create amazing art & images with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Vue Transition | Chenming142 | 4,561 Kb |
| Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
| SVG Hover Animations | Kjbrum | 10,557 Kb |
| A Pen by Kenny Mark | Kennymark | 5,574 Kb |
| CSS Gem Badge | Orchard | 3,335 Kb |
| Svg animation draw | SzymonDziewonski | 5,545 Kb |
| A Pen by Eka Risyana | Risyana | 3,705 Kb |
| Simple Responsive Text | Fbrz | 2,282 Kb |
| Weather App | OmranAbazid | 2,596 Kb |
| A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!