Polaroid Snap

by Marc Malignan

HTML

<div class="polaroid">
  <div class="rainbow"></div>
  <div class="center">
    <div class="zoom">
      <div class="lens-socket">
        <div class="lens"></div>
      </div>
    </div>
    <div class="text top">POLAROID CAMERA + PRINTER</div>
  </div>
  <div class="logo">snap</div>
</div>

SCSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

$w = 500px;
$h = $w*.64;
$p_color: #0AADD6;
$p_highlight: #28E0E8;
$p_shadow: #0B99BD;

$bg: 'http://pisces.bbystatic.com/image2/BestBuy_US/images/products/4561/4561564_sd.jpg;canvasHeight=500;canvasWidth=500';

html, body {
  height: 100%;
}
body {
  margin: 0;
  background: url($bg) no-repeat center;
  overflow: hidden;
}

.polaroid,
.polaroid * {
  box-sizing: border-box;
}

.polaroid {
  position: absolute;
  top:50%; left:50%;
  margin: -($h/2)+23px 0 0 -$w/2;
  width:$w; height:$h;
  background: $p_color;
  border-radius: $w/10;
  box-shadow: 
    inset 0 0 $w/50 $w/100 $p_color,
    inset -$w/50 $w/50 $w/50 $w/200 $p_highlight,
    inset $w/50 -$w/50 $w/50 $w/200 $p_shadow;
  opacity: 1;
}
.polaroid:hover {
  opacity: 1;
}
.polaroid:before,
.polaroid .center {
  position: absolute;
  top:50%; left:50%;
  width:$w/2.75; height:$w/2.75;
  margin: -$w/5.5 0 0 -$w/5.5;
  border-radius: 50%;
}

.polaroid:before {
  content: '';
  box-shadow: 10px -10px 40px $p_highlight;
}

.polaroid .center {
  position: relative;
  padding: $w/20;
  border: $w/70 solid #2C2E2D;
  background: #373737;
}

.polaroid .text {
  position: absolute;
  top:25px; left:50%;
  height: calc(100% - 50px);
  width: 20px;
  margin-left: -10px;
  line-height: 10px;
  color: #E3E3E3;
  font-family: 'Lato', sans-serif;
  font-size: 6px;
  font-weight: 400;
}
.polaroid .text > div {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: rotate(-45deg);
}

.polaroid .zoom {
  width:100%; height:100%;
  padding: $w/25;
  border-radius: 50%;
  border: $w/50 solid #2A2A2A;
  background: repeating-radial-gradient(#222, transparent 5%);
  box-shadow:
    0 0 0 $w/250 #101113,
    inset 0 70px 10px -50px rgba(0,0,0,.2),
    inset 0 -70px 10px -50px rgba(0,0,0,.2);
}

.polaroid .lens-socket {
  padding: $w/65;
 ...

JavaScript

$('.polaroid .text').each(function() {
	var text = $(this).html();
  var split = text.split('');
  for(var i=0, ie=split.length; i<ie; i++) {
  	split[i] = (split[i]===' ') ? '&nbsp;' : split[i];
  	split[i] = '<div>' + split[i] + '</div>';
  }
  $(this).html(split.join(''));
  var spans = $(this).find('span');
  spans.each(function(index) {
  	$(this).css('transform', 'rotate('+((index-((spans.length-1)/2))*5)+'deg)');
  });
});

var t = $('.polaroid .text.top div');
t.each(function(i) {
  $(this).css('transform', 'rotate('+((i-((t.length-1)/2))*5)+'deg)');
});