Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="React.js titty shaker">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>React Redux</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://fb.me/react-with-addons-0.14.7.min.js"></script>
    <script src="https://fb.me/react-dom-0.14.7.min.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.1/redux.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.0.1/redux-thunk.js'></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>
 
//colors
$color_raffia_approx: #e7ddb6;
$color_heathered_gray_approx: #b8b092;
$color_mandy_approx: #eb486b;
$color_night_shadz_approx: #ba3b56;
$color_river_bed_approx: #3e505e;
$color_mona_lisa_approx: #f5978e;
$color_claret_approx: #772436;
$color_akaroa_approx: #d8cca7;
$yellow: yellow;
$white: white;
//@extend-elements
//original selectors
//html, body
%extend_1 {
  background: $color_river_bed_approx;
  margin: 0;
  padding: 0;
}
//original selectors
//.wrestler-body-skin, .wrestler-body-skin::before, .wrestler-body-skin::after
%extend_2 {
  background-color: $color_raffia_approx;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 50%;
  display: block;
  height: 85px;
  width: 85px;
}
//original selectors
//.wrestler-body-skin::before, .wrestler-body-skin::after
%extend_3 {
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 0 0 50% 50%;
  content: '';
  //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
  transform: translateY(20px);
}
//original selectors
//.wrestler-body-nipples, .wrestler-body-nipples::after
%extend_4 {
  background-color: $color_mona_lisa_approx;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 50%;
  display: block;
  height: 10px;
  position: relative;
  width: 10px;
}
//original selectors
//.wrestler-head, .wrestler-head::before
%extend_5 {
  background-color: $color_raffia_approx;
  display: block;
  height: 30px;
  margin: -106px 0 0 -17px;
  position: absolute;
  width: 34px;
  z-index: 1;
}
//original selectors
//.wrestler-shoelace, .wrestler-shoelace::after
%extend_6 {
  background-color: $yellow;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 2px;
  height: 2px;
  margin: 15px 0 0 1px;
  //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
  transform: rotate(45deg);
  width: 12px;
}
//original selectors
//.LinkedIn, .LinkedIn:visited
%extend_7 {
  bottom: .25em;
  color: $color_raffia_approx;
  position: absolute;
  right: .25em;
}
html {
  @extend %extend_1;
}
body {
  @extend %extend_1;
}
.wrestler {
  left: 50%;
  position: absolute;
  top: 50%;
  margin-top:150px;
}
.wrestler-body {
  animation: 1.3s ease-in-out infinite alternate bodyStep;
  background-color: $color_mandy_approx;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 50%;
  height: 160px;
  overflow: hidden;
  margin: -80px 0 0 -80px;
  position: absolute;
  text-align: center;
  width: 160px;
  white-space: nowrap;
}
.wrestler-body-skin {
  @extend %extend_2;
  animation: 0.07s ease-in-out infinite alternate skinShake;
  margin: -20px auto 0;
}
.wrestler-body-skin::before {
  @extend %extend_2;
  @extend %extend_3;
  margin-left: -90px;
}
.wrestler-body-skin::after {
  @extend %extend_2;
  @extend %extend_3;
  margin: -85px 0 0 90px;
}
.wrestler-body-nipples {
  @extend %extend_4;
  animation: 0.07s ease-in-out infinite alternate nipplesShake;
}
.wrestler-body-nipples::after {
  @extend %extend_4;
  content: '';
  margin-left: 56px;
  //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
  transform: translateY(0);
}
.wrestler-head {
  @extend %extend_5;
  animation: 1.3s ease-in-out infinite alternate bodyStep;
}
.wrestler-head::before {
  @extend %extend_5;
  background-color: $color_mandy_approx;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 50% 50% 0 0;
  content: '';
  height: 40px;
  margin: -27px 0 0;
}
.wrestler-eye {
  background-color: $color_claret_approx;
  border: 2px solid $color_raffia_approx;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 0 8px 6px 70%;
  display: block;
  height: 8px;
  margin: -11px 0 0 1px;
  position: absolute;
  width: 11px;
  z-index: 1;
}
.wrestler-eye::after {
  background-color: $color_raffia_approx;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 50%;
  content: '';
  display: block;
  height: 5px;
  margin: 1px 0 0 4px;
  width: 5px;
}
.wrestler-eye_right {
  margin-left: 18px;
  //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
  transform: scaleX(-1);
}
.wrestler-arm {
  animation: 1.3s ease-in-out infinite alternate bodyStep;
  margin: -63px 0 0 -80px;
  position: absolute;
}
.wrestler-arm_right {
  animation: 1.3s ease-in-out infinite alternate bodyStepMirror;
  margin-left: 80px;
}
.wrestler-arm::before {
  animation: 0.07s ease-in-out infinite alternate armShake;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 30px 30px 0 0;
  background-color: $color_akaroa_approx;
  content: '';
  height: 80px;
  margin: -10px 0 0 -22px;
  position: absolute;
  //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
  transform: rotate(31deg);
  //Instead of the line below you could use @include transform-origin($origin-x, $origin-y, $origin-z, $only3d)
  transform-origin: bottom;
  width: 50px;
}
.wrestler-arm_right::before {
  animation-delay: 0.07s;
}
.wrestler-arm::after {
  content: '';
  background-color: $color_raffia_approx;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 3px 0 30px 30px;
  height: 85px;
  margin: 54px 0 0 -55px;
  position: absolute;
  //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
  transform: rotate(49deg);
  width: 50px;
}
.wrestler-leg {
  animation: 1.3s ease-in infinite alternate legShift;
  margin: 49px 0 0 -52px;
  position: absolute;
}
.wrestler-leg-top {
  animation: 1.3s ease-in infinite alternate legTop;
  background-color: $color_raffia_approx;
  height: 50px;
  position: absolute;
  width: 45px;
}
.wrestler-leg-bottom {
  animation: 1.3s ease-in infinite alternate legBottom;
  background-color: $color_mandy_approx;
  height: 70px;
  margin: 40px 0 0;
  position: absolute;
  width: 45px;
}
.wrestler-leg-bottom::before {
  animation: 1.3s ease-in infinite alternate bootsBackground;
  background-color: $color_mandy_approx;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 50% 0 0 0;
  content: '';
  height: 10px;
  margin: 60px 0 0 -20px;
  position: absolute;
  width: 20px;
}
.wrestler-leg_right {
  animation: 1.3s ease-in -1.3s infinite alternate legShiftScale;
  margin-left: 52px;
  //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
  transform: scaleX(-1);
  .wrestler-leg-top {
    animation-delay: 1.3s;
  }
  .wrestler-leg-bottom {
    animation-delay: 1.3s;
  }
  .wrestler-leg-bottom::before {
    animation-delay: 1.3s;
  }
}
.wrestler-shoelace {
  @extend %extend_6;
}
.wrestler-shoelace::after {
  @extend %extend_6;
  content: '';
  margin: 0;
  position: absolute;
  //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
  transform: rotate(90deg);
}
.wrestler-heel {
  bottom: 0;
  height: 20px;
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 20px;
}
.wrestler-heel::after {
  background-color: $yellow;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 50%;
  content: '';
  height: 40px;
  position: absolute;
  width: 40px;
}
@keyframes legShift {
  0% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(0, 0);
  }
  50% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(0, 0);
  }
  75% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(0, -20px);
  }
  90% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(20px, 0);
  }
  100% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(20px, 0);
  }
}
@keyframes legShiftScale {
  0% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(0, 0) scaleX(-1);
    z-index: 0;
  }
  50% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(0, 0) scaleX(-1);
    z-index: 0;
  }
  75% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(0, -20px) scaleX(-1);
    z-index: 0;
  }
  90% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(-20px, 0) scaleX(-1);
    z-index: -1;
  }
  100% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(-20px, 0) scaleX(-1);
    z-index: -1;
  }
}
@keyframes legTop {
  0% {
    background-color: $color_raffia_approx;
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: rotate(0deg);
  }
  50% {
    background-color: $color_raffia_approx;
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: rotate(0deg);
  }
  75% {
    background-color: $color_raffia_approx;
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: rotate(30deg);
  }
  90% {
    background-color: $color_heathered_gray_approx;
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: rotate(0deg);
  }
  100% {
    background-color: $color_heathered_gray_approx;
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: rotate(0deg);
  }
}
@keyframes legBottom {
  0% {
    background-color: $color_mandy_approx;
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    background-color: $color_mandy_approx;
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(0, 0) rotate(0deg);
  }
  75% {
    background-color: $color_mandy_approx;
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(0px, -15px) rotate(-20deg);
  }
  90% {
    background-color: $color_night_shadz_approx;
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    background-color: $color_night_shadz_approx;
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes bootsBackground {
  0% {
    background-color: $color_mandy_approx;
  }
  75% {
    background-color: $color_mandy_approx;
  }
  90% {
    background-color: $color_night_shadz_approx;
  }
  100% {
    background-color: $color_night_shadz_approx;
  }
}
@keyframes bodyStep {
  0% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate3d(-22px, 0, 0);
  }
  2% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate3d(-22px, 0, 0);
  }
  25% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate3d(-11px, -15px, 0);
  }
  50% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate3d(0, 0, 0);
  }
  75% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate3d(11px, -15px, 0);
  }
  98% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate3d(22px, 0, 0);
  }
  100% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate3d(22px, 0, 0);
  }
}
@keyframes bodyStepMirror {
  0% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate3d(-22px, 0, 0) scaleX(-1);
  }
  25% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate3d(-11px, -15px, 0) scaleX(-1);
  }
  50% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate3d(0, 0, 0) scaleX(-1);
  }
  75% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate3d(11px, -15px, 0) scaleX(-1);
  }
  100% {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate3d(22px, 0, 0) scaleX(-1);
  }
}
@keyframes skinShake {
  from {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translateX(-3px);
  }
  to {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translateX(3px);
  }
}
@keyframes nipplesShake {
  from {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(44px, -25px);
  }
  to {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: translate(50px, -25px);
  }
}
@keyframes armShake {
  from {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: rotate(28deg);
  }
  to {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: rotate(32deg);
  }
}
 
