A little showcase for any website provided in the iFrame URL. Inspired by https://dribbble.com/shots/986009-Flat-Vector-Chrome-Frame
Updated to be grabbable.
A Pen by Chris Deacy on CodePen.
A little showcase for any website provided in the iFrame URL. Inspired by https://dribbble.com/shots/986009-Flat-Vector-Chrome-Frame
Updated to be grabbable.
A Pen by Chris Deacy on CodePen.
.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; | |
} | |
} |