Back

Implementing an Interactive Gravity-Activated Toggle Switch

Explore the world of playful interfaces with a toggle switch that defies gravity, giving your settings panel a whimsical touch.

HTML

To create our HTML structure, begin with a wrapper div called "gravity-switch" for overall styling and functionality. Inside this wrapper, establish a "switch-container" div to hold the switch mechanism. This container includes two divs labeled "switch-left" and "switch-right" for OFF and ON displays, respectively, positioning the interactive switch ball in the middle with "switch-ball".

        <div class="gravity-switch">
          <div class="switch-container">
            <div class="switch-left">OFF</div>
            <div class="switch-ball"></div>
            <div class="switch-right">ON</div>
          </div>
        </div>

JavaScript

Our JavaScript allows for toggling between the states. We add an event listener to the "gravity-switch" div, which toggles the "active" class on the "switch-container" div whenever it's clicked. This class switch will trigger changes in our CSS to adjust positioning and colors.

        document.querySelector('.gravity-switch').addEventListener('click', function() {
          let container = document.querySelector('.switch-container');
          container.classList.toggle('active');
        });

CSS

We employ CSS to craft a tactile, visually dynamic switch. The foundation is built with a softly-rounded "gravity-switch" that employs a box-shadow to create a mild 3D effect. The "switch-container" is positioned as a flex container to evenly distribute and align content with a circle icon that represents the toggle state - styled my "switch-ball". This circle shifts position and changes color upon activation.

        .gravity-switch {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 200px;
          height: 50px;
          background: linear-gradient(145deg, #e6e6e6, #ffffff);
          border-radius: 25px;
          box-shadow: 4px 4px 8px #aaaaaa, -4px -4px 8px #ffffff;
          cursor: pointer;
          margin: 20px auto;
        }

The circular "switch-ball", colored and set to transition smoothly, enhances the sense of being pulled by gravity when the switch is activated by the user. Utilizing properties like position and transition changes the layout dynamically.

        .switch-container {
          position: relative;
          display: flex;
          width: 100%;
          height: 100%;
          border-radius: 25px;
          overflow: hidden;
          background: #f7f7f7;
          transition: background-color 0.5s;
        }

        .switch-ball {
          position: absolute;
          top: 50%;
          left: 5px;
          width: 40px;
          height: 40px;
          background-color: #02a8f4;
          border-radius: 50%;
          transform: translateY(-50%);
          transition: left 0.5s, background-color 0.5s;
        }

        .switch-left, .switch-right {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 50%;
          font-weight: bold;
          color: #bbbbbb;
          transition: color 0.5s;
        }

        .switch-container.active > .switch-ball {
          left: calc(100% - 45px);
          background-color: #32ffcc;
        }

        .switch-container.active > .switch-left {
          color: #02a8f4;
        }

        .switch-container.active > .switch-right {
          color: #32ffcc;
        }

This creative use of movement and transition reflects a more engaging and interactive user experience, ultimately adding a dash of magic to routine settings adjustment.

Whole code

<div class="gravity-switch">
  <div class="switch-container">
    <div class="switch-left">OFF</div>
    <div class="switch-ball"></div>
    <div class="switch-right">ON</div>
  </div>
</div>


<script>
document.querySelector('.gravity-switch').addEventListener('click', function() {
  let container = document.querySelector('.switch-container');
  container.classList.toggle('active');
});
</script>

<style>
.gravity-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  background: linear-gradient(145deg, #e6e6e6, #ffffff);
  border-radius: 25px;
  box-shadow: 4px 4px 8px #aaaaaa, -4px -4px 8px #ffffff;
  cursor: pointer;
  margin: 20px auto;
}
.switch-container {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  overflow: hidden;
  background: #f7f7f7;
  transition: background-color 0.5s;
}
.switch-ball {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 40px;
  height: 40px;
  background-color: #02a8f4;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: left 0.5s, background-color 0.5s;
}
.switch-left, .switch-right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  font-weight: bold;
  color: #bbbbbb;
  transition: color 0.5s;
}
.switch-container.active > .switch-ball {
  left: calc(100% - 45px);
  background-color: #32ffcc;
}
.switch-container.active > .switch-left {
  color: #02a8f4;
}
.switch-container.active > .switch-right {
  color: #32ffcc;
}

</style>

Implementing an Interactive Gravity-Activated Toggle Switch

HTML

JavaScript

CSS

Whole code

Comments

More inputs

Similar

See also