Twine blog 3: CSS and Javascript

With the basics down from the week before I continued to play around with A.I To create the more complex code.

I First created different styled text for each character that I could call useing a macro class in the span around the text, instead of writing all the Text changes everytime someone spoke.

Above you can see how I styled the text differently for each character.

I also changed the link hover animation from the normal underlined text that changes colour. To text that enlarges, tilts to the left and changes colour. Which allows the Links to stand out and also be obvouis to click on as it moves when the mouse hovers over it.

This was much simpler to do and customise, unlike the character macros.

I then thought of a cool effect of the text being written as you read it.

e.g.

This was fairly painful to have work correctly. As the macros and variables within, used to be displayed when they should be hidden.

This caused me to have to format the text I write with a <div> at the start and end, and also <span> around the text that I wanted to format. This is still easier than having to re-write:
color: #aaddff;
font-weight: normal;
font-family: ‘Lato’, sans-serif;
font-size: 1.1em;
font-style: normal;
and more… Every single time a character spoke.

I finished this week with a basic structure that had been half formatted correctly, and half to be formatted. Next week I will continue writing the story and adding the correct notations around the text on passages I plan out.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *