Click v2

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Click v2</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="bg">
   <img src="http://www.s4c.cymru/img/test-bg.jpg" alt="background">
</div>
<div class="toggle">
  <a href="#">Toggle background</a>
</div>
<div class="logo">
  <div class="mark-holder">
    <div class="circle-outline svg-holder">
<!--       <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 168.1 168.1" style="enable-background:new 0 0 168.1 168.1;" xml:space="preserve">
      <style type="text/css">
        .st0{fill:#FFFFFF;}
      </style>
      <g>
        <path class="st0" d="M24.7,24.7C41.1,8.2,60.9,0,84,0c23.1,0,42.9,8.2,59.4,24.7c16.4,16.4,24.7,36.2,24.7,59.4
          c0,23.1-8.2,42.9-24.7,59.4c-16.4,16.4-36.2,24.7-59.4,24.7c-23.1,0-42.9-8.2-59.4-24.7C8.2,127,0,107.2,0,84
          C0,60.9,8.2,41.1,24.7,24.7z M43.9,124.2c11.2,11.2,24.6,16.8,40.2,16.8c15.6,0,29-5.6,40.2-16.8c11.2-11.2,16.8-24.6,16.8-40.2
          c0-15.6-5.6-29-16.8-40.2C113,32.6,99.6,27,84,27c-15.6,0-29,5.6-40.2,16.8C32.6,55.1,27,68.5,27,84C27,99.6,32.6,113,43.9,124.2z"
          />
      </g>
      </svg> -->
    </div>
    <div class="play-arrow svg-holder">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 50.5 75.8" style="enable-background:new 0 0 50.5 75.8;" xml:space="preserve">
      <style type="text/css">
        .st0{fill:#FFFFFF;}
      </style>
      <polygon class="st0" points="0,75.8 0,0 50.5,37.9 "/>
      </svg>
    </div>
    <div class="circle svg-holder">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 55 55" style="enable-background:new 0 0 55 55;" xml:space="preserve">
      <style type="text/css">
        .st0{fill:#FFFFFF;}
      </style>
      <circle class="st0" cx="27.5" cy="27.5" r="27.5"/>
      </svg>
    </div>
  </div>
  <div class="logo-bg svg-holder">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 168.5 168.5" style="enable-background:new 0 0 168.5 168.5;" xml:space="preserve">
    <style type="text/css">
      .st0{fill:#FFFFFF;}
    </style>
    <path class="st0" d="M146.7,0H21.8C9.8,0,0,9.8,0,21.8v124.8c0,12,9.8,21.8,21.8,21.8h124.8c12,0,21.8-9.8,21.8-21.8V21.8
      C168.5,9.8,158.7,0,146.7,0z M124.2,125.2C113,136.4,99.6,142,84,142c-15.6,0-29-5.6-40.2-16.8C32.6,114,27,100.6,27,85
      c0-15.6,5.6-29,16.8-40.2C55,33.6,68.4,28,84,28c15.6,0,29,5.6,40.2,16.8C135.4,56.1,141,69.5,141,85
      C141,100.6,135.4,114,124.2,125.2z"/>
    </svg>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/candroo/click-v2-dZzbxo */
body {
  background: #323B40;
  height: 100vh;
  margin: 0;
  padding: 0;
}
div.bg {
  height: 100vh;
  overflow: hidden;
  width: 100vw;
  opacity: 0.5;
  transition: 0.3s 0.1s ease-in;
}
div.bg img {
  min-width: 100%;
}
div.bg.hide {
  opacity: 0;
}
div.toggle {
  bottom: 40px;
  position: absolute;
  text-align: center;
  width: 100%;
}
div.toggle a {
  background: #fff;
  border-radius: 400px;
  color: #333;
  display: inline-block;
  font-family: arial;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  padding: 16px 36px;
}
div.toggle a:hover {
  color: #7dbeff;
}
svg {
  height: 100%;
  width: 100%;
}
.svg-holder {
  position: absolute;
}
.logo {
  cursor: pointer;
  height: 300px;
  left: 50%;
  margin: -150px 0 0 -150px;
  position: absolute;
  top: 50%;
  width: 300px;
}
.mark-holder {
  height: 100%;
  position: absolute;
  transition: 0.3s 0.1s ease-in;
  width: 100%;
}
.circle-outline {
  position: absolute;
}
.play-arrow {
  left: 42%;
  top: 31.25%;
  transition: 0.3s 0.2s ease-in;
  width: 25%;
}
.circle {
  left: 30%;
  height: 40%;
  top: 30%;
  width: 40%;
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: 0.3s 0.2s ease-in;
}
.mark-holder.on {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  transition: 0.3s 0.25s ease-in;
}
.mark-holder.on .circle {
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: 0.3s 0.1s ease-in;
}
.mark-holder.on .play-arrow {
  -webkit-transform: translatex(-100%) scale(1.5);
          transform: translatex(-100%) scale(1.5);
  transition: 0.3s 0.1s ease-in;
}


/*Downloaded from https://www.codeseek.co/candroo/click-v2-dZzbxo */
$(function() {

  $(".logo").on("click", function(){
    $(".mark-holder").toggleClass("on");
  });

  $(".toggle a").on("click", function(){
    $("div.bg").toggleClass("hide");
  })

});

Comments