Trigger Multiple Javascript Roll Functions from 1 Click Event

JavaScript
1

I’m working a project that has 4 rollover images side by side. I need to animate multiple rollover states depending on the button clicked. I included a graphic to help better explain what I’m talking about. Let me first apologize if this sounds confusing. I’m trying to explain it the best I can.

The script needs to work like this

If the number is higher all numbers to the right of the clicked number barrel rolls down. If this is the case numbers need to roll in sequence down.

If the number is lower all numbers to the right of the clicked number barrel rolls up. If this is the case numbers need to roll in sequence up.

I’m not a Javascript programmer, but I need something that something that has the proper logic like the code below.

Greater than conditions

if (button < 1) {
    barrel-roll-button-2 = "down";
    barrel-roll-button-3 = "down";
    barrel-roll-button-4 = "down";
}
else if (button < 2) {
    barrel-roll-button-3 = "down";
    barrel-roll-button-4 = "down";
}
else (button < 3) {
    barrel-roll-button-4 = "down";
}

Less than conditions

if (button > 4) {
    barrel-roll-button-4 = "up";
    barrel-roll-button-3 = "up";
    barrel-roll-button-2 = "up";
}
else if (button > 3) {
    barrel-roll-button-3 = "up";
    barrel-roll-button-2 = "up";
}
else if (button > 2) {
    barrel-roll-button-2 = "up";
}

Basically, if the number clicked is lower than the others the numbers to the right should barrel roll down in numerical sequence. If the number clicked is higher than the others the numbers to the right should barrel roll up in numerical sequence.

If 1 is clicked 2,3 & 4 should roll down. If 4 is clicked 3,2 & 1 should roll up. If 2 is clicked 3 & 4 should roll down etc, etc.

684×947 112 KB

2

Hey Luke,

