Slot Machine Transition
If you are making a slot machine game or you want to add a slot machine effect on your webpage content then this code is useful for you. To learn how to create this effect watch the tutorial video or copy the source code from below to use.
Source code
1. HTML
<div class="base">
<div class="letter-one">
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td>F</td>
</tr>
<tr>
<td>G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
</tr>
<tr>
<td>J</td>
</tr>
<tr>
<td>K</td>
</tr>
<tr>
<td>L</td>
</tr>
<tr>
<td>M</td>
</tr>
<tr>
<td>N</td>
</tr>
<tr>
<td>O</td>
</tr>
<tr>
<td>P</td>
</tr>
<tr>
<td>Q</td>
</tr>
<tr>
<td>R</td>
</tr>
<tr>
<td>S</td>
</tr>
<tr>
<td>T</td>
</tr>
<tr>
<td>U</td>
</tr>
<tr>
<td>V</td>
</tr>
<tr>
<td>W</td>
</tr>
<tr>
<td>X</td>
</tr>
<tr>
<td>Y</td>
</tr>
<tr>
<td>Z</td>
</tr>
</table>
</div>
<div class="letter-two">
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td>F</td>
</tr>
<tr>
<td>G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
</tr>
<tr>
<td>J</td>
</tr>
<tr>
<td>K</td>
</tr>
<tr>
<td>L</td>
</tr>
<tr>
<td>M</td>
</tr>
<tr>
<td>N</td>
</tr>
<tr>
<td>O</td>
</tr>
<tr>
<td>P</td>
</tr>
<tr>
<td>Q</td>
</tr>
<tr>
<td>R</td>
</tr>
<tr>
<td>S</td>
</tr>
<tr>
<td>T</td>
</tr>
<tr>
<td>U</td>
</tr>
<tr>
<td>V</td>
</tr>
<tr>
<td>W</td>
</tr>
<tr>
<td>X</td>
</tr>
<tr>
<td>Y</td>
</tr>
<tr>
<td>Z</td>
</tr>
</table>
</div>
<div class="letter-three">
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td>F</td>
</tr>
<tr>
<td>G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
</tr>
<tr>
<td>J</td>
</tr>
<tr>
<td>K</td>
</tr>
<tr>
<td>L</td>
</tr>
<tr>
<td>M</td>
</tr>
<tr>
<td>N</td>
</tr>
<tr>
<td>O</td>
</tr>
<tr>
<td>P</td>
</tr>
<tr>
<td>Q</td>
</tr>
<tr>
<td>R</td>
</tr>
<tr>
<td>S</td>
</tr>
<tr>
<td>T</td>
</tr>
<tr>
<td>U</td>
</tr>
<tr>
<td>V</td>
</tr>
<tr>
<td>W</td>
</tr>
<tr>
<td>X</td>
</tr>
<tr>
<td>Y</td>
</tr>
<tr>
<td>Z</td>
</tr>
</table>
</div>
</div>
The code creates a div with the class name "base". Inside the div, there are three divs with the class names "letter-one", "letter-two", and "letter-three". Each of these divs contains a table with 26 rows, each of which contains a single letter of the alphabet.
The code uses the class attribute to give each of the divs a unique name. This allows the code to style the divs differently, or to target them with JavaScript.
The code also uses the table element to create a table of 26 rows and 1 column. Each row in the table contains a single letter of the alphabet.
2. CSS
STEP-1
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
It sets the margin, padding, and box-sizing properties of all elements to 0. This means that the width and height of an element will only include the content of the element, not the margin, padding, or border.
In short, the code will reset the default styles of HTML elements and make it easier to control the size and layout of your web pages.
STEP-2
.base{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
The height: 100vh property sets the height of the element to the full height of the viewport.
The display: flex property tells the browser to display the element as a flex container.
The align-items: center property aligns the children of the flex container vertically in the center.
The justify-content: center property aligns the children of the flex container horizontally in the center.
In other words, this code will make the element fill the full height of the viewport and center its children both horizontally and vertically.
STEP-3
table{
border-collapse: collapse;
}
The border-collapse property can have two values: separate and collapse. The default value is separate, which means that each cell will have its own separate border. The collapse value tells the browser to join the borders of adjacent cells together.
STEP-4
.letter-one, .letter-two, .letter-three{
height: 100px;
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
font-size: 90px;
background-color: aqua;
}
This code is a CSS selector that will apply the following styles to three elements with the class names letter-one, letter-two, and letter-three:
The height of each element will be 100px.
The overflow will be hidden, so any text that is too long to fit within the element will be cropped.
The text will be aligned to the center of the element.
The elements will be displayed as flex items, with the flex direction set to column. This means that the
elements will be stacked vertically.
elements will be stacked vertically.
The font size will be 90px.
The background color will be aqua.
STEP-5
.letter-one tr{
--ch:-5;
animation: scroll 1s 1s linear forwards;
}
The first line of the code, --ch:-5, sets a custom property called ch to the value -5. This property controls the amount of horizontal scrolling that is applied to the table row. The second line of the code, animation: scroll 1s 1s linear forwards, defines an animation that scrolls the table row to the left by 5 characters over the course of 1 second. The animation is linear, which means that the speed of the scroll is constant. The animation is also forwards, which means that it scrolls to the left.
STEP-6
.letter-two tr{
--ch:-20;
animation: scroll 3s 1s linear forwards;
}
.letter-two tr - This selector targets all tr elements in the .letter-two class.
--ch:-20 - This variable defines the initial scroll position of the tr elements.
animation: scroll 3s 1s linear forwards - This declaration defines the animation. The scroll animation name is used to scroll the tr elements. The animation will last for 3 seconds, with a 1 second delay before it starts. The linear timing function will cause the animation to scroll at a constant speed. The forwards animation fill mode will cause the target to retain the computed values set by the last keyframe encountered during execution.
STEP-7
.letter-three tr{
--ch:-13;
animation: scroll 2s 1s linear forwards;
}
The element is identified by the class name letter-three, and the animation will cause the element to scroll up by 13 pixels over the course of 2 seconds. The animation will start immediately after the page loads, and it will repeat indefinitely.
The code can be broken down into two parts:
The first part, --ch:-13, specifies the amount of scrolling that will occur. The --ch property is a CSS variable, and in this case it is set to the value -13. This means that the element will scroll up by 13 pixels.
The second part, animation: scroll 2s 1s linear forwards, specifies the duration, delay, and timing of the animation. The animation property takes a list of one or more animation names as its value. In this case, the only animation name is scroll. The scroll animation will cause the element to scroll up by 13 pixels over the course of 2 seconds. The 2s value specifies the duration of the animation, and the 1s value specifies the delay before the animation starts. The linear timing function specifies that the animation will progress at a constant speed. The forwards keyword specifies that the animation will play once, from beginning to end.
STEP-8
@keyframes scroll {
to{
transform: translateY(calc(var(--ch) * 100%));
}
}
The animation has one keyframe, which is the to keyframe. The to keyframe specifies the final state of the animation. In this case, the to keyframe specifies that the element's transform property should be set to translateY(calc(var(--ch) * 100%)).
The var(--ch) variable is a custom variable that is defined in the CSS. The value of the var(--ch) variable is the height of the element that is being animated. So, the to keyframe is essentially saying that the element should be scrolled to its full height.
The calc() function is used to calculate the value of the translateY property. The calc() function takes a mathematical expression as its input and returns the calculated value. In this case, the mathematical expression is var(--ch) * 100%. This expression calculates the height of the element as a percentage of the viewport height.
So, the overall effect of this code snippet is to scroll the element to its full height.
---END---
Comments
Post a Comment