OnClick transition effects, and understanding the markup code

HTML & CSS
52

This uses opacity to simulate a fade in background-image swap. Requires two different elements to create that effect with opacity. Due to the fact that background-image does not transition.

It uses your existing sprite image, but it’s no longer a sprite setup where it changes bg position on the same element.

fade-in-bg.zip (2.3 KB)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Background Image Fade In</title>
<style>
.playButtonb {
  position: relative;
  margin: 0 auto;
  width: 260px;
  height: 260px;
  cursor: pointer;
  border: 3px solid #0059dd;
  background: url("https://i.imgur.com/6wOeaWN.png") no-repeat 0 0;
}
.playButtonb::before {
  content: "";
  position: absolute;
  top:-3px; left:-3px;
  width: 100%;
  height: 100%;
  background: url("https://i.imgur.com/6wOeaWN.png") no-repeat 0 -260px;
  /*transitions*/
  opacity: 0;
  border:3px solid #0059dd;
  transition: all 2s;
}
.playButtonb.active {
 /*javascript activates this class*/
}
.playButtonb.active::before {
  opacity: 1;
  border: 3px solid #e77d19;
}

/*=== Vertical Lines ===*/
.lines::before,
.lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
  transition: all 2s;
}
.lines::after {
  left: 174px;
}
.playButtonb.active .lines::before,
.playButtonb.active .lines::after {
  background: #e77d19;
}

/*=== SVG styles ===*/
.initialb,
.pauseb,
.playb,
.speakerb {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.initialb {
  stroke: #e77d19;
  stroke-width: 3px;
  fill: transparent;
}
.pauseb,
.playb {
  stroke: #e77d19;
  stroke-width: 3px;
  fill: transparent;
}
.speakerb {
  fill: #1ed760;
}
.hideb {
  display: none;
}
</style>
</head>

<body>
<audio></audio>
<div class="playButtonb" data-audio="http://hi5.1980s.fm/;">
  <svg class="initialb" width="90" height="108" viewbox="0 -10 85 120">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      <title>PLAY</title>
    </path>
  </svg>

  <svg class="pauseb hideb" focusable="false" width="90" height="108" viewbox="-13 -10 85 120">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
      <title>PAUSE</title>
    </path>
  </svg>

  <svg class="speakerb hideb" focusable="false" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    rfill-rule="evenodd">
      <title>VOLUME</title>
    </path>
  </svg>

  <svg class="playb hideb" focusable="false" width="90" height="108" viewbox="0 -10 85 120">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      <title>PLAY</title>
    </path>
  </svg>
  <div class="lines"></div>
</div>

<script src="audio.js"></script>
</body>
</html>
1 Like