Skip to content

Instantly share code, notes, and snippets.

@JeongInyoung

JeongInyoung/Success-Popup.markdown

Created February 2, 2015 02:51
Show Gist options
  • Save JeongInyoung/c3420d50b12d81a7c54d to your computer and use it in GitHub Desktop.
Save JeongInyoung/c3420d50b12d81a7c54d to your computer and use it in GitHub Desktop.
Download ZIP
Success Popup
Raw
index.haml
// Tried to mimic https://dribbble.com/shots/1523277-Success-Popup-for-Handybook-New-App-GIF
.b
.bb
%button#go
GO
.message
.check
✔
%p
Success
%p
Check your email for a booking confirmation. We'll see you soon!
%button#ok
OK
Raw
script.js
$('#go').click(function(){go(50)});
$('#ok').click(function(){go(500)});
setTimeout(function(){go(50)},700);
setTimeout(function(){go(500)},2000);
function go(nr) {
$('.bb').fadeToggle(200);
$('.message').toggleClass('comein');
$('.check').toggleClass('scaledown');
$('#go').fadeToggle(nr);
}
Raw
style.sass
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400)
$color: #71c341
$txtclr: #2c2928
body, html
height: 100%
font-size: 20px
font-family: Source Sans Pro
.b, .bb
position: absolute
width: 100%
height: 100%
background: url('http://i.imgur.com/kje4L5j.jpg')
attachment: fixed
size: cover
position: center
.bb
background: url('http://i.imgur.com/bDBs0et.jpg')
attachment: fixed
size: cover
position: center
display: none
#go
position: absolute
top: 30px
left: 50%
transform: translate(-50%, 0%)
color: white
border: 0
background: $color
width: 100px
height: 30px
border-radius: 6px
font-size: 1rem
transition: background 0.2s ease
outline: none
&:hover
background: lighten($color, 10)
&:active
background: darken($color, 10)
.message
position: absolute
top: -200px
left: 50%
transform: translate(-50%, 0%)
width: 300px
background: white
border-radius: 8px
padding: 30px
text-align: center
font-weight: 300
color: $txtclr
opacity: 0
transition: top 0.3s cubic-bezier(.31,.25,.50,1.50), opacity 0.2s ease-in-out
& .check
position: absolute
top: 0
left: 50%
transform: translate(-50%, -50%) scale(4)
width: 120px
height: 110px
background: $color
color: white
font-size: 3.8rem
padding-top: 10px
border-radius: 50%
opacity: 0
transition: transform 0.2s 0.25s cubic-bezier(.31,.25,.50,1.50), opacity 0.1s 0.25s ease-in-out
& .scaledown
transform: translate(-50%, -50%) scale(1)
opacity: 1
& p
font-size: 1.1rem
margin: 25px 0px
padding: 0
& p:nth-child(2)
font-size: 2.3rem
margin: 40px 0px 0px 0px
& #ok
position: relative
color: white
border: 0
background: $color
width: 100%
height: 50px
border-radius: 6px
font-size: 1.2rem
transition: background 0.2s ease
outline: none
&:hover
background: lighten($color, 10)
&:active
background: darken($color, 10)
.comein
top: 150px
opacity: 1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment