Skip to content

Instantly share code, notes, and snippets.

/Chrome-Browser--.markdown

Created November 28, 2014 15:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/56972f3114f691c43eff to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/56972f3114f691c43eff to your computer and use it in GitHub Desktop.
Download ZIP
Chrome Browser
Raw
Chrome-Browser--.markdown
Raw
index.html
<h1>Scroll Down</h1>
<div id="browser">
<div class="border" id="border-top"></div>
<div class="border" id="border-right"></div>
<div class="border" id="border-bottom"></div>
<div class="border" id="border-left"></div>
<div id="tab-container">
<div id="tab"></div>
<div id="add"></div>
</div>
<div id="bar-container">
<div id="action">
<span class="icon ion-arrow-left-c"></span>
<span class="icon ion-arrow-right-c"></span>
<span class="icon ion-refresh"></span>
<span class="icon ion-home"></span>
</div>
<div id="location"></div>
<span class="icon ion-navicon-round" id="setting"></span>
</div>
</div>
Raw
script.js
/*
* Using wheelSpy.js <https://github.com/idiotWu/wheelSpy>
* and TweenLite.js <http://greensock.com/tweenlite>
* to create animation
*/
(function ($, TweenLite, wheelSpy) {
wheelSpy.config({
touchSpeed: 0.5
});
var tip = wheelSpy.add($('h1'));
var borderTop = wheelSpy.add($('#border-top'));
var borderRight = wheelSpy.add($('#border-right'));
var borderBottom = wheelSpy.add($('#border-bottom'));
var borderLeft = wheelSpy.add($('#border-left'));
var tabContainer = wheelSpy.add($('#tab-container'));
var barContainer = wheelSpy.add($('#bar-container'));
var iconsAreShowed = false;
tip.to(0, 30, {
top: '30%',
opacity: 0,
fontSize: 0
});
borderTop.to(0, 100, {
width: '100%'
});
borderBottom.to(0, 100, {
width: '100%'
});
borderRight.to(0, 100, {
height: '100%'
});
borderLeft.to(0, 100, {
height: '100%'
});
tabContainer.to(80, 180, {
width: '100%'
});
barContainer.to(80, 180, {
width: '100%'
}, function (percent) {
if (percent === 1) {
iconsAreShowed = iconsAreShowed || icons.show();
} else {
iconsAreShowed = iconsAreShowed && icons.hide();
}
});
var icons = (function () {
var tweens = [];
tweens.push($('#add'));
$('.icon').each(function () {
tweens.push($(this));
});
TweenLite.set(tweens, {
autoAlpha: 0,
scale: 0
});
var $location = $('#location');
TweenLite.set($location, {
autoAlpha: 0,
scaleX: 0
});
var show = function () {
TweenLite.killTweensOf([tweens, $location]);
tweens.forEach(function (ele, index) {
TweenLite.to(ele, 0.1, {
css: {
autoAlpha: 1,
scale: 1
},
delay: index * 0.08
});
});
TweenLite.to($location, 0.1, {
css: {
autoAlpha: 1,
scaleX: 1
},
delay: tweens.length / 10
});
return true;
};
var hide = function () {
TweenLite.killTweensOf([tweens, $location]);
TweenLite.to(tweens, 0.1, {
autoAlpha: 0,
scale: 0
});
TweenLite.to($location, 0.1, {
autoAlpha: 0,
scaleX: 0
});
return false;
};
return {
show: show,
hide: hide
};
})();
})(jQuery, TweenLite, wheelSpy);
Raw
style.scss
$borderWidth: 3px;
$borderColor: #fff;
$tabContainerHeight: 35px;
$tabHeight: $tabContainerHeight - 10;
$tabGap: 10px;
$radius: 5px;
%psudo {
content: '';
position: absolute;
bottom: 0;
height: $borderWidth;
background: $borderColor;
}
%tab {
position: absolute;
bottom: 0;
height: $tabHeight;
box-sizing: border-box;
border-top: $borderWidth solid $borderColor;
}
body {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #372d3b;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#browser {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
min-width: 300px;
transform: translate(-50%, -50%);
.border {
position: absolute;
background: $borderColor;
}
}
#border-top, #border-bottom {
height: $borderWidth;
/* width: 100%; */
width: 0;
}
#border-left, #border-right {
/* height: 100%; */
height: 0;
width: $borderWidth;
}
#border-top {
top: 0;
left: 0;
}
#border-right {
top: 0;
right: 0;
}
#border-bottom {
bottom: 0;
right: 0;
}
#border-left {
bottom: 0;
left: 0;
}
#tab-container {
position: absolute;
top: 0;
left: 0;
height: $tabContainerHeight;
/* width: 100%; */
width: 0;
overflow: hidden;
&:before {
@extend %psudo;
width: $tabGap;
}
&:after {
@extend %psudo;
width: calc(100% - 227px);
right: 0;
}
}
#tab {
@extend %tab;
left: 44px;
width: 180px;
border-right: $borderWidth solid $borderColor;
border-top-right-radius: $radius;
transform: skewX(22deg);
&:before {
content: '';
@extend %tab;
left: -30px;
width: 30px;
border-left: $borderWidth solid $borderColor;
border-top-left-radius: $radius;
transform: skewX(-42deg);
}
}
#add {
position: absolute;
left: 230px;
bottom: $tabHeight / 4;
width: 24px;
height: 15px;
box-sizing: border-box;
border: $borderWidth solid $borderColor;
border-radius: 3px;
transform: skewX(22deg);
}
#bar-container {
position: absolute;
top: $tabContainerHeight;
right: 0;
/* width: 100%; */
width: 0;
height: $tabContainerHeight;
border-bottom: 1px solid $borderColor;
}
#action {
position: absolute;
left: $tabGap;
color: $borderColor;
font-size: 22px;
letter-spacing: .2em;
line-height: $tabContainerHeight;
}
#location {
position: absolute;
left: 140px;
top: 50%;
margin-top: -$tabHeight / 2;
width: calc(100% - 180px);
height: $tabHeight;
opacity: 0;
border: $borderWidth solid $borderColor;
border-radius: $radius;
box-sizing: border-box;
}
#setting {
position: absolute;
right: 10px;
color: $borderColor;
font-size: 22px;
line-height: $tabContainerHeight;
}
.icon {
display: inline-block;
opacity: 0;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
font-size: 3em;
color: #fff;
white-space: nowrap;
text-transform: uppercase;
transform: translate(-50%, -50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment