Camera Archives - Lena Design

To learn how to create the CSS & JavaScript Polaroid/ Camera Animation follow the steps below and watch the video tutorial.

Demo:

Press the button to take a photo:

*to see the animation on the website click here.

Step1.

Add HTML

  <div class="polaroid-camera">
  <button id="button"></button>
  <div id="circle"></div>
  <div class="lens">
    <div class="reflection"></div>
  </div>
  <div class="flash"></div>
  <div class="stripes"></div>
  <div class="bottom">
    <div class="bottom-front"></div>
  </div>
  <div class="slot"></div>
  <div class="shadow"></div>
  <div id="photo" class="photo">
    <div class="house">
      <div class="windows"></div>
    </div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #04a5b2;
  overflow: hidden;
}

.polaroid-camera {
  position: relative;
  top:-50px;
}

Style the camera:

.polaroid-camera:before, .polaroid-camera:after {
  content:"";
  position: absolute;
  transform: translate(-50%,-50%);
  left:0;
  top:50%;
  background-color: #faedcd;
  width:300px;
}

.polaroid-camera:before {
  border-radius: 30px 30px 0 0;
  box-shadow: inset 0 45px #fefae0;
  height:150px;
}

.polaroid-camera:after {
  height:40px;
  top:-10px;
}

button {
  position: absolute;
  width:50px;
  height:20px;
  transition: .2s;
  border-radius: 10px 10px 0 0;
  background-color: #003049;
  border: none;
  top:-95px;
  left:50px;
  transform-origin: bottom;
  cursor: pointer;
  z-index:125;
}

button:active {
  transform: scaleY(.5);
}

.lens {
  position: absolute;
  border-radius:50%;
  border:5px solid #333;
  background-color: white;
  width:115px;
  height:115px;
  z-index:1;
  transform: translate(-50%,-50%);
  top:50%;
  left:0;
}

.lens:before, .lens:after {
  content:"";
  position: absolute;
  border-radius:50%;
  transform: translate(-50%,-50%);
  top:50%;
  left:50%;
}

.lens:before {
  border: 10px solid #333;
  width:90px;
  height:90px;
  background-color: #006494;
}

.lens:after {
  border:10px solid #0582ca;
  width: 40px;
  height:40px;
  background-color: #003554;
}

.reflection, .reflection:before, .reflection:after {
  position: absolute;
  border-radius:50%;
}

.reflection {
  background-color: rgba(255,255,255,.8);
  width: 15px;
  height:15px;
  top:50px;
  left:60px;
  z-index:2;
}

.reflection:before {
  content:"";
  width:115px;
  height:115px;
  background-color: rgba(255,255,255,.1);
  top:-50px;
  left:-60px;
}

.reflection:after {
  content:"";
  width:20px;
  height:20px;
  background-color: rgba(255,255,255,.4);
  top:35px;
  left:-30px;
  box-shadow: 40px -73px rgba(255,255,255,.4);
}

.flash {
  position: absolute;
  width:40px;
  height:40px;
  background-color: #333;
  border-radius: 5px;
  z-index:4;
  left:85px;
  top:-40px;
}

.flash:before, .flash:after {
  content:"";
  position: absolute;
  border-radius:50%;
  transform: translate(-50%,-50%);
  top:50%;
  left:50%;
}

.flash:before {
  border: 5px solid #006494;
  width:20px;
  height:20px;
  background-color: #0582ca;
}

.flash:after {
  background-color: #003554;
  width:8px;
  height:8px;
  box-shadow: 8px -5px rgba(255,255,255,.3);
}

.stripes {
  position: absolute;
  width:14.5px;
  height:20px;
  background-color: #e02846;
  top:55px;
  box-shadow: -14.5px 0 #568760;
}

.stripes:before, .stripes:after {
  content:"";
  position: absolute;
  border-radius: 50%;
}

.stripes:before {
  width: 30px;
  height:30px;
  background-color: #333;
  left:50px;
  top:-20px;
}

.stripes:after {
  border:5px solid #ba181b;
  background-color: #a4161a;
  left:-130px;
  top:-40px;
  width: 30px;
  height: 30px;
}

.bottom {
  position: absolute;
  perspective: 250px;
  z-index:10;
}

.bottom:before, .bottom:after {
  content:"";
  position: absolute;
  height:30px;
  transform: rotateX(45deg);
  top:73px;
}

