Skip to content

Instantly share code, notes, and snippets.

Created April 25, 2017 23:55
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Vertigo Effect
Choreographs two layers moving closer and further from the 'camera'. Hitchcock would have dollied and zoomed, we just translateZ.
Lokesh Dhakar
$('button').on('click', function() {
<script src=""></script>
$orig-width: 600px
$orig-height: 383px
$width: $orig-width * 1.25
$height: $orig-height * 1.25
box-sizing: border-box
position: absolute
perspective: 400px
width: $width
height: $height
overflow: hidden
transform-style: preserve-3d
transition: perspective 5s
z-index: 10
z-index: 5
position: absolute
top: 0
left: 0
width: $width
height: $height
transition: all 5s
z-index: 10
background-image: url(
background-size: cover
background-image: url(
transform: translateZ(150px)
background-size: cover
transform: translateZ(200px)
transform: translateZ(0)
filter: blur(4px)
-webkit-filter: blur(4px)
position: fixed
top: 10px
left: 10px
z-index: 100
width: 84px
padding: 10px
color: black
font-weight: bold
background: gold
border: 2px solid black
text-transform: uppercase
cursor: pointer
text-align: center
outline: none
border-radius: 4px
background: lighten(gold, 10%)
color: gold
background: black
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment