cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- LOAD ANGULAR -->


<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<!--<p>官酩杰前辈调试了上千次,这只是我的第<span class="num">9</span>次</p>-->
<div ng-app="myApp" ng-controller="myController">
  <div id="smartisan" class="container">
    <div class="header">
      <div class="header-box box-rotate box-rotate-up">
        <div class="front">
          <img ng-src="{{srcRoot}}/{{oldColor}}/header.png" />
        </div>
        <div class="bottom">
          <img ng-src="{{srcRoot}}/{{newColor}}/header.png" />
        </div>
        <div class="back">
          <img class="shadow" ng-src="{{srcRoot}}/{{oldColor}}/header.png" />
        </div>
        <div class="top">
        </div>
      </div>
    </div>

    <div class="wrap wrap-defaults">


      <div class="box box-rotate box-rotate-right" ng-repeat="index in indexList">
        <div class="front">
          <img ng-src="{{srcRoot}}/{{oldColor}}/{{index}}.png" />
        </div>
        <div class="right">
        </div>
        <div class="back">
          <img class="shadow" ng-src="{{srcRoot}}/{{oldColor}}/{{index}}.png" />
        </div>
        <div class="left">
          <img ng-src="{{srcRoot}}/{{newColor}}/{{index}}.png" />
        </div>
      </div>

    </div>


    <div class="footer">
      <div class="footer-box box-rotate box-rotate-down">
        <div class="front">
          <img ng-src="{{srcRoot}}/{{oldColor}}/footer.png" />
        </div>
        <div class="bottom">
        </div>
        <div class="back">
          <img class="shadow" ng-src="{{srcRoot}}/{{oldColor}}/footer.png" />
        </div>
        <div class="top">
          <img ng-src="{{srcRoot}}/{{newColor}}/footer.png" />
        </div>
      </div>
    </div>

  </div>

  <ul class="color-switch">
    <li class="color-{{color}}" ng-repeat="color in colorList" ng-class="{active:newColor==color}" ng-click="changeColor(color)"><em></em></li>
  </ul>

</div>
            
          
!
            
              @import "compass/css3";
$boxsize: 72px * 0.8;
$boxsizeH: 94px * 0.8;
$containerWidth: $boxsize*3;
$containerHeight: ($boxsize*3/13.5 + $boxsizeH*4);
$backgroundWidth: $containerWidth*1.1475;
$backgroundHeight: $containerHeight*1.3;
$rotateDegree0: 90deg;
$rotateDegree1: 105deg;
$rotateDegree2: 100deg;
$rotateDegree3: 95deg;

$animateInterval1: 45/100;
$animateInterval2: 50/100;
$animateInterval3: 55/100;

$animateIntervalUp: $animateInterval1;
$animateIntervalDown: $animateInterval1;


$duration1: 1.1s;
$duration2: 1s;
$duration3: 0.9s;

$delay1: 0s;
$delay2: 0.1s;
$delay3: 0.2s;
$delay4: 0.3s;
$delay5: 0.4s;
$delay6: 0.5s;
$delay7: 0.6s;
$delay8: 0.7s;
$delay9: 0.8s;

$durationUp: 1.45s;
$durationDown: 1.45s;

$timingFunction: ease;
/*$boxsize: 180px;
$boxsizeH: 230px;*/

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  /* padding: 100px; */
  font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
  /* background: #2985c7; */
  /* overflow: hidden; */
}

.container {
  width: $boxsize*3;
  height: $boxsize*3/13.5 + $boxsizeH*4;
  margin-top: $backgroundHeight/6;
  margin-left: -$boxsize*3/2;
  left: 50%;
  position: absolute;
}

.container:after {
  content: "";
  background: url("https://raw.githubusercontent.com/hkjpotato/smartisan/master/background.png") no-repeat 0px 0px;
  background-size: $backgroundWidth $backgroundHeight;
  width: $backgroundWidth;
  height: $backgroundHeight;
  top: -($backgroundHeight/9.8);
  left: -($backgroundWidth/17);
  position: absolute;
  z-index: -100;
  display: inline-block;
}

.header {
  width: $boxsize*3;
  height: $boxsize*3/13.5;
  background: grey;
  overflow: hidden;
  float: left;
}

.header-box, .header-box div {
  width: 100%;
  height: 100%;
  float: left; 
}

.wrap {
  background: grey;
  overflow: hidden;
  width: $boxsize*3;
  height: $boxsizeH*3;
  float: left;
}

.footer {
  width: $boxsize*3;
  height: $boxsizeH;
  background: grey;
  overflow: hidden;
  float: left;
}

.footer-box, .footer-box div {
  width: 100%;
  height: 100%;
  float: left; 
}

.box, .box div {
  width: $boxsize;
  height: $boxsizeH;
  float: left;
}

.box-rotate {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style:    preserve-3d;
  -ms-transform-style:     preserve-3d;
  transform-style:         preserve-3d;

/*  -webkit-transform: translate3d(0, 0, -$boxsize/2);
  -moz-transform:    translate3d(0, 0, -$boxsize/2);
  -ms-transform:     translate3d(0, 0, -$boxsize/2);
  transform:         translate3d(0, 0, -$boxsize/2);*/
}

.box-rotate div {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: #fff;
  /* padding: 200px; */
}

.box-rotate img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.box-rotate .front {
  background: black;
  z-index: 2;
  -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsize/2);
  -moz-transform:    rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsize/2);
  -ms-transform:     rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsize/2);
  transform:         rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsize/2);
}

.box-rotate .back {
  background: black;
  -webkit-transform: rotate3d(0, 1, 0, 180deg)  translate3d(0, 0, $boxsize/2);
  -moz-transform:    rotate3d(0, 1, 0, 180deg)  translate3d(0, 0, $boxsize/2);
  -ms-transform:     rotate3d(0, 1, 0, 180deg)  translate3d(0, 0, $boxsize/2);
  transform:         rotate3d(0, 1, 0, 180deg)  translate3d(0, 0, $boxsize/2);
}

.box-rotate .left {
  background: black;
  -webkit-transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, $boxsize/2);
  -moz-transform:    rotate3d(0, 1, 0, -90deg) translate3d(0, 0, $boxsize/2);
  -ms-transform:     rotate3d(0, 1, 0, -90deg) translate3d(0, 0, $boxsize/2);
  transform:         rotate3d(0, 1, 0, -90deg) translate3d(0, 0, $boxsize/2);
}
.box-rotate .right {
  background: black;
  -webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, $boxsize/2);
  -moz-transform:    rotate3d(0, 1, 0, 90deg) translate3d(0, 0, $boxsize/2);
  -ms-transform:     rotate3d(0, 1, 0, 90deg) translate3d(0, 0, $boxsize/2);
  transform:         rotate3d(0, 1, 0, 90deg) translate3d(0, 0, $boxsize/2);
}

//for header
.header-box .front {
  background: black;
  z-index: 2;
  -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsize*3/26);
  -moz-transform:    rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsize*3/26);
  -ms-transform:     rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsize*3/26);
  transform:         rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsize*3/26);
}

.header-box .back {
  background: black;
  -webkit-transform: rotate3d(0, 1, 0, 180deg)  translate3d(0, 0, $boxsize*3/26);
  -moz-transform:    rotate3d(0, 1, 0, 180deg)  translate3d(0, 0, $boxsize*3/26);
  -ms-transform:     rotate3d(0, 1, 0, 180deg)  translate3d(0, 0, $boxsize*3/26);
  transform:         rotate3d(0, 1, 0, 180deg)  translate3d(0, 0, $boxsize*3/26);
}

.header-box .top {
  background: black;
  -webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, $boxsize*3/26);
  -moz-transform:    rotate3d(1, 0, 0, 90deg) translate3d(0, 0, $boxsize*3/26);
  -ms-transform:     rotate3d(1, 0, 0, 90deg) translate3d(0, 0, $boxsize*3/26);
  transform:         rotate3d(1, 0, 0, 90deg) translate3d(0, 0, $boxsize*3/26);
}

.header-box .bottom {
  background: black;
  -webkit-transform:         rotate3d(1, 0, 0, -90deg) translate3d(0, 0, $boxsize*3/26);
  -moz-transform:         rotate3d(1, 0, 0, -90deg) translate3d(0, 0, $boxsize*3/26);  
  -ms-transform:         rotate3d(1, 0, 0, -90deg) translate3d(0, 0, $boxsize*3/26);
  transform:         rotate3d(1, 0, 0, -90deg) translate3d(0, 0, $boxsize*3/26);
}

//for footer
.footer-box .front {
  background: black;
  z-index: 2;
  -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsizeH/2);
  -moz-transform:    rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsizeH/2);
  -ms-transform:     rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsizeH/2);
  transform:         rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsizeH/2);
}

.footer-box .back {
  background: black;
  -webkit-transform: rotate3d(0, 1, 0, 180deg)  translate3d(0, 0, $boxsizeH/2);
  -moz-transform:    rotate3d(0, 1, 0, 180deg)  translate3d(0, 0, $boxsizeH/2);
  -ms-transform:     rotate3d(0, 1, 0, 180deg)  translate3d(0, 0, $boxsizeH/2);
  transform:         rotate3d(0, 1, 0, 180deg)  translate3d(0, 0, $boxsizeH/2);
}
.footer-box .top {
  background: black;
  -webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, $boxsizeH/2);
  -moz-transform:    rotate3d(1, 0, 0, 90deg) translate3d(0, 0, $boxsizeH/2);
  -ms-transform:     rotate3d(1, 0, 0, 90deg) translate3d(0, 0, $boxsizeH/2);
  transform:         rotate3d(1, 0, 0, 90deg) translate3d(0, 0, $boxsizeH/2);
}

.footer-box .bottom {
  background: black;
  -webkit-transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, $boxsizeH/2);
  -moz-transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, $boxsizeH/2);  
  -ms-transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, $boxsizeH/2);  
  transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, $boxsizeH/2);
}

//animation 
//wrap animation
/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove1 {
  62% {-webkit-transform: rotate3d(0, 1, 0, $rotateDegree1);
  -moz-transform:rotate3d(0, 1, 0, $rotateDegree1);
  -ms-transform:rotate3d(0, 1, 0, $rotateDegree1);   
  transform:rotate3d(0, 1, 0, $rotateDegree1);
   }
  
  100% {-webkit-transform: rotate3d(0, 1, 0, $rotateDegree0);
  -moz-transform:rotate3d(0, 1, 0, $rotateDegree0);
  -ms-transform:rotate3d(0, 1, 0, $rotateDegree0);   
  transform:rotate3d(0, 1, 0, $rotateDegree0);
   }
}

@-webkit-keyframes mymove2 {
  62% {-webkit-transform: rotate3d(0, 1, 0, $rotateDegree2);
  -moz-transform:rotate3d(0, 1, 0, $rotateDegree2);
  -ms-transform:rotate3d(0, 1, 0, $rotateDegree2);   
  transform:rotate3d(0, 1, 0, $rotateDegree2);
   }
  
  100% {-webkit-transform: rotate3d(0, 1, 0, $rotateDegree0);
  -moz-transform:rotate3d(0, 1, 0, $rotateDegree0);
  -ms-transform:rotate3d(0, 1, 0, $rotateDegree0);   
  transform:rotate3d(0, 1, 0, $rotateDegree0);
   }
}

@-webkit-keyframes mymove3 {
  62% {-webkit-transform: rotate3d(0, 1, 0, $rotateDegree3);
  -moz-transform:rotate3d(0, 1, 0, $rotateDegree3);
  -ms-transform:rotate3d(0, 1, 0, $rotateDegree3);   
  transform:rotate3d(0, 1, 0, $rotateDegree3);
   }
  
  100% {-webkit-transform: rotate3d(0, 1, 0, $rotateDegree0);
  -moz-transform:rotate3d(0, 1, 0, $rotateDegree0);
  -ms-transform:rotate3d(0, 1, 0, $rotateDegree0);   
  transform:rotate3d(0, 1, 0, $rotateDegree0);
   }
}

/* Standard syntax */
@keyframes mymove1 {
  62% {-webkit-transform: rotate3d(0, 1, 0, $rotateDegree1);
  -moz-transform:rotate3d(0, 1, 0, $rotateDegree1);
  -ms-transform:rotate3d(0, 1, 0, $rotateDegree1);   
  transform:rotate3d(0, 1, 0, $rotateDegree1);
   }
  
  100% {-webkit-transform: rotate3d(0, 1, 0, $rotateDegree0);
  -moz-transform:rotate3d(0, 1, 0, $rotateDegree0);
  -ms-transform:rotate3d(0, 1, 0, $rotateDegree0);   
  transform:rotate3d(0, 1, 0, $rotateDegree0);
   }
}

@keyframes mymove2 {
  62% {-webkit-transform: rotate3d(0, 1, 0, $rotateDegree2);
  -moz-transform:rotate3d(0, 1, 0, $rotateDegree2);
  -ms-transform:rotate3d(0, 1, 0, $rotateDegree2);   
  transform:rotate3d(0, 1, 0, $rotateDegree2);
   }
  
  100% {-webkit-transform: rotate3d(0, 1, 0, $rotateDegree0);
  -moz-transform:rotate3d(0, 1, 0, $rotateDegree0);
  -ms-transform:rotate3d(0, 1, 0, $rotateDegree0);   
  transform:rotate3d(0, 1, 0, $rotateDegree0);
   }
}

@keyframes mymove3 {
  62% {-webkit-transform: rotate3d(0, 1, 0, $rotateDegree3);
  -moz-transform:rotate3d(0, 1, 0, $rotateDegree3);
  -ms-transform:rotate3d(0, 1, 0, $rotateDegree3);   
  transform:rotate3d(0, 1, 0, $rotateDegree3);
   }
  
  100% {-webkit-transform: rotate3d(0, 1, 0, $rotateDegree0);
  -moz-transform:rotate3d(0, 1, 0, $rotateDegree0);
  -ms-transform:rotate3d(0, 1, 0, $rotateDegree0);   
  transform:rotate3d(0, 1, 0, $rotateDegree0);
   }
}

//header animation
/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymoveup {
  62% {
   -webkit-transform: rotate3d(1, 0, 0, $rotateDegree1);
  -moz-transform:rotate3d(1, 0, 0, $rotateDegree1);
  -ms-transform:rotate3d(1, 0, 0, $rotateDegree1);   
  transform:rotate3d(1, 0, 0, $rotateDegree1);
   }
  
  100% {
   -webkit-transform: rotate3d(1, 0, 0, $rotateDegree0);
  -moz-transform:rotate3d(1, 0, 0, $rotateDegree0);
  -ms-transform:rotate3d(1, 0, 0, $rotateDegree0);   
  transform:rotate3d(1, 0, 0, $rotateDegree0);
   }
}
/* Standard syntax */
@keyframes mymoveup {
  62% {
   -webkit-transform: rotate3d(1, 0, 0, $rotateDegree1);
  -moz-transform:rotate3d(1, 0, 0, $rotateDegree1);
  -ms-transform:rotate3d(1, 0, 0, $rotateDegree1);   
  transform:rotate3d(1, 0, 0, $rotateDegree1);
   }
  
  100% {
   -webkit-transform: rotate3d(1, 0, 0, $rotateDegree0);
  -moz-transform:rotate3d(1, 0, 0, $rotateDegree0);
  -ms-transform:rotate3d(1, 0, 0, $rotateDegree0);   
  transform:rotate3d(1, 0, 0, $rotateDegree0);
   }
}

//footer animation
/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymovedown {
  62% {-webkit-transform: rotate3d(1, 0, 0, -$rotateDegree1);
  -moz-transform:rotate3d(1, 0, 0, -$rotateDegree1);
  -ms-transform:rotate3d(1, 0, 0, -$rotateDegree1);   
  transform:rotate3d(1, 0, 0, -$rotateDegree1);
   }
  
  100% {-webkit-transform: rotate3d(1, 0, 0, -$rotateDegree0);
  -moz-transform:rotate3d(1, 0, 0, -$rotateDegree0);
  -ms-transform:rotate3d(1, 0, 0, -$rotateDegree0);   
  transform:rotate3d(1, 0, 0, -$rotateDegree0);
   }
}
/* Standard syntax */
@keyframes mymovedown {
  62% {-webkit-transform: rotate3d(1, 0, 0, -$rotateDegree1);
  -moz-transform:rotate3d(1, 0, 0, -$rotateDegree1);
  -ms-transform:rotate3d(1, 0, 0, -$rotateDegree1);   
  transform:rotate3d(1, 0, 0, -$rotateDegree1);
   }
  
  100% {-webkit-transform: rotate3d(1, 0, 0, -$rotateDegree0);
  -moz-transform:rotate3d(1, 0, 0, -$rotateDegree0);
  -ms-transform:rotate3d(1, 0, 0, -$rotateDegree0);   
  transform:rotate3d(1, 0, 0, -$rotateDegree0);
   }
}

//assign animation
.container.hover .box-rotate-right:nth-child(1) {
    cursor: pointer;
    -webkit-animation: mymove1 $duration1 forwards; /* Chrome, Safari, Opera */ 
    animation: mymove1 $duration1 forwards;
    -webkit-animation-delay: $delay1; /* Chrome, Safari, Opera */
    animation-delay:$delay1;
    -webkit-animation-timing-function: $timingFunction;
    animation-timing-function: $timingFunction;  
  
  
}

.container.hover .box-rotate-right:nth-child(2) {
    cursor: pointer;
    -webkit-animation: mymove2 $duration2 forwards; /* Chrome, Safari, Opera */ 
    animation: mymove2 $duration2 forwards;
    -webkit-animation-delay: $delay2; /* Chrome, Safari, Opera */
    animation-delay:$delay2;
    -webkit-animation-timing-function: $timingFunction;
    animation-timing-function: $timingFunction;   
  
}
.container.hover .box-rotate-right:nth-child(3) {
    cursor: pointer;
    -webkit-animation: mymove3 $duration3 forwards; /* Chrome, Safari, Opera */ 
    animation: mymove3 $duration3 forwards;
    -webkit-animation-delay: $delay3; /* Chrome, Safari, Opera */
    animation-delay:$delay3;
    -webkit-animation-timing-function: $timingFunction;
    animation-timing-function: $timingFunction; 
}

.container.hover .box-rotate-right:nth-child(4) {
    cursor: pointer;
    -webkit-animation: mymove1 $duration1 forwards; /* Chrome, Safari, Opera */ 
    animation: mymove1 $duration1 forwards;
    -webkit-animation-delay: $delay4; /* Chrome, Safari, Opera */
    animation-delay:$delay4;
    -webkit-animation-timing-function: $timingFunction;
    animation-timing-function: $timingFunction; 
}
.container.hover .box-rotate-right:nth-child(5) {
    cursor: pointer;
    -webkit-animation: mymove2 $duration2 forwards; /* Chrome, Safari, Opera */ 
    animation: mymove2 $duration2 forwards;
    -webkit-animation-delay: $delay5; /* Chrome, Safari, Opera */
    animation-delay:$delay5;
    -webkit-animation-timing-function: $timingFunction;
    animation-timing-function: $timingFunction; 
}
.container.hover .box-rotate-right:nth-child(6) {
    cursor: pointer;
    -webkit-animation: mymove3 $duration3 forwards; /* Chrome, Safari, Opera */ 
    animation: mymove3 $duration3 forwards;
    -webkit-animation-delay: $delay6; /* Chrome, Safari, Opera */
    animation-delay:$delay6;
    -webkit-animation-timing-function: $timingFunction;
    animation-timing-function: $timingFunction; 
}
.container.hover .box-rotate-right:nth-child(7) {
    cursor: pointer;
    -webkit-animation: mymove1 $duration1 forwards; /* Chrome, Safari, Opera */ 
    animation: mymove1 $duration1 forwards;
    -webkit-animation-delay: $delay7; /* Chrome, Safari, Opera */
    animation-delay:$delay7;
    -webkit-animation-timing-function: $timingFunction;
    animation-timing-function: $timingFunction; 
}

.container.hover .box-rotate-right:nth-child(8) {
    cursor: pointer;
    -webkit-animation: mymove2 $duration2 forwards; /* Chrome, Safari, Opera */ 
    animation: mymove2 $duration2 forwards;
    -webkit-animation-delay: $delay9; /* Chrome, Safari, Opera */
    animation-delay:$delay8;
    -webkit-animation-timing-function: $timingFunction;
    animation-timing-function: $timingFunction; 
}
.container.hover .box-rotate-right:nth-child(9) {
    cursor: pointer;
    -webkit-animation: mymove3 $duration3 forwards; /* Chrome, Safari, Opera */ 
    animation: mymove3 $duration3 forwards;
    -webkit-animation-delay: $delay9; /* Chrome, Safari, Opera */
    animation-delay:$delay9;
    -webkit-animation-timing-function: $timingFunction;
    animation-timing-function: $timingFunction; 
}

.container.hover .box-rotate-up {
    cursor: pointer;
    -webkit-animation: mymoveup $durationUp forwards; /* Chrome, Safari, Opera */ 
    animation: mymoveup $durationUp forwards;
    -webkit-animation-delay: 0s; /* Chrome, Safari, Opera */
    animation-delay:0s;
}

.container.hover .box-rotate-down {
    cursor: pointer;
    -webkit-animation: mymovedown $durationDown forwards; /* Chrome, Safari, Opera */ 
    animation: mymovedown $durationDown forwards;
    -webkit-animation-delay: 0s; /* Chrome, Safari, Opera */
    animation-delay:0s;
}

.shadow {
  opacity: 0.7;
}