.bottom:before {
  background-color: #e0d0a6;
  width:314px;
  left:-157px;
}

.bottom:after {
  width: 15px;
  background-color: #a71e34;
  box-shadow: -15px 0 #3a5a40;
}

.bottom-front {
  position: absolute;
  background-color: #ebd9ae;
  width:328px;
  height:15px;
  top:102px;
  left:-164px;
}

.bottom-front:before {
  content:"";
  position: absolute;
  width: 15.5px;
  height: 15px;
  left:164px;
  background-color: #e02846;
  box-shadow: -15.5px 0 #568760;
}

.bottom-front:after {
  content:"";
  position: absolute;
  width:328px;
  height:50px;
  border-radius:0 0 20px 20px;
  background-color: #540b0e;
  top:15px;
}

.slot {
  position: absolute;
  background-color: #220901;
  width: 270px;
  transform: translate(-50%,-50%);
  border-radius: 10px 10px 0 0;
  height:15px;
  z-index:11;
  top:159px;
}

.shadow {
  position: absolute;
  width: 400px;
  height:70px;
  background-color: rgba(0,0,0,.3);
  border-radius:50%;
  top:120px;
  left:-200px;
  z-index:-4;
}

Style the photo:

.photo {
  z-index:-1;
  transform: translate(-50%,-50%);
  top:50px;
  position: absolute;
  border-style: solid;
  border-color: white;
  width:170px;
  height: 160px;
  border-top-width: 10px;
  border-bottom-width: 35px;
  border-left-width:10px;
  border-right-width:10px;
  background-color: #fbb13c;
  overflow: hidden;
}

.photo:before, .photo:after {
  content:"";
  position: absolute;
  border-radius: 50%;
}

.photo:before {
  background-color: #faf0ca;
  width:25px;
  height: 25px;
  top:20px;
  left: 120px;
}

.photo:after {
  background-color: #cc5803;
  width:35px;
  height: 35px;
  top:70px;
  left:30px;
  box-shadow: 20px 20px #cc5803, -20px 25px #cc5803, 0 30px #cc5803, -40px 70px #cc5803;
}

.house {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #faf0ca;
  box-shadow: 40px 0 #f2a65a, 60px 0 #f2a65a;
  top:125px;
  left:70px;
  z-index:101;
}

.house:before {
  content:"";
  position: absolute;
  border-bottom: 25px solid #031926;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  width:0;
  height:0;
  top:-25px;
}

.house:after {
  content:"";
  position: absolute;
  background-color: #cc5803;
  width:60px;
  height: 25px;
  transform: skew(40deg);
  left:30px;
  top:-25px;
}

.windows {
  position: absolute;
  width:15px;
  height:25px;
  border-radius: 10px 10px 0 0;
  background-color: #772f1a;
  top:10px;
  left:10px;
}

.windows:before {
  content:"";
  position: absolute;
  border-radius: 10px 10px 0 0;
  width: 10px;
  height:15px;
  background-color: #031926;
  left:45px;
  box-shadow: 25px 0 #031926;
}

.windows:after {
  content:"";
  position: absolute;
  width:5px;
  height: 60px;
  background-color: #031926;
  left:-35px;
  top:-35px;
  border-radius:10px;
}

Add flash animation (the animation will work after adding JavaScript):

.flash-animation {
  animation: flash-animation .2s ease;
}

#circle {
  position: absolute;
  background-color: rgba(255,255,255,.4);
  width: 100px;
  height:100px;
  border-radius:100%;
  z-index:5;
  top:-70px;
  left:55px;
  opacity:0;
}

Add animation for a photo (the animation will work after adding JavaScript):

@keyframes eject-photo {
  0% {transform: translateY(0);left:-95px;}
  100% {transform: translateY(115px); left:-95px;}
}

.eject-photo {
  animation: eject-photo .6s ease forwards .3s;
}

Step3.

Add JavaScript

let light = document.getElementById('circle');

document.getElementById('button').addEventListener('click', () => {
  light.classList.remove('flash-animation');
  setTimeout(function(){
  light.classList.add('flash-animation');
  },500);
});

let eject = document.getElementById('photo');

document.getElementById('button').addEventListener('click', () => {
  eject.classList.remove('eject-photo');
  setTimeout(function(){
  eject.classList.add('eject-photo');
  },500);
});

Watch also the video tutorial: