Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.browser.loading
.status-bar
.buttons
.tab-bar
.window
.loader
//- Screencap of http://deacy.io
img#scroll-img.scroll-img(src="//s3-us-west-2.amazonaws.com/s.cdpn.io/216995/portfolio-screencap.jpg",draggable="false")
# global variables
curDown = false
curY = 0
curTop = 0
bottom = 0
scrollSpeed = 5000
$(window).bind 'load', ->
$('.browser').removeClass 'loading'
# grab image height
bottom = $('#scroll-img').height() - $('.browser .window').height()
# scroll
$('#scroll-img').animate {'top': -bottom}, scrollSpeed, ->
$('#scroll-img').animate {'top': 0}, scrollSpeed
$(document).ready ->
$('#scroll-img').mousedown (e) ->
$(@).stop()
curDown = true
curTop = parseInt $(@).css 'top'
curY = e.pageY
$(window).mouseup (e) ->
curDown = false
curTop = parseInt $('#scroll-img').css 'top'
$('.browser .window').removeClass 'grabbed'
$(window).on 'mousemove', (e) ->
if curDown
newTop = (curY - e.pageY) - curTop
if newTop >= 0 and newTop <= bottom
$('.browser .window').addClass 'grabbed'
$('#scroll-img').css
'top': -newTop+'px'
$color: #2c3e50;
* {
margin: 0;
padding: 0;
color: inherit;
box-sizing: inherit;
&:focus {
outline: none;
}
}
html {
box-sizing: border-box;
}
body {
background-color: #ecf0f1;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.browser {
background-color: #f1f1f1;
width: 690px;
height: 480px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
opacity: .999;
border-radius: 5px;
box-shadow: -10px 10px 38px 0 rgba(1,1,1,.53);
.status-bar {
background-color: #ccc;
width: 100%;
height: 20px;
position: relative;
z-index: 10;
.buttons {
background-color: #df7065;
width: 9px;
height: 9px;
margin-top: -4px;
position: absolute;
top: 50%;
left: 7px;
border-radius: 50%;
&:before,
&:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
border-radius: 50%;
}
&:before {
background-color: #e6c646;
left: 13px;
}
&:after {
background-color: #5bcc8b;
left: 26px;
}
}
}
.tab-bar {
background-color: #e6e6e6;
width: 100%;
height: 18px;
position: relative;
z-index: 10;
&:before {
content: '';
width: 82px;
position: absolute;
bottom: 100%;
left: 55px;
border-width: 0 5px 14px 5px;
border-style: solid;
border-color: transparent;
border-bottom-color: #e6e6e6;
}
}
.window {
width: 100%;
height: 442px;
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/grab.png), auto;
overflow: hidden;
position: relative;
.loader {
display: none;
background-color: #f1f1f1;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
&:before {
content: '';
width: 20px;
height: 20px;
margin: auto;
border: 5px dashed $color;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
animation: spin 1s linear infinite;
}
}
.scroll-img {
position: absolute;
top: 0;
left: 0;
}
&.grabbed {
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/grabbed.png), auto;
}
}
&.loading .window .loader {
display: block;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment