How to Create the Parallax Effect | BoldGrid

The parallax effect is an effect used within websites to create the illusion of depth. It is created when a foreground image moves a little faster than a background image. It can involve a few images or several. The following tutorial will show you how to create the parallax effect using the section editor while editing a page in BoldGrid.

How to Create the Parallax Effect

Here you will be creating a page with a blank background in order to start the process.

  1. Log into BoldGridLog into BoldGrid.
  2. Add BlankUnder Pages click Add Blank
  3. Click Blank Page
  4. Provide the page with a title
  5. Hover over the body of the page until you find the section menu.
  6. Click the three horizontal bars
  7. Click Change Background
  8. ImageSelect Image
  9. Select an imageSelect an image from the list
  10. Click SettingsClick the Settings button
  11. Selec ParallaxUnder Scroll Effects choose Parallax
  12. Click the XClick the X to close the window
  13. Drag SizeHover over the newly added image and use the arrows to adjust the size as needed

You can add as many images as you want. When ready, you can add content beneath or above these images. Scrolling through the page now in Preview or after publishing will perfectly demonstrate the parallax effect in action.

Be sure to update or Publish your page when ready in order to save the changes you made.

 

Get more for free by signing up with BoldGrid Central Create Account

Leave a Reply