ScratchCard only has a couple of settings. You can set both a background paper image and a foreground foil image. Sizing, spacing and content styling are all customisable. Enter the content (you want revealed) in the stack settings. Multiple ScratchCard stacks can be safely used on the same webpage, if you prefer.
Example
Scratch-away the gold foil to reveal the secret message!winner!
The gold foil and textured paper images are included with the stack can can be found in your image library. Alternatively you can supply you own images, via drag and drop in the stack settings.
ScratchCard works in all modern web browsers that support the HTML5 Canvas element. Written content is kept hidden at 0% opacity, until the page has finished loading.
If you mouseover any of the stack settings, you will see small informational tooltips. These give you information about what each setting does.
The ScratchCard stack spans the full 100% width of the container you place it within. You can make it narrower by placing it inside a column or using the Stacks generic Layout controls. Be sure to test your page on mobile, to make sure the content still fits within the ScratchCard. You may need to make the scratch card taller (using the height setting) if your content needs to reflow onto multiple lines.
ScratchCard works in all modern web browsers that support the HTML5 Canvas element. Written content is kept hidden at 0% opacity, until the page has finished loading.
Setup
Follow these instructions for using ScratchCard:- Once installed into Stacks and RapidWeaver, open your Stacks Library.
- Search for 'ScratchCard'. Drag and drop a copy of the stack into your webpage.
- Within the stack settings, configure the stack to include your message or code, together with the image layers.
- Other settings can be customised if required.
- Preview your webpage and test the ScratchCard. Export or publish your website when done.
If you mouseover any of the stack settings, you will see small informational tooltips. These give you information about what each setting does.
The ScratchCard stack spans the full 100% width of the container you place it within. You can make it narrower by placing it inside a column or using the Stacks generic Layout controls. Be sure to test your page on mobile, to make sure the content still fits within the ScratchCard. You may need to make the scratch card taller (using the height setting) if your content needs to reflow onto multiple lines.
