Classy Website Showcase

Classy-Website-Showcase.markdown

Classy Website Showcase

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.

License.

index.jade

.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")

script.coffee

# 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'

style.scss

$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;
	}
}