Publish content to your screens directly from Microsoft TeamsLearn More
Are you more of a Photoshop or Canva type of person? Would you rather your software is powerful and feature-rich or simple and easy to use? Often, it feels like you have to choose one or the other. But not always. Napster had both in spades and left its mark on history. And ChatGPT is following a similar path.
AI tools are changing how we interact with technology. You can become a Photoshop person without knowing the difference between the lasso and marquee tools. AI can understand the context and help you choose what’s best. You can have powerful software that’s also straightforward and understandable.
The same is true for writing basic code. Want to create a text animation for your website or your digital signage? Code templates and some help from ChatGPT are all you need, even if you’ve never written a single line of CSS in your life. And if your content management system can receive JSON data – like WordPress and ScreenCloud can – you can even update your animated text based on triggers.
Setting Up a Sandbox To Test CSS Animations
To create a Playgrounds test environment, add the app to your account from the ScreenCloud dashboard:
- Visit the Apps tab in the left-hand menu.
- Search for Playgrounds.
- Select the app.
- Click the large yellow Get button in the upper-right-hand corner.
- Choose a name for your first Playgrounds instance and close the template picker (for this example, it’s best to start from scratch).
Animate Your First Block of Text with CSS
Let’s say that you want to liven up your office reception area with some engaging signage. If the screen is too bland, people will ignore it. But the same is true if it’s too busy or overstimulating. A simple but interesting animation, like the City Nights Text Effect, is a good middle ground.
Someone has already shared the code online, we just need to make a few small tweaks so it takes advantage of Playgrounds’ Application Data feature.
This particular template is pure CSS with only one line of HTML, so we won’t have to change much. Copy all of the CSS over to the Playgrounds CSS column. Then, copy this and paste it into the HTML column in Playgrounds, below the existing </head> tag:
City Nights Effect