var { createStore, combineReducers, applyMiddleware } = Redux;
var Main = React.createClass({
  render: function() {
    return (
      <div className='container'>
        {this.props.children}
      </div>
    );
  }
});
var Content = React.createClass({
  render: function() {
    return (
      <div className='row'>
        <div className='col-xs-12'>
          <section className="wrestler">
            <div className="wrestler-head">
              <i className="wrestler-eye" />
              <i className="wrestler-eye wrestler-eye_right" />
            </div>
            <div className="wrestler-arm" />
            <div className="wrestler-arm wrestler-arm_right" />
            <div className="wrestler-leg">
              <div className="wrestler-leg-top" />
              <div className="wrestler-leg-bottom">
                <div className="wrestler-heel" />
                <div className="wrestler-shoelace" />
                <div className="wrestler-shoelace" />
              </div>
            </div>
            <div className="wrestler-leg wrestler-leg_right">
              <div className="wrestler-leg-top" />
              <div className="wrestler-leg-bottom">
                <div className="wrestler-heel" />
                <div className="wrestler-shoelace" />
                <div className="wrestler-shoelace" />
              </div>
            </div>
            <div className="wrestler-body">
              <div className="wrestler-body-skin" />
              <div className="wrestler-body-nipples" />
            </div>
          </section>
        </div>        
      </div>
    );
  }
});
var Panel = React.createClass({
  render: function() {
    return (
      <div className='row'>
        <div className='col-xs-12'>
          <div className="panel panel-success">
            
            <div className="panel-heading">
              <h3 className="panel-title">{this.props.title}</h3>
            </div>
            
            
            <div className="panel-body">
              {this.props.children}
            </div>
            
            <div className="panel-footer">{this.props.footer || ''}</div>
            
          </div>
        </div>        
      </div>
    );
  }
});
const toRender = (
  <Main>
    <Content/>
  </Main>
)
ReactDOM.render( toRender, document.getElementById('root') );  
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kizzlebotpro
0viewers