Bouncy Columns

In this example below you will see how to do a Bouncy Columns with some HTML / CSS and Javascript

Columns that expand when hovered over. Good for maybe a portfolio or something?

Thumbnail
This awesome code was written by chrisxclash, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrisxclash ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Bouncy Columns</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id='wrap'>
  <div class='column col1'></div>
  <div class='column col2'></div>
  <div class='column col3'></div>
  <div class='column col4'></div>
  <div class='column col5'></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/chrisxclash/bouncy-columns-AaiGE */
body {
  background: #442D1A;
}

#wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
#wrap .column {
  float: left;
  height: 100%;
  width: 20%;
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  -ms-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}
#wrap .column.active {
  width: 70%;
}
#wrap .column.nonactive {
  width: 7.5%;
}
#wrap .col1 {
  background: #321805;
}
#wrap .col2 {
  background: #9E2013;
}
#wrap .col3 {
  background: #E5CB95;
}
#wrap .col4 {
  background: #A2CC64;
}
#wrap .col5 {
  background: #442D1A;
}


/*Downloaded from https://www.codeseek.co/chrisxclash/bouncy-columns-AaiGE */
(function() {
  $('.column').hover(function() {
    $(this).addClass('active');
    return $('.column:not(.active)').addClass('nonactive');
  }, function() {
    return $('.column').removeClass('active nonactive');
  });

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQSxDQUFBLENBQUUsU0FBRixDQUFZLENBQUMsS0FBYixDQUFtQixRQUFBLENBQUEsQ0FBQTtJQUNqQixDQUFBLENBQUUsSUFBRixDQUFPLENBQUMsUUFBUixDQUFpQixRQUFqQjtXQUNBLENBQUEsQ0FBRSxzQkFBRixDQUF5QixDQUFDLFFBQTFCLENBQW1DLFdBQW5DO0VBRmlCLENBQW5CLEVBR0UsUUFBQSxDQUFBLENBQUE7V0FDQSxDQUFBLENBQUUsU0FBRixDQUFZLENBQUMsV0FBYixDQUF5QixrQkFBekI7RUFEQSxDQUhGO0FBQUEiLCJzb3VyY2VzQ29udGVudCI6WyIkKCcuY29sdW1uJykuaG92ZXIgLT5cbiAgJCh0aGlzKS5hZGRDbGFzcygnYWN0aXZlJylcbiAgJCgnLmNvbHVtbjpub3QoLmFjdGl2ZSknKS5hZGRDbGFzcygnbm9uYWN0aXZlJylcbiwgLT5cbiAgJCgnLmNvbHVtbicpLnJlbW92ZUNsYXNzKCdhY3RpdmUgbm9uYWN0aXZlJykiXX0=
//# sourceURL=coffeescript

Comments