Simple Parallax Scrolling in Xara Web Designer 10+ – XaraTemplates.com
TEMPLATES FOR MAGIX ® XARA WEB DESIGNER

Simple Parallax Scrolling in Xara Web Designer 10+

Recently I have been asked to create more templates with the parallax effect. In the XT75 template I was able to create this effect by a “pasteboard background” layer, many foreground rectangles and a small CSS tweak. However, such solution has several disadvantages, which I will not write right now. I found out that getting a simple parallax effect in xara web designer is quite easy.

parallax_content_demo

How To create a simple parallax effect in Xara Web Designer.

Step 1: Add a simple css code to the document.

Option 1.

  1. Right click on the document. Choose in the menu: “Web Page Properties”,
  2. select the “Page” tab,
  3. click “HTML code (head)”,
  4. paste the below code and click ok and ok.
<style>
.parallax {
 background-attachment: fixed !important;
 background-position: center center !important;
 background-size: cover !important;
}
</style>

 

parallax_gif_1

 

Option 2. (better)

Create a simple placeholder and copy and paste the above css code. This solution has the advantage that placeholder can be easily copied to other documents. (You don’t have to enter the code from scratch.)

  1. Create a simple rectangle.
  2. click on it with the right mouse button and select “Web Properties”,
  3. select the “Placeholder”,
  4. click “Embed code (head) “,
  5. paste the above code and click ok and ok.

 

parallax_gif_2

Step 2: Create a parallax background.

  1. Create a rectangle with the dimensions of the parallax background
    ⇒ in Xara Web Designer 10: select “pasteboard background” layer, unlock this layer, create rectangle
    ⇒ in Xara Web Designer 11: just create rectangle in the MouseOff layer
  2. set the rectangle to be “full width”,
    ⇒ in Xara Web Designer 10: right click on the rectangle and choose in the menu: “Fill browser width”,
    ⇒ in Xara Web Designer 11: right click on the rectangle and choose in the menu: “Web Sticky/Stretchy” then select “Full width” option and press ok,
  3. change the rectangle fill to image,
  4. drag and drop your background image,
  5. add a name to the object: htmlclass = parallax ,
  6. create a sample text object in the MouseOff layer. (for testing).

Xara Web Designer 10:

parallax_gif_3

 

And that’s it. Now you can press the preview icon to see if your parallax works. You can create more parallax objects. Just follow step 2.
I hope that this short instruction “how to create parallax in Xara Web Designer” will be helpful.

Ps.
If you like this article write a comment. I would like to know if this information is useful and also should I write more howtos.

 

 

download parallax demo


 

Update 2015-10-09

How to create a high resolution parallax in Xara web designer 11

by Neil Gardner

 

Stage 1 – Create the placeholder

1. Create a simple placeholder (e.g. create a rectangle on the mouse off layer):

  • Create a simple rectangle on the mouse off layer.
  • Right click on it and select “Web Properties” (normally bottom of the list),
  • Select the “Placeholder” tab,
  • click “HTML code (head) “,
  • paste the code below and click ok
<style>
.parallax {
 background-attachment: fixed !important;
 background-position: center center !important;
 background-size: cover !important;
 background-image: url("index_htm_files/parallax.jpg") !important;
}
</style>

2. Prepare the image you wish to use for the parallax effect and rename the image file name to parallax.jpg. (Suggested width = 1920px.)

3. To add the image – left click the parallax placeholder press ctrl+alt+shift+A (all at the same time), navigate to the required image, left click on it and press open.

 

Stage 2 – Create the parallax ‘window’

4. Create a rectangle in size and location required for the parallax ‘window’ (mouse off layer)

5. Add a name to the rectangle by:

  • Right click on the rectangle and select ‘names’
  • Input: htmlclass = parallax ,
  • Click on ‘Add’

6. If you would like the parallax effect to be full width:

  • Right click on the placeholder
  • Select Web sticky/stretchy’
  • Select ‘full width’

7. If you wish the placeholder to show the image that will be used for the parallax effect (this step is not necessary to achieve the parallax effect) then:

  • left click on the placeholder
  • Choose the fill tool
  • Select bitmap from the fill drop down
  • Drag and drop the image into the placeholder

If you would like to have more than 1 parallax picture in your document, then this is possible but you will need to create a different css class for each step above e.g. parallax2 and the image names need to match (e.g. parallax2.jpg)

6 Comments

  1. Alain June 23, 2015

    Very very good workshop, thank you for posting.

  2. neil June 24, 2015

    Wow!

    What a fantastic and easy to follow tutorial!

    I have been struggling for ages trying to find a way to create a parallax effect in Xara without success, but after 5 minutes of following your tutorial, I achieved it – thank you so much.

    Re your use of English – given that it does not appear to be your mother tongue, you have a great grasp of it. I found your instructions really easy to follow and the video clips and download made it easier again.

    Thanks again for all of the work you have put into this – I look forward to the next workshop article!

  3. Chris August 9, 2015

    Great Tut! Thanks.

    However, I have a question; there seems to be something odd happening with the resolution/dpi of the image used for the background, as in it looks really low resolution as it’s zoomed in quite considerably.

    I can compensate for this a little by upping the resolution in the bitmap fill tool bar, but not quite right.

    Can you shine any light on this?

    Cheers,

    Chris

    • Author
      Michal Jarmoluk October 9, 2015

      Thanks to Neil the article was updated.
      Now it describes how to create a high resolution parallax. 🙂
      Hope it’s helpful.

      Michal.

  4. chatnoir.info January 17, 2016

    Very useful, thanks a lot!
    Elly.

  5. zstijani April 23, 2018

    salut j’ai suivi le tuto sans resultat

Leave a reply