Zoop!

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

Differences between using CSS animation, transition, and hover.

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

Technologies

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

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

  
</head>

<body>

  <main :class="mode">
  <div v-for="num in bars" v-once @mouseover="doTheThing($event.target, mode)" :style="cssProps()"></div>
  <ul>
    <li><label><input type="radio" v-model="mode" value="anima"> animation</label></li>
    <li><label><input type="radio" v-model="mode" value="trans"> transition</label></li>
    <li><label><input type="radio" v-model="mode" value="hover"> hover</label></li>
  </ul>
  <section class="details" v-if="isAnima">
    <small><input type="range" v-model="count" min="1" max="11" @input="setIteration" /> iterations</small><br />
    <code>animation: do-it var(--timing) ease-in-out alternate {{iteration}};</code>
  </section>
  <section class="details" v-if="isTrans">
    <code>transition: transform var(--timing) ease-in-out;</code>
  </section>
</main>
  <script src='https://unpkg.com/vue@2.4.2/dist/vue.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/jasesmith/zoop-PKzOop */
div {
  --timing: calc(1000ms - calc(var(--b, 0) * 100ms));
  --moz-timing: 1000ms;
  height: 100vh;
  background: #21c2f5;
  flex: var(--b);
  min-width: 2px;
  filter: hue-rotate(var(--d));
  transform: scale(1, 0.075);
  transform-origin: 50% 50%;
  margin: 0 1px;
}
div.trans {
  transform: scale(1, 1);
}
div.anima {
  animation: do-it var(--timing) ease-in-out alternate var(--iteration, 2);
  -moz-animation: do-it var(--moz-timing) ease-in-out alternate var(--iteration, 2);
}
div:not(.anima) {
  transition: transform var(--timing) ease-in-out;
  -moz-transition: transform var(--moz-timing) ease-in-out;
}

.hover div:hover {
  transform: scale(1, 1);
}

ul {
  position: absolute;
  top: calc(50% + 10vh);
  left: 50%;
  width: 50%;
  list-style: none;
  margin: 0;
  padding: .5em 1em;
  border-radius: 2em;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 .8em 2em -.9em #000;
}

.details {
  position: absolute;
  top: calc(50% + 20vh);
  left: 50%;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

@keyframes do-it {
  to {
    transform: scale(1, 1);
  }
}
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
}

main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
}

small {
  display: inline-flex;
  align-items: center;
}


/*Downloaded from https://www.codeseek.co/jasesmith/zoop-PKzOop */
new Vue({
  el: 'main',
  data () {
    return {
      mode: 'anima',
      count: 2
    }
  },
  computed: {
    bars () {
      return this.randomInt(30,70)
    },
    isAnima () {
      return this.mode === 'anima'
    },
    isTrans () {
      return this.mode === 'trans'
    },
    iteration () {
      return this.count > 10 ? 'infinite' : this.count
    }
  },
  methods: {
    cssProps () {
      return `--a:${this.randomInt(1,100)};--b:${Math.random()};--d:${this.randomInt(1,200)}deg`
    },
    randomInt (min, max) {
      return Math.floor(Math.random() * ((max - min) + 1)) + min
    },
    setIteration () {
      this.$el.style.setProperty('--iteration', this.iteration)
    },
    doTheThing (element, mode) {
      if(mode !== 'hover') {
        element.classList.add(mode)
        element.addEventListener('transitionend', function() {
          element.classList.remove(mode)
        })
        element.addEventListener('animationend', function() {
          element.classList.remove(mode)
        })
      }
    },
  },
  watch: {
    mode () {
      this.$el.querySelectorAll('div').forEach(div => div.classList = '')
    }
  }  
})

Comments