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.

Setup

Follow these instructions for using ScratchCard:
  1. Once installed into Stacks and RapidWeaver, open your Stacks Library.
  2. Search for 'ScratchCard'. Drag and drop a copy of the stack into your webpage.
  3. Within the stack settings, configure the stack to include your message or code, together with the image layers.
  4. Other settings can be customised if required.
  5. 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.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Pocket
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!
We use cookies and other services to give you the best possible experience on our website. If you continue without changing settings, we'll assume you are happy with this.