This project is mainly for inspiration but you are welcome to use any parts for your own projects.
Skin Title One
This skin uses a variable and a timer for animating the opening sequence of the text box.
The Variable:
- 1.png (19.23 KiB) Viewed 5558 times
The Timers settings:
- 2.png (13.12 KiB) Viewed 5558 times
The Timer has the actions:
- 3.png (36.85 KiB) Viewed 5558 times
The next action will stop the timer:
- 4.png (32.59 KiB) Viewed 5558 times
To stop the Set Value action from stopping the timer on open it uses an action filter:
- 5.png (15.68 KiB) Viewed 5558 times
So when the variable reaches the number 6 the Set Value action will stop the timer.
The container Title1 Con1 is set to Masking so elements outside of the container will be masked and only visible when inside the area of the container.
It also has CSS formatting that gives the text the skew. Under the CSS Styles you will see:
Code: Select all
transform: skewX(-15deg);The Element Title1 Rec Background is positioned outside of the masking container and has a Position Logic block:
- 6.png (18.03 KiB) Viewed 5558 times
When the variable gets to the count of 1 the element Title1 Rec Background will slide down into view.
The text box Title1 Text1 is also positioned outside of the masking container to the right, it also has a position logic block:
- 7.png (18.87 KiB) Viewed 5558 times
This will slide in the text box from the left when the variable count is 2.
The rectangles, Title1 Rec1 to Title1 Rec4 all have position logic blocks to slide them down into view when they each get the right variable number, 3, 4, 5 and 6. As already mentioned when the variable number gets to 6, the Set Value action will stop the timer by setting the time out to 0 seconds.
The Text box formatting can be found under the CSS Styles Inner Element:
Code: Select all
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;- 8.png (6.21 KiB) Viewed 5558 times
Skin Title Two:
This skin is basically the same but now the element Title2 Rec Background has a radius of 5.
The Text box has the CSS Styles Inner Element of:
Code: Select all
text-shadow: -1.5px -1.5px #888888;- 9.png (6.24 KiB) Viewed 5558 times
Skin Title Three:
This skin is again similar but the animation rectangles now expand from the centre and also animate with every node change. This is done by setting the rectangles Scaling Y: 0% and then the logic block sets them back to 1.00. The actions to repeat the animation on node change are:
- 10.png (39.96 KiB) Viewed 5558 times
The above action sets the variable to 1, so it skips the text slide in animation as this would probably be too much for each node change. So the text remains in view and only animates the end rectangles.
The below action sets the timer from 0 to 0.125 so starting the timer.
- 11.png (34.74 KiB) Viewed 5558 times
Skin Title Four:
This skin uses a "paper texture", paper.gif which is found in the project folder.
This is added to the project by using the "Assets" as found in the HTML5 output and at the bottom of the Advanced tab.
When you build the project it adds the paper.gif to the assets folder.
In the element Title4 Rec Background, it has the CSS Styles:
Code: Select all
background-image: url(img_flwr.gif), url(assets/paper.gif);
background-position: right bottom, left top;You can make your own textures or Google them.
Skin Title Five:
This skin uses CSS Styles that gives the rectangles the red and yellow background linear gradient:
Code: Select all
background-image: linear-gradient(red, yellow);Skin Title Six:
This skin uses two textboxes but the skew is set 15 for the top test box and -15 for the bottom one making an arrow effect.
To further enhance this project check out the using Google Fonts video: https://ggnome.com/doc/pano2vr/6/html-css/
Of course, you can use the same CSS in Tooltips for Hotspots.
Regards,
Hopki