How do I know where all the activated classes go?

HTML & CSS
1

All of these .activated classes would need to be placed on the right classes for it to match the css version.

I converted this one to use js.

.activated would be added to this one.
How do you know which are the right classes they go to?
Is there a methodology to it?

https://jsfiddle.net/jtu6gz13/

To replicate this?

Original css version.
https://jsfiddle.net/ajy02p3h/

The only class that is being added to the html / css is .activated

.switchbox {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background-color: black;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

.switchbox .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}

.switchbox .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.switchbox .button .shine {
  opacity: 1;
}

.switchbox .button .shadow {
  opacity: 0;
}

.switchbox .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  background-image: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}

.switchbox .button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}

.switchbox .button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}

.switchbox .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}

.switchbox .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
}

.switchbox .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}

.switchbox .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}

.switchbox .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }
}

<div class="switchbox">
  <div class="button">
    <div class="light"></div>
    <div class="dots"></div>
    <div class="characters"></div>
    <div class="shine"></div>
    <div class="shadow"></div>
  </div>
</div>
2

You would replace every instance of :checked and replace it with the class you added.

e.g.

.switch input:checked+.button {

would become

.switch.activated .button {

and so on…

No idea why you want to remove the css version though?

3

Would anything be added to the html?
activated classes?

<div class="switchbox">
  <div class="button">
    <div class="light"></div>
    <div class="dots"></div>
    <div class="characters"></div>
    <div class="shine"></div>
    <div class="shadow"></div>
  </div>
</div>
4

Did you look at my example?

1 Like
5

Apart from changing the label to a div.

6

What if I only wanted it to go on, and not off?

Where it can only be turned on.

When you first view it it is off, and it can only go on and not off.

(function() {
  "use strict";

  const onOffButton = document.querySelector(".switch");

  function switchButton() {
    onOffButton.classList.toggle("on");
  }
  onOffButton.addEventListener("click", switchButton);
})();
7

Then don’t toggle the classname but add the classname.

8

Like this.
https://jsfiddle.net/8au7btoc/

(function() {
  "use strict";

  const onOffButton = document.querySelector(".switch");

  function switchButton() {
    onOffButton.classList.add("on");
  }
  onOffButton.addEventListener("click", switchButton);
})();
9

This was my attempt, you were able to do it in less steps.

https://jsfiddle.net/v0hLfawg/

10

Yes.

You should probably also remove the click handler after it has clicked once or else it will keep working when its not needed (although it won’t do anything). It just tidies things up I believe.

But that would be a question for the JS forum to confirm.

(Finished for the night now, Back some time tomorrow.)

1 Like
12

How is the overflow removed?
https://jsfiddle.net/h7bc2Lgu/1/

14

It’s not needed to be removed and if it was needed then it’s there for a reason.

No one has a device that is less than 150px wide and if they did then they would want to scroll so removing the scrollbar is not an option. It rarely ever is the right option.

Think about it logically: The only people who will see the scrollbar are the ones who will need it.

2 Likes
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.