{"id":9644,"date":"2018-01-30T05:06:01","date_gmt":"2018-01-29T23:06:01","guid":{"rendered":"https:\/\/www.elementpack.pro\/demo\/?page_id=9644"},"modified":"2026-03-09T10:05:08","modified_gmt":"2026-03-09T04:05:08","slug":"parallax-background","status":"publish","type":"page","link":"https:\/\/www.elementpack.pro\/demo\/element\/parallax-background\/","title":{"rendered":"Background Parallax"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Demo 01: <\/span>Parallax Y (-300)<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tAdds a smooth vertical parallax effect by shifting the background upward (-300px), creating depth and a dynamic scrolling experience.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Parallax Depend on Scroll<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

To apply this component, add the attribute to any element. Add an option with the desired animation target value for each CSS property you want to animate.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Image credit goes to: dribbble.com<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Demo 02: <\/span>Parallax Y (-250)<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Adds a smooth vertical parallax effect by shifting the background upward (-250px), creating depth and a dynamic scrolling experience.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Frozen Serenity<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Demo 03: <\/span>Parallax X (200)<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tCreate a smooth horizontal parallax effect with a 200px shift, adding depth and dynamic movement to your design.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t