# Gamified raffle with CSS

**URL:** <https://community.glideapps.com/t/gamified-raffle-with-css/50229>\
**Category:** Project Showcase\
**Created:** [September 26, 2022, 10:15pm UTC](https://community.glideapps.com/t/gamified-raffle-with-css/50229 "2022-09-26T22:15:33Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fab3r](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fab3r/32/45722_2.png) [@Fab3r](https://community.glideapps.com/u/Fab3r)\
**Post date:** [September 26, 2022, 10:15pm UTC](https://community.glideapps.com/t/gamified-raffle-with-css/50229/1 "2022-09-26T22:15:33Z")

</div>

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)](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/1/01b670712ad4a087d7395ce68eb71c96265713ba.gif)

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 27, 2022, 12:41am UTC](https://community.glideapps.com/t/gamified-raffle-with-css/50229/2 "2022-09-27T00:41:36Z")

</div>

Looks great!

For videos, what we usually use is [Loom](https://www.loom.com/).

---

<div class="post-metadata">

**Author:** ![Fab3r](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fab3r/32/45722_2.png) [@Fab3r](https://community.glideapps.com/u/Fab3r)\
**Post date:** [September 27, 2022, 8:00am UTC](https://community.glideapps.com/t/gamified-raffle-with-css/50229/3 "2022-09-27T08:00:05Z")

</div>

Thanks! ThinhDinh appreciated

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [September 27, 2022, 12:00pm UTC](https://community.glideapps.com/t/gamified-raffle-with-css/50229/4 "2022-09-27T12:00:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![justinjmp](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/justinjmp/32/43205_2.png) [@justinjmp](https://community.glideapps.com/u/justinjmp)\
**Post date:** [September 27, 2022, 12:05pm UTC](https://community.glideapps.com/t/gamified-raffle-with-css/50229/5 "2022-09-27T12:05:01Z")

</div>

Looks amazing! Would love to see more as well

---

<div class="post-metadata">

**Author:** ![Fab3r](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fab3r/32/45722_2.png) [@Fab3r](https://community.glideapps.com/u/Fab3r)\
**Post date:** [September 27, 2022, 12:22pm UTC](https://community.glideapps.com/t/gamified-raffle-with-css/50229/6 "2022-09-27T12:22:16Z")

</div>

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

 ![img1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/c/5ce0f0e97bec3061d0e51d564cf555f08c9a3497.jpeg)

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

```auto
 *{
      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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Fab3r](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fab3r/32/45722_2.png) [@Fab3r](https://community.glideapps.com/u/Fab3r)\
**Post date:** [September 27, 2022, 12:24pm UTC](https://community.glideapps.com/t/gamified-raffle-with-css/50229/7 "2022-09-27T12:24:31Z")

</div>

Here is the full code, just copy/past in a Rich text and it will work 🙂  
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

```auto
 <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>

```

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [September 27, 2022, 12:29pm UTC](https://community.glideapps.com/t/gamified-raffle-with-css/50229/8 "2022-09-27T12:29:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Fab3r](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fab3r/32/45722_2.png) [@Fab3r](https://community.glideapps.com/u/Fab3r)\
**Post date:** [September 27, 2022, 12:32pm UTC](https://community.glideapps.com/t/gamified-raffle-with-css/50229/9 "2022-09-27T12:32:53Z")

</div>

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

```auto
<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>

```