.color-switch li {
  float: left;
  /* width: px; */
  /* height: 50px; */
  padding: 3px;
  margin-right: 10px;
  background: #fff;
  border: 2px solid #e6e6e6;
  border-radius: 25px;
  cursor: pointer;
  -moz-transition: box-shadow .15s ease-out;
  -webkit-transition: box-shadow .15s ease-out;
  -o-transition: box-shadow .15s ease-out;
  transition: box-shadow .15s ease-out;
}

.color-switch li:hover {
  box-shadow: 0 0 1px 0 rgba(0,0,0,.4), 0 0 8px 0 rgba(0,0,0,.04);
}

ul {
  display: block;
  list-style-type: none;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

.color-switch li.color-orange em {
  background-color: #FB7;
}
.color-switch li.color-red em {
  background-color: #F1757D;
}
.color-switch li.color-yellow em {
  background-color: #FBDB7D;
}
.color-switch li.color-green em {
  background-color: #DDED91;
}
.color-switch li.color-lightblue em {
  background-color: #9BE7F1;
}
.color-switch li.color-blue em {
  background-color: #9DBBF1;
}
.color-switch li.color-purple em {
  background-color: #B3A5DF;
}
.color-switch li em {
  overflow: hidden;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  box-shadow: inset 0 0 1px 0 rgba(0,0,0,.3),inset 0 0 8px 0 rgba(0,0,0,.03);
  background-position: center;
  background-size: contain;
  cursor: pointer;
}

.color-switch {
  opacity: 0;
  -webkit-transition: opacity 1.2s linear 1.6s;
  -moz-transition: opacity 1.2s linear 1.6s;
  transition: opacity 1.2s linear 1.6s;
}

.color-switch {
  height: 40px;
  /* margin: 20px auto; */
  width: 400px;
  left: 50%;
  margin-left: -200px;
  top: $backgroundHeight*1.05;
  /* bottom:0; */
  position:absolute;
}

.color-switch li.active {
  padding: 2px;
  border: 3px solid #999;
}


            
          
!
            
              $(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  $('.color-switch').css('opacity', 1);
});

$(document).ready(function() {
  $(window).scroll(function() {
    if ($('.color-switch').isOnScreen()) {

      // The element is visible, do something
      console.log("in viewport!");

      if ($('.color-switch').css("opacity") == 0) {
        $('.color-switch').css("opacity", 1);
      }

    } else {
      // The element is NOT visible, do something else
      console.log("Not in viewport!");

      if ($('.color-switch').css("opacity") == 1) {
        $('.color-switch').css("opacity", 0);
      }

    }
  });
});

$.fn.isOnScreen = function() {
  var win = $(window);

  var viewport = {
    top: win.scrollTop(),
    left: win.scrollLeft()
  };
  viewport.right = viewport.left + win.width();
  viewport.bottom = viewport.top + win.height();

  var bounds = this.offset();
  bounds.right = bounds.left + this.outerWidth();
  bounds.bottom = bounds.top + this.outerHeight();

  return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

$('body').bind('touchstart', function() {});

// define angular module/app
var myApp = angular.module('myApp', []);

// create angular controller and pass in $scope and $http
function myController($scope) {
  $scope.srcRoot = "https://raw.githubusercontent.com/hkjpotato/smartisan/master";
  /*  $scope.oldColor = "blue";
    $scope.newColor = "red";*/
  $scope.colorList = [];
  $scope.colorList.push("red");
  $scope.colorList.push("orange");
  $scope.colorList.push("yellow");
  $scope.colorList.push("green");
  $scope.colorList.push("lightblue");
  $scope.colorList.push("blue");
  $scope.colorList.push("purple");
  $scope.indexList = [];
  for (var i = 1; i <= 9; i++) {
    $scope.indexList.push(i);
  }

  $scope.oldColor = "red";
  $scope.newColor = "red";

  $(".container").bind('animationend webkitAnimationEnd', function() {
    $scope.oldColor = $scope.newColor;
    var imgs = $('img');
    var imgs_count = imgs.length;
    var imgs_loaded = 0;

    imgs.load(function() {
      imgs_loaded++;
      if (imgs_loaded === imgs_count) {
        $(".container").toggleClass("hover");
      }
    });
  });

  $scope.changeColor = function(newColor) {
    console.log("haha");
    $scope.newColor = newColor;
    $(".container").toggleClass("hover");
    /*$(".container").toggleClass("hover");*/
    console.log($('.container').css('width'));

  }

}
            
          
!
999px
Loading ..................

Console