Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Apr 25, 2017
Embed
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
twitter.com/lokesh
.ui
%button
Toggle
.box.fore-box
.img.fore
.box.bg-box
.img.bg
$('button').on('click', function() {
$('.box').toggleClass('on');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
$orig-width: 600px
$orig-height: 383px
$width: $orig-width * 1.25
$height: $orig-height * 1.25
*
box-sizing: border-box
.box
position: absolute
perspective: 400px
width: $width
height: $height
overflow: hidden
transform-style: preserve-3d
transition: perspective 5s
.fore-box
z-index: 10
.bg-box
z-index: 5
.img
position: absolute
top: 0
left: 0
width: $width
height: $height
transition: all 5s
.fore
z-index: 10
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9332/hills-foreground.png)
background-size: cover
.bg
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9332/hills-bg.jpg)
transform: translateZ(150px)
background-size: cover
.box.on
.fore
transform: translateZ(200px)
.bg
transform: translateZ(0)
filter: blur(4px)
-webkit-filter: blur(4px)
.ui
position: fixed
top: 10px
left: 10px
z-index: 100
button
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
&:hover
background: lighten(gold, 10%)
&:active
color: gold
background: black
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment