Chrome Browser

Chrome-Browser--.markdown

Chrome Browser

Animation created with wheelSpy.js https://github.com/idiotWu/wheelSpy

Forked from Dolphin Wood's Pen Chrome Browser .

A Pen by Rolandas on CodePen.

License.

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>

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);

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%);
}