Gamified raffle with CSS

Project Showcase
1

As part of the gamification process, I am trying to develop an animated raffle based on random numbers (connected to random CSS variables) and prizes/boosters.

This is the first result, any suggestion is welcome!
ezgif.com-gif-maker (1)

Sorry for the video quality, don’t know how to add a video here :frowning:

2

Looks great!

For videos, what we usually use is Loom.

3

Thanks! ThinhDinh appreciated

4

Ha. Love me some Hearthstone. Nice concept! Would love to see the CSS behind this screen.

5

Looks amazing! Would love to see more as well

6

Sure, with pleasure.
This is the table (very basic so far)

img1
img12792×474 130 KB

So any line of the Raffle table is a prize (or nothing), there are 2 list (one with super powers and one without, but the mechanism is the same)

  • WinState = for visibility purpose
  • WinPrize = some text
  • CSS Values > see below
  • CSS = the formula to create the CSS

The CSS is pretty easy

  • 3 columns of table with different images, icons, text, whatever you like
  • the animation will move the 3 columns to reach a Value … the value is what you want to show in the line.

So let’s make an example

  • line 1 > prize 1 > 3 gifts icons (or WIN text) > you have to stop the animation at the right element of the table (for me 6 or 11)

This is the CSS code

 *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .base{
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    table{
        border-collapse: collapse;
    }
tr{height: 100px;}
    .letter-one, .letter-two, .letter-three{
        height: 100px; /* size of the "central" box */
        overflow: hidden; /* This is the trick, if you remove this line you will see the columns */
        text-align: center;
        display: flex; /* we want to see columns "aligned" vertically */
        flex-direction: column;
        font-size: 90px; /* size of the icon, text */
        background-color: #c5eceb; /* color of the box */
    }
    .letter-one tr{
      --ch:-11; /* This is the stop point for column 1, you can control it through CSS Values in the table */
      animation: scroll 1s 1s linear forwards;
    }
    .letter-two tr{
      --ch:-6; /* This is the stop point for column 2, you can control it through CSS Values in the table */
      animation: scroll 3s 1s linear forwards;
    }
    .letter-three tr{
      --ch:-6; /* This is the stop point for column 3, you can control it through CSS Values in the table */
      animation: scroll 2s 1s linear forwards;
    }
    @keyframes scroll {
      to{
        transform: translateY(calc(var(--ch) * 100%));
      }
    }

And the HTML generated is like this (you need to create 3/4/5… how many columns you like

<div class="base">
    <div class="letter-one"> 
      <table>
          <tr>
              <td>😂</td>
          </tr>
          <tr>
              <td>😎</td>
          </tr>
          <tr>
              <td>🤐</td>
          </tr>
          <tr>
              <td>😥</td>
          </tr>
          <tr>
              <td>💎</td>
          </tr>
          <tr>
              <td>😠</td>
          </tr>
          <tr>
              <td>⚡</td>
          </tr>
          <tr>
              <td>😡</td>
          </tr>
          <tr>
              <td>🫥</td>
          </tr>
          <tr>
              <td>😥</td>
          </tr>
          <tr>
              <td>🥱</td>
          </tr>
          <tr>
              <td>🎁</td>
          </tr>
          <tr>
              <td>😊</td>
          </tr>
          <tr>
              <td>😎</td>
          </tr>
          <tr>
              <td>⚡</td>
          </tr>
          <tr>
              <td>🎁</td>
          </tr>
          <tr>
              <td>🤐</td>
          </tr>
          <tr>
              <td>🙂</td>
          </tr>
          <tr>
              <td>😫</td>
          </tr>
          <tr>
              <td>🤩</td>
          </tr>
          <tr>
              <td>😶</td>
          </tr>
          <tr>
              <td>😥</td>
          </tr>
          <tr>
              <td>🙄</td>
          </tr>
          <tr>
              <td>😭</td>
          </tr>
          <tr>
              <td>🤯</td>
          </tr>
          <tr>
              <td>😨</td>
          </tr>
      </table>
    </div>

If it’s not enough clear, please ask I added some comments to make it easier to understand.

7

Here is the full code, just copy/past in a Rich text and it will work :slight_smile:
No comments here sorry, but you can follow the code in the previous post.
I added a bit of padding to see part of the previous and next icon/text and borders.

Later I will try to add an image overlay to make it more professional

 <pre><span><style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .base{
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    table{
        border-collapse: collapse;
    }
tr{height: 100px;}

    .letter-one, .letter-two, .letter-three{
        height: 150px;
        padding-top: 25px;
        overflow: hidden;
        text-align: center;
        display: flex;
        flex-direction: column;
        font-size: 90px;
        background-color: #fbf5ff;
    }

 .letter-two{
border-left: 2px solid #be5cff;
border-right: 2px solid #be5cff;
}

    .letter-one tr{
      --ch:-6;
      animation: scroll 1s 1s linear forwards;
    }
    .letter-two tr{
      --ch:-6;
      animation: scroll 3s 1s linear forwards;
    }
    .letter-three tr{
      --ch:-6;
      animation: scroll 2s 1s linear forwards;
    }
    @keyframes scroll {
      to{
        transform: translateY(calc(var(--ch) * 100%));
      }
    }

  </style>
</span></pre>
  <div class="base">
    <div class="letter-one">
      <table>
          <tr>
              <td>😂</td>
          </tr>
          <tr>
              <td>😎</td>
          </tr>
          <tr>
              <td>🤐</td>
          </tr>
          <tr>
              <td>😥</td>
          </tr>
          <tr>
              <td>💎</td>
          </tr>
          <tr>
              <td>😠</td>
          </tr>
          <tr>
              <td>⚡</td>
          </tr>
          <tr>
              <td>😡</td>
          </tr>
          <tr>
              <td>🫥</td>
          </tr>
          <tr>
              <td>😥</td>
          </tr>
          <tr>
              <td>🥱</td>
          </tr>
          <tr>
              <td>🎁</td>
          </tr>
          <tr>
              <td>😊</td>
          </tr>
          <tr>
              <td>😎</td>
          </tr>
          <tr>
              <td>⚡</td>
          </tr>
          <tr>
              <td>🎁</td>
          </tr>
          <tr>
              <td>🤐</td>
          </tr>
          <tr>
              <td>🙂</td>
          </tr>
          <tr>
              <td>😫</td>
          </tr>
          <tr>
              <td>🤩</td>
          </tr>
          <tr>
              <td>😶</td>
          </tr>
          <tr>
              <td>😥</td>
          </tr>
          <tr>
              <td>🙄</td>
          </tr>
          <tr>
              <td>😭</td>
          </tr>
          <tr>
              <td>🤯</td>
          </tr>
          <tr>
              <td>😨</td>
          </tr>
      </table>
    </div>
    <div class="letter-two">
       <table>
          <tr>
              <td>😂</td>
          </tr>
          <tr>
              <td>😎</td>
          </tr>
          <tr>
              <td>🤐</td>
          </tr>
          <tr>
              <td>😥</td>
          </tr>
          <tr>
              <td>💎</td>
          </tr>
          <tr>
              <td>😠</td>
          </tr>
          <tr>
              <td>⚡</td>
          </tr>
          <tr>
              <td>😡</td>
          </tr>
          <tr>
              <td>🫥</td>
          </tr>
          <tr>
              <td>😥</td>
          </tr>
          <tr>
              <td>🥱</td>
          </tr>
          <tr>
              <td>🎁</td>
          </tr>
          <tr>
              <td>😊</td>
          </tr>
          <tr>
              <td>😎</td>
          </tr>
          <tr>
              <td>⚡</td>
          </tr>
          <tr>
              <td>🎁</td>
          </tr>
          <tr>
              <td>🤐</td>
          </tr>
          <tr>
              <td>🙂</td>
          </tr>
          <tr>
              <td>😫</td>
          </tr>
          <tr>
              <td>🤩</td>
          </tr>
          <tr>
              <td>😶</td>
          </tr>
          <tr>
              <td>😥</td>
          </tr>
          <tr>
              <td>🙄</td>
          </tr>
          <tr>
              <td>😭</td>
          </tr>
          <tr>
              <td>🤯</td>
          </tr>
          <tr>
              <td>😨</td>
          </tr>
      </table>
    </div>
    <div class="letter-three">
      <table>
          <tr>
              <td>😂</td>
          </tr>
          <tr>
              <td>😎</td>
          </tr>
          <tr>
              <td>🤐</td>
          </tr>
          <tr>
              <td>😥</td>
          </tr>
          <tr>
              <td>💎</td>
          </tr>
          <tr>
              <td>😠</td>
          </tr>
          <tr>
              <td>⚡</td>
          </tr>
          <tr>
              <td>😡</td>
          </tr>
          <tr>
              <td>🫥</td>
          </tr>
          <tr>
              <td>😥</td>
          </tr>
          <tr>
              <td>🥱</td>
          </tr>
          <tr>
              <td>🎁</td>
          </tr>
          <tr>
              <td>😊</td>
          </tr>
          <tr>
              <td>😎</td>
          </tr>
          <tr>
              <td>⚡</td>
          </tr>
          <tr>
              <td>🎁</td>
          </tr>
          <tr>
              <td>🤐</td>
          </tr>
          <tr>
              <td>🙂</td>
          </tr>
          <tr>
              <td>😫</td>
          </tr>
          <tr>
              <td>🤩</td>
          </tr>
          <tr>
              <td>😶</td>
          </tr>
          <tr>
              <td>😥</td>
          </tr>
          <tr>
              <td>🙄</td>
          </tr>
          <tr>
              <td>😭</td>
          </tr>
          <tr>
              <td>🤯</td>
          </tr>
          <tr>
              <td>😨</td>
          </tr>
      </table>
    </div>
  </div>
8

Amazing. Can’t wait to try this one out.

9

Happy to read about it, I started with your video about gamifying the experience. Honored to give something back.

And by the way, the Win animation and the card, have a delay (4s) >= to the time you need to reach the final state in the slot/raffle (3,5s) , so the effect will be… suspense (slot), result, new animation

Here is the code for the Win text / Image

<pre><span><style>

@-webkit-keyframes tracking-in-expand-fwd-bottom {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px) translateY(500px);
            transform: translateZ(-700px) translateY(500px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes tracking-in-expand-fwd-bottom {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px) translateY(500px);
            transform: translateZ(-700px) translateY(500px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}


.wonalert, .sc-laRPJI {
	-webkit-animation: tracking-in-expand-fwd-bottom 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) 4s both;
	        animation: tracking-in-expand-fwd-bottom 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) 4s both;
text-align: center;
}
</style></span></pre>
<br/><br/>
<h3 class="wonalert">You won a super power</h3>