Adding Custom CSS into Twitch Alerts Events List. Now, log into your Twitch Alert’s Dashboard. From here, click “Event List” – once the page is loaded, click the drop down in the themes section and change it to “Custom CSS”. Right click inside the text box and hit Paste. At this point, you’re almost ready to go! Slot Machine – The Fruits is a HTML5 casino game. Enjoy this coloured slot machine with classic fruit symbols! This game has been developed in HTML5/js and third-party library CreateJs – htt.
Navigation is one of the things you'll see on every website. I wanted to give this part a little bit extra life, and when I saw a movie yesterday that included slot machines, it suddenly hit me. Using jQuery and some basic CSS and HTML, we could add some sweet slot machine style animation to a normally boring kind of navigation. So, for today, we'll be creating a slot machine style navigation that you could use on your website.
Already wondering how it works? Check out how you can create this slot machine yourself. Of course, this could easily be transported to be used with social media buttons (instead of the main navigation of your site).
HTML
As usual, we want to keep our HTML as short and clean as possible. We'll simply use an unordered list that'll contain links. We'll style it later on with CSS.
Take note of the different class and id attributes we need to use. All the links have a different class, since we'll need to reference it from the CSS.
This is all the HTML we need to make this example work. Now to add some style using CSS.
CSS
Although the CSS isn't very spectacular, there is something that is the actual key to make this technique work. Let's take a look at the first part.
Nothing really much going on over here. Just some links that are placed in a horizontal row with a fixed with and height. But it's the last line that is very important: The background-image is set.
Since we didn't set the background-repeat or background-position properties, the bottons.png image will be placed on a 0, 0 (top left) position and will be repeated all over. We'll be using CSS sprites for this technique.
Now you'll see why all the links have different classes. We need to set the background-position property, to show the correct button.
We now have the base of what we need to make the slot machine work. All the links are in place, and the background-position is all correct. Now to make some magic happen with jQuery.
jQuery
First things first: We need the Background-Position Animations plugin, since we need to animate the background-position property (by default, jQuery can't do this). We'll also use the jQuery Easing Plugin to use some custom animation. Ofcourse, we'll need the jQuery core to make this all work.
Before we handle the hover() function, we'll need to do some preperation. We need to capture the original X position of the button, since we'll need to animate back to that value later on. We'll also set the default Y position to 0 (top), which will be increased by the hover() action later on.
Now that we have all that, we can finally go on with the core of this technique: the hover() event.
Let's break it down a little bit. The newYpos value from the element is increased by one. By doing this (and using it later on with the animate function), we ensure the button will slide down forever, giving it the slot machine effect. Since the background image is repeated, we'll always see a copy of the same image over and over. We'll use the originalXpos to maintain the same character, so it will not look odd.
The onMouseOver (first function) is slightly faster than the onMouseOut (second function), but you can change that if you want. This also counts for the easing effect, which is now set to easeInCirc and easeOutCirc (both from the easing plugin).
That's about it! All the code your need to create a nifty looking slot machine navigation.
Hi there, you probably seen this done many times on web sites before. You get to the site and as you scroll elements will animate in (ex bounce, fade in etc). Today we are going to learn how to do this quickly. For this tutorial we are going to use animate.css this file will have all of our animations already created and you can just pick the ones you want to use. The whole scroll magic will come from a small script called Wow.js All you have to do is drop it into your page and you are done.
Final Result
See the Pen mejvpj
What we will use:
- animate.css – can be downloaded here
- wow.js – can be downloaded here
Setup
The reason we are using animate.css is because it comes pre built with almost all animations you can think of. For production i would suggest just copying only the animations that you are using out of the file to keep the size down. If you are just interested in fade animations (up, down, left, right etc) check out our CSS snippet with just fade animations. Of course you can create your own animations as well.
We even have a tutorial on how to create animations on page load if you want to get your hands dirty and do it yourself.
First things first import our files:
We are using CloudFlare CDN services (cdnjs.com which you should too to save on your bandwidth!) to load our files. If you are using WordPress make sure to load the js files appropriately (this makes sure the files won’t conflict with other things you might have going on). Just place this inside your functions.php file in your theme folder (again do this only if you are using WordPress)
Now we just need to add initialization of our script on to the html page itself:
If you are using WordPress you can add this to your footer.php or header.php file or inject it using a hook.
You are all done with the setup! If you are using a custom animation css instead of animate.css then you have to tweak the above line and use an option flag to use a different animation trigger other than ‘animated’ (see the codepen source since it has that option)
All the hard work is now done. Now just add the appropriate CSS too items you want to animate on scroll.
Creating basic html
Let’s create basic html with boxes so we can see our example in action. All we have to do is add the class wow to items you want to animate on scroll as well as the animation you want to use example fadeInLeft . Class wow will trigger the animation that you have selected. So your div might look like this:
Next lets add quick css to style our box:
Slot Machine Scrolling Animation Css W3schools
The final html should look like this:
Scrolling Animation Css
That’s it!
The possibilities are endless! Just remember to not over do it. Share your experience in the comments, and where you think this technique is used the best.