{"id":19864,"date":"2026-06-29T09:37:23","date_gmt":"2026-06-29T09:37:23","guid":{"rendered":"https:\/\/bricksfly.com\/?post_type=docs&p=19864"},"modified":"2026-07-01T06:41:25","modified_gmt":"2026-07-01T06:41:25","slug":"parallax-effect","status":"publish","type":"docs","link":"https:\/\/bricksfly.com\/docs\/gsap-extensions\/parallax-effect\/","title":{"rendered":"How to Use Parallax Effect in BricksFly"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Parallax Effect in BricksFly helps create a smooth scrolling motion by moving selected elements at a different speed than the page scroll. This feature is useful for adding depth, movement, and a more interactive feel to images, text, or other elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Requirement&nbsp;<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure you have installed: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bricks Theme&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>BricksFly Pro<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"433\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Requiremnt-of-text-animation-In-Bricksfly-01-1024x433.webp\" alt=\"Requiremnt of text animation in bricksfly \" class=\"wp-image-19789\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Requiremnt-of-text-animation-In-Bricksfly-01-1024x433.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Requiremnt-of-text-animation-In-Bricksfly-01-300x127.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Requiremnt-of-text-animation-In-Bricksfly-01-768x325.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Requiremnt-of-text-animation-In-Bricksfly-01-1536x650.webp 1536w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Requiremnt-of-text-animation-In-Bricksfly-01.webp 1919w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"391\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/BricksFly-Pro-02-1-1024x391.webp\" alt=\"Bricksfly pro \" class=\"wp-image-19791\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/BricksFly-Pro-02-1-1024x391.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/BricksFly-Pro-02-1-300x114.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/BricksFly-Pro-02-1-768x293.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/BricksFly-Pro-02-1-1536x586.webp 1536w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/BricksFly-Pro-02-1.webp 1919w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Activate <\/strong><strong>Parallax Effect<\/strong> in BricksFly<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to your&nbsp;<strong>WordPress Dashboard.&nbsp;<\/strong><\/li>\n\n\n\n<li>Click on<strong>&nbsp;BricksFly.&nbsp;<\/strong><\/li>\n\n\n\n<li>Head to the&nbsp;<strong>Extension<\/strong>&nbsp;tab.&nbsp;<\/li>\n\n\n\n<li>Under&nbsp;<strong>ScrollSmoother,&nbsp;<\/strong>toggle on&nbsp;<strong>Parallax Effect.<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"446\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Activate-parralax-Effect-03-1024x446.webp\" alt=\"Activate parralax effect \" class=\"wp-image-19865\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Activate-parralax-Effect-03-1024x446.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Activate-parralax-Effect-03-300x131.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Activate-parralax-Effect-03-768x334.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Activate-parralax-Effect-03-1536x668.webp 1536w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Activate-parralax-Effect-03.webp 1903w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Applying Parallax Effect to an Element<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Select the element where you want to apply the parallax animation, such as an image or text element. In this example, an image element is selected.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then, go to <strong>Parallax Effect \u2192 Enable Scroll Smoother<\/strong> and turn it on.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"463\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Enable-Parralax-Effect-04-1024x463.webp\" alt=\"Enable parralax effect \" class=\"wp-image-19866\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Enable-Parralax-Effect-04-1024x463.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Enable-Parralax-Effect-04-300x136.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Enable-Parralax-Effect-04-768x347.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Enable-Parralax-Effect-04-1536x695.webp 1536w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Enable-Parralax-Effect-04.webp 1919w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Speed<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It controls how fast the Element moves compared to the normal scroll speed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A lower value makes the Element move more slowly, creating a stronger parallax effect. A higher value makes the Element move faster with the scroll.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1<\/strong> = normal movement<\/li>\n\n\n\n<li><strong>0.5<\/strong> = slower movement<\/li>\n\n\n\n<li><strong>2<\/strong> = faster movement<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Lag<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It controls how smoothly the Element follows the scroll movement.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A higher lag value makes the Element follow the scroll with a delayed, smooth motion. A lower value makes the Element respond more quickly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>0<\/strong> = no lag<\/li>\n\n\n\n<li><strong>0.5<\/strong> = slight smooth delay<\/li>\n\n\n\n<li><strong>1 or higher<\/strong> = stronger delayed movement<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In this example, the <strong>Lag<\/strong> value is set to <strong>0<\/strong>. You can adjust this value based on your preference.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final Output of Parallax Effect<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" autoplay controls muted src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Final-output-of-Parralax-Effect-05.mp4\" playsinline><\/video><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Parallax Effect in BricksFly helps create a smooth scrolling motion by moving selected elements at a different speed than the page scroll. This feature is useful for adding depth, movement, and a more interactive feel to images, text, or other elements. Requirement&nbsp; Make sure you have installed: Activate Parallax Effect in BricksFly Applying Parallax Effect [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":19708,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"doc_badge":[],"class_list":["post-19864","docs","type-docs","status-publish","hentry","no-post-thumbnail"],"acf":[],"author_avatar":"https:\/\/secure.gravatar.com\/avatar\/0f038df3bc60da556be64d3ba44b6ffdd6d13c4b411e58e68fbd35029c0b0b00?s=96&d=mm&r=g","author_name":"Elias","_links":{"self":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/19864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/comments?post=19864"}],"version-history":[{"count":2,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/19864\/revisions"}],"predecessor-version":[{"id":19926,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/19864\/revisions\/19926"}],"up":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/19708"}],"wp:attachment":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/media?parent=19864"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/doc_tag?post=19864"},{"taxonomy":"doc_badge","embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/doc_badge?post=19864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}