Watch the tutorial video: http://vimeo.com/60586586
Images
Optimum size for images is 1600 x 1200 pixels and around 100 Kilobytes.
It is important to compress your images prior to uploading in order to improve the page load process.
There are several image compression software available for the Mac, I use JpegMini with good results: http://www.jpegmini.com
Note that the background images will not be resampled or stretched to fill the browser's window. This happens because the background images have to scroll freely in relation to the layered content, in order to the parallax effect to happen.
Take note of these tips:
1. Choose your images carefully and keep the main object in the middle of the screen
2. Place another smaller image on the mobile option, use the simulator on RW5 or the built-in simulator of RW6 to optimise the results.
Patterns
Stacks 2 comes with a variety of ready to use patterns, all available at the Media Library tab.
- Choose your tab and drag it to the Block Image and Mobile Image spaces at the Parallaxis Block
- Check the Repeat option.
- Prefer to use patterns in the mobile image option.
How to develop a page step by step
Parallaxis theme comes with a very useful tutorial project, but if you want to develop pages from scratch:
- Add a Stacks 2 page to the project
- Drag and drop up to 10 Parallaxis Block stacks to the page, taking care of numbering each block by using the Block ID slider.
- Add one Parallaxis Menu stack to the top of the page, so it would be the first stack on the row.
- On the menu stack use the Blocks slider to determine the number of block pages used.
How to manually link blocks
We can manually link text to blocks by using the localScroll jQuery function.
- select the text you wish to link
- use the anchor buttons on top left corner to add a link
- on the drop-down window in the URL field set the target block preceded by a number sign, example: #block2 4. add this lines to custom Javascript field:
//localScroll trigger
jQ.localScroll();
Comments
0 comments
Article is closed for comments.