On Scroll Content

The 'on scroll content' is an eye catching method for loading content into your page as your visitor scrolls down. Content is revealed as the users scrolls farther down the page!


On Scroll Content

More and more websites or website designers are adding some level of animation into their web page designs. If done correctly page animations can help to draw your visitors attention to your content and hold them on the page a bit longer. The ‘On Scroll Content’ component, which is actually just a set of CSS styles and a small bit of javascript, detects when a user is scrolling the page, and animated the content onto the page as it comes into view.

The content works best for a 2 column page layout, where both columns are of equal widths. Using more than 2 columns won’t look asthetically pleasing, nor will using columns of different widths as one column will animate into the page at a different speed than the other.

In the example page we’ve provided in your template, and code snippet below.. you’ll find a section with ‘text’ content on the left, and an image on the right, and another section where the image is on the left, and the text content is on the right.. previewing the demo page will give you a better idea of what it actually looks like. For the ‘best’ or ‘optimal’ presentation I would suggest you stick with this formula of 2 equal sides, an image on one side and content on the other.. augmenting each section left/ right, and right/left ..

On another note, if you can also keep the content to match the height of your image, you’ll have a much stronger impact.. this may require adding more content, or filler, or taking some away. Again, the demo will show you the ‘optimal’ amount of text to image.

You can use any size images you like, keeping the images all the same size will look best. Smaller images, less content.

Image Size: ( best ) 480×360

Although any image size will do, this size work best for most web browsers, tablets and phones.

Removing Sections

  1. Open your page
  2. Switch to Code view
  3. Locate the following code:
  4. Select the entire <section>, and delete.

Adding Sections

  1. Open your demo page, switch to code view and locate the on scroll sections:
  2. You’ll notice that each section starts with a ‘comment’ tag, describing the content and image (left/right) positioning, and each section also contains an ‘article’ and each article has a class of “cbp-so-side-left” or “cbp-so-side-right”. The <article> is the container for your text content. It’s just a regular HTML5 article container, that includes an H2 title tag and some paragraph text. You can edit both of these text regions in the Design or code window as you would edit any web page.
  3. Each <section> also contains a <figure> with a class of “cbp-so-side-left” or “cbp-so-side-right”. The <figure> tag contains a link to your image. You can replace the image by importing your replacement image and updating the link in the code view, or switch over to the Design window, and replace the image by double clicking on it ( to open the Image Properties / or right click on the image and select Picture Properties ) .. and change the image as you would replace any image in a web page using the image properties panels.
  4. The ‘article’ is for your content, and the <figure> is for your image.
  5. To ‘add’ a section, just copy an existing section, including the comment tag, and paste above or below another section:
  6. You’ll just need to determine whether you want the content on the left, image on the right or visa versa and the comment tags will help you figure that out.
  7. Once you’ve created the number of sections you need, just switch over to Design view and edit the content as your normally would.
  8. To replace the image, create your replacement image to match the default size of ( 480 pixels wide by 360 pixels high ), import them into a folder of your website, then double click on the existing default image to open the ( Picture properties ) panel. Browse to your replacement image.