Parallax banner

Parallax scrolling is let the elements are allowed to move independently by giving a 2D feel.

Parallax scrolling is allow to put an image or video on the background.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files

Functional grouping: Marketing and storytelling

Demo

Parallax banner demo page

Usage best practices

Certain considerations that you must bear in mind when using parallax on the page:

  • Loading time: User on the internet have short attention and limited time. Special for the mobile user.You may lose the vistor if take long time to loading the page. Please avoid to
    • put mutiple parallax on the same page
    • use the large background image
    • use the large video
  • Parallax doesn't work on mobile devices, the parallax images will revert to regular background images.
  • The video will only playing on desktop view ( > 992px). The background will be switch to a image on the mobile and tablet. Video dimension and format: landscape: 1920 x 1080 pixels (1080p) / 16:9  and mp4
  • There is no set image size for parallax section background. The image will cover the area no matter what size. Keep in mind, bigger images will look better on bigger displays, but will also take longer to load.