The Silverlight PageCurl Manual
Silverlight PageCurl 1.0 adds a page curl effect to any webpage, shows a customizable image and opens any website in a new browser window when clicked.
- Adds a Page Curl effect to any HTML page
- Shows a Download Silverlight image when Silverlight is not installed
- Opens a small (150x150px) PageCurl after the page is loaded to attract attention
- Opens a large (500x500px) PageCurl on mouse hover
- Shows small Page Curl again on mouse leave
- Shows a customizable image, created from a Photoshop template
- Customizable link on image opens any site in a new browser window
- Default image shows when your image can’t be located
- isCloseable option shows Close button… or not
- Saves IsClosed setting to IsoStore
The Silverlight PageCurl starts with a small footprint and plug-in size of 150 pixels. This way the rest of the page is visible and links around that area still clickable. Only when the user moves the mouse cursor inside that area the plug-in size will increase and an image will show in de lower right corner beneath the page curl. The image is clickable and a new window will open, using a customizable link. The image URL will show up in the browser status bar if it is visible. When the mouse cursor leaves the plug-in area the page curl will close with an animation with elastic effect and the size of the plug-in area is reduced. The reflected color of the page curl can be changed to give the curl a light color that fits well with your image.
Create your own image to show when the page curl opens. This image is 500 x 500 pixels in size. The lower right corner of this image should present a teaser shape or text that invites the user to hover the mouse over the corner. A Photoshop Template is available that visualizes the end result in the small and large state in a realistic manner. Save your image as a JPEG or PNG file and add it’s name and path to the Silverlight PageCurl initialization parameters.
The isCloseable option gives you the choice whether you want to allow the user to close the page curl. When a users clicks the close button, the curled corner will disappear forever. The settings is stored so the user is not bothered with a reopened page curl when the page is refreshed or visited again. If you don´t want the user to close the page curl, the close button will not show and a curled corner will always be visible.
Implement your PageCurl
- Create your own image
- The 500 x 500 pixel Photoshop Template included in the package is called SLPageCurlTemplate.psd. Open this in Photoshop CS1 or higher and create your teaser image. Layers Groups in the Photoshop template can be hidden or shown to determine what is visible beneath the small and large page curls.
- Create your image on or above the “Your image here” layer. Make sure the lower right corner presents something interesting, so user will hover their mouse cursor over that area.
- Give your image a ‘call to action’ so people will actually click the image.
- When you’re done, hide all other layers and save it as a JPG or PNG file. Place the image in the ClientBin/images folder.
- Update initParams
- Use the initialization parameters in the Silverlight object tag the customize the Page Curl. The available options in this version are: imageUrl, ImageLink, curlColor and isCloseable. The correct syntax is:
<param name="initParams" value=" imageUrl = /Images/SLPageCurl.jpg, imageLink = http://antonidol.nl/pagecurl, curlColor = #FFC4D8F8, isCloseable = true " />
- imageUrl determines the relative path and name to the image you have created. Images must be inside the ClientBin folder for them to show up: imageUrl=/images/SLPageCurl.jpg,
- imageLink determines the absolute hyperlink used when opening a new browser window: imageLink=http://antonidol.nl/pagecurl,
- curlColor: this parameter allows you to change the color of the curl so it fits with the image. Use a light color for the best effect: curlColor=#FFC4D8F8,
- The isCloseable parameter allows the user to close the Page Curl using a close button. This boolean value determines whether the close button is available or not: isClosable=true.
- Test your PageCurl implementation
- Include the Page Curl XAML in a local website or page and check if your image shows, the link opens the right site. When the page curl is closeable the close button should be visible.
- Make sure your parameters are correct.
- Check if your own image is in the /ClientBin/Images folder.
- Check if the image getSilverllight.png is in the /ClientBin/Images/ folder.
- Publish your customized PageCurl
- Place the SLPageCurlContainer DIV, including the object tag, in the page you want to have the page curl. Add the DIV at any place inside the <body> tag. The Silverlight plug-in is placed using CSS absolute positioning.
- Add the CSS class #SLPageCurlContainer in your stylesheet.
- Copy the ClientBin folder with the images subfolder in the root of your website. Leave out all unnecassary files. Everything should be ready and the page should now present a curl at the bottom right.
If you want to learn a bit more about the implementation of this Silverlight application, check out the blog post at the Silverlight & Expressing Insiders site…
UPDATE 27 may 2014: Uploaded C# and XAML code for you to adapt to Windows Phone.
I’ve uploaded the ZIP-file SLPageCurlCode.ZIP to what is now called my public OneDrive folder.
Pick it up at the following address: https://onedrive.live.com/?cid=8073406c0ec0e68a&id=8073406C0EC0E68A%21240&mkt=en-US