When I’m working on UI’s like this I always try to solve the bulk of the problem in CSS first, that can really simplify the js.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.spinners {
  display: flex;
  flex-direction: row;
  height: 100px;
  overflow: hidden;
  width: 440px;
}
.spinner {
  flex: 1;
  transition: .3s;
  transform: translate(0, -100%);
}
.spinner-inner {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.spinner-inner:first-child {
  background: #ccc;
}
.spinner-inner:last-child {
  background: #eee;
}

.spinners:hover .spinner {
  transform: translate(0, 0);
}
.spinners .spinner:hover + .spinner {
  transform: translate(0, -70%);
}
.spinners .spinner:hover + .spinner + .spinner {
  transform: translate(0, -80%);
}
.spinners .spinner:hover + .spinner + .spinner + .spinner {
  transform: translate(0, -90%);
}
</style>
</head>
<body>
<div class="spinners">
  <div class="spinner spinner-1">
    <div class="spinner-inner">1</div>
    <div class="spinner-inner">1</div>
  </div>
  <div class="spinner spinner-2">
    <div class="spinner-inner">2</div>
    <div class="spinner-inner">2</div>
  </div>
  <div class="spinner spinner-3">
    <div class="spinner-inner">3</div>
    <div class="spinner-inner">3</div>
  </div>
  <div class="spinner spinner-4">
    <div class="spinner-inner">4</div>
    <div class="spinner-inner">4</div>
  </div>
</div>
</body>
</html>

Ok, that’s as close as I got to a pure css solution, I’d keep most of that but add a little js to add a class to the parent specifying which one is rolled over.

Here’s the js solution

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.spinners {
  display: flex;
  flex-direction: row;
  height: 100px;
  overflow: hidden;
  width: 440px;
}
.spinner {
  flex: 1;
  transition: .3s;
  transform: translate(0, -100%);
}
.spinner-inner {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.spinner-inner:first-child {
  background: #ccc;
}
.spinner-inner:last-child {
  background: #eee;
}

.spinner-1-active .spinner-1,
.spinner-2-active .spinner-1,
.spinner-2-active .spinner-2,
.spinner-3-active .spinner-1,
.spinner-3-active .spinner-2,
.spinner-3-active .spinner-3,
.spinner-4-active .spinner-1,
.spinner-4-active .spinner-2,
.spinner-4-active .spinner-3,
.spinner-4-active .spinner-4 {
  transform: translate(0, 0);
}
.spinner-1-active .spinner-2,
.spinner-2-active .spinner-3,
.spinner-3-active .spinner-4 {
  transform: translate(0, -70%);
}
.spinner-1-active .spinner-3,
.spinner-2-active .spinner-4 {
  transform: translate(0, -80%);
}
.spinner-1-active .spinner-4 {
  transform: translate(0, -90%);
}
</style>
</head>
<body>
<div class="spinners">
  <div class="spinner spinner-1">
    <div class="spinner-inner">1</div>
    <div class="spinner-inner">1</div>
  </div>
  <div class="spinner spinner-2">
    <div class="spinner-inner">2</div>
    <div class="spinner-inner">2</div>
  </div>
  <div class="spinner spinner-3">
    <div class="spinner-inner">3</div>
    <div class="spinner-inner">3</div>
  </div>
  <div class="spinner spinner-4">
    <div class="spinner-inner">4</div>
    <div class="spinner-inner">4</div>
  </div>
</div>
<script type="text/javascript">
var spinners = document.querySelector('.spinners')
spinners.addEventListener('click', function(event) {
  var el = event.target.parentNode
  if (!el.classList.contains('spinner')) return

  spinners.className = 'spinners ' + el.classList[1] + '-active'
})
</script>
</body>
</html>
3

Looking at the image again, I’m a little confused of the exact style you’re looking for but hopefully this gives you a few ways to look at it.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.spinners {
  display: flex;
  flex-direction: row;
  height: 100px;
  overflow: hidden;
  width: 440px;
}
.spinner {
  flex: 1;
  transition: .3s;
  transform: translate(0, -100%);
}
.spinner-inner {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.spinner-inner:first-child {
  background: #ccc;
}
.spinner-inner:last-child {
  background: #eee;
}

.spinner-1-active .spinner-1,
.spinner-1-active .spinner-2,
.spinner-1-active .spinner-3,
.spinner-1-active .spinner-4,
.spinner-2-active .spinner-2,
.spinner-2-active .spinner-3,
.spinner-2-active .spinner-4,
.spinner-3-active .spinner-3,
.spinner-3-active .spinner-4,
.spinner-4-active .spinner-4 {
  transform: translate(0, 0);
}
.spinner-1-active .spinner-2,
.spinner-2-active .spinner-3,
.spinner-3-active .spinner-4 {
  transition-delay: .1s;
}
.spinner-1-active .spinner-3,
.spinner-2-active .spinner-4 {
  transition-delay: .2s;
}
.spinner-1-active .spinner-4 {
  transition-delay: .3s;
}
</style>
</head>
<body>
<div class="spinners">
  <div class="spinner spinner-1">
    <div class="spinner-inner">1</div>
    <div class="spinner-inner">1</div>
  </div>
  <div class="spinner spinner-2">
    <div class="spinner-inner">2</div>
    <div class="spinner-inner">2</div>
  </div>
  <div class="spinner spinner-3">
    <div class="spinner-inner">3</div>
    <div class="spinner-inner">3</div>
  </div>
  <div class="spinner spinner-4">
    <div class="spinner-inner">4</div>
    <div class="spinner-inner">4</div>
  </div>
</div>
<script type="text/javascript">
var spinners = document.querySelector('.spinners')
spinners.addEventListener('click', function(event) {
  var el = event.target.parentNode
  if (!el.classList.contains('spinner')) return

  spinners.className = 'spinners ' + el.classList[1] + '-active'
})
</script>
</body>
</html>
1 Like
4

Thanks for your input Mark. This is so very close.

After review my criteria has changed a little bit. These animations need to now be triggered by id. So Say for instance when 1 is clicked on the keyboard that triggers the animation for #1. 2,3 and so on.

Here’s the fiddle that explains the barrel roll control as far as how they need to roll up and down.

That being said I’m going to try to explain how these elements are supposed to work. When an element is selected that is to the left of another element that element should animate up. If an element is selected that is to the right of the current selected element they should roll down.

I’ve put together the following graphics for further clarification. Each barrel roll image looks like this. 2 selected states with one in active state in the center to accommodate for animations whether they animate up or down.

921×2328 237 KB

View Larger

5

I can’t really help with the JS but maybe if you can clarify a little more what you need then it may aid a solution.:slight_smile:

" when 1 is clicked on the keyboard" ? Do you mean when the number 1 key on the keyboard is pressed as you can’t click a keyboard as such? Or do you mean you have a Number 1 drawn on the screen and outside of the barrels which is clicked with the mouse?

Or are you still clicking the barrels?

What is the default state of the barrels? Are they all blank?

Are the barrels reset to start each time you click a number or do they stay from where they just finished?

In the second image on your drawing (The Number 4 item) you show the other barrels rolling down but it seems that the numbers 2 and 3 would already be in the finished position assuming that the first part of the image was the starting point for the next image? Also assuming that all but the clicked images reveal the middle part of the number?

6

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