In this tutorial I will be walking you through how to add fading in/out text to your StreamElements alerts. This tutorial is for people who are already using the Custom CSS editor on their own alerts. It is for anyone looking to edit their own or a clients existing alert.
01. Let’s Get Started
To start off you will need to log into your StreamElements account and navigate to the overlay you would like to add your fading text to. In this example I’m going to be using the existing alerts within the StreamElements overlay.
If your animation is shorter or longer you may need to adjust the timings within the code but I will walk you through everything so you will know exactly what to do.
So this is what we will have created by the end of this tutorial:
02. The Custom CSS Editor
As I said before this tutorial is for anyone looking to add a little more flair to their already custom CSS alert within StreamElements. I will be writing more tutorials for the basic setup and use of the Custom CSS editor within StreamElements for anyone looking to start out.
Click on the alert you would like to edit and then click on Open CSS Editor.
03. The jQuery
To make the text animate we will be using some jQuery within the StreamElements CSS Editor. Click on the JS tab and enter the following code:
$('.text-container').delay(500).fadeIn('slow').delay(8000).fadeOut('fast');
Let’s break down the above line of code.
**$(‘.text-container’)**To start we call the div we would like to target. This is the div that contains the text you would like to fade in/out.You will need to change .text-container to the div in your own alert.
**.delay(500)**After targeting the div we use .delay(500) to delay the text animation starting for .5 of a second. This is so that the text appears when the graphic animation starts. You can adjust this to suit your own alert. 1000 = 1 second.
**.fadeIn(‘slow’)**This part of the code is telling the div what we would like it to do. In this case we want it to fade in slowly. You can change ‘slow’ to a value like the delay function or you can use ‘fast’ or ‘slow’.
**.delay(8000)**This second delay is telling the div how long we want it to show on the screen for. Again, change this to suit your own alert, remembering that 1000 = 1 second.
**.fadeOut(‘fast’);**The last bit of the code is the text fading out. Just like the .fadeIn we can set a value or use ‘fast’ or ‘slow’.
Adding the above code will not show any changes at the moment. This is because we need to hide the text on page load. To do this we will move onto the next step and add in some CSS.
04. The CSS
This is where we tell the div to hide on page load so that the JS can take care of the animation. Click on the CSS tab in your Custom CSS editor and add in the following line of code:
.text-container {display:none;}
You will need to change .text-container to the name of the div that is containing your text. That’s it!
05. Conclusion
So there you have it. A quick and easy way of fading in/out text on a StreamElements alert. You can add the above code to multiple div’s if you so wish. For example; you could have the number of months that someone has been subscribed fade in after the username appears. Just make sure to copy the steps above again with your new div name.
If there are any other tutorials you would like to see from the Loot Drop Graphics team then please do not hesitate to comment below. Also, we would love to see what you have achieved with this tutorial.