{"id":1490,"date":"2026-07-28T22:32:33","date_gmt":"2026-07-28T22:32:33","guid":{"rendered":"http:\/\/home.test\/canvas-wp-test\/parallax-elements\/"},"modified":"2026-08-05T21:50:52","modified_gmt":"2026-08-05T21:50:52","slug":"parallax-elements","status":"publish","type":"page","link":"https:\/\/demos.canvaswp.com\/classic\/parallax-elements\/","title":{"rendered":"Parallax Elements"},"content":{"rendered":"<div class=\"section bg-transparent py-0 mt-0\"><div class=\"parallax scroll-detect vh-75 align-items-center justify-content-center d-flex\"><h3 class=\"display-4 fw-bold\">Parallax Background<\/h3><img decoding=\"async\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/1-19.jpg\" alt=\"Parallax background scrolling effect demo\" class=\"parallax-bg\"><\/div><\/div>\n<div class=\"container\"><div class=\"row justify-content-center\"><div class=\"col-md-6 text-center\"><h3>Absolute Content<\/h3>\n<div class=\"grid-inner overflow-visible\"><div class=\"vh-50 bg-danger position-relative z-1\"><\/div><div style=\"--cnvs-transitions:.2s linear; opacity:calc(var(--cnvs-scroll-percent) * 0.025); transform: translate3d(calc(var(--cnvs-scroll-percent) * 0.5px), calc(var(--cnvs-scroll-percent) * 0.5px), 0)\" class=\"vh-50 w-100 bg-dark position-absolute top-0 start-0 all-ts scroll-detect\"><\/div><\/div><\/div><\/div>\n<div class=\"line\"><\/div>\n<div class=\"row g-5\"><div class=\"col-lg-6\"><h3>Vertical Parallax<\/h3>\n<div class=\"parallax scroll-detect vh-50\"><img decoding=\"async\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/3-12.jpg\" alt=\"Vertical parallax scrolling image\" class=\"parallax-bg\"><\/div><\/div>\n<div class=\"col-lg-6\"><h3>Horizontal Parallax<\/h3>\n<div class=\"parallax scroll-detect vh-50\" data-parallax-direction=\"horizontal\"><img decoding=\"async\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/2-17.jpg\" alt=\"Horizontal parallax scrolling image\" class=\"parallax-bg\"><\/div><\/div><\/div><\/div>\n<div class=\"section dark bg-dark mb-0\"><div class=\"container\"><div class=\"text-center mw-xs mx-auto\"><h3 class=\"display-2 fw-bold\">Different Parallax Images<\/h3>\n\n<p class=\"wp-block-paragraph\">Combine vertical, horizontal, and absolute parallax layers to give every section real depth. Stack multiple images at different scroll speeds, fine-tune the transitions, and craft an immersive scrolling experience your visitors remember<\/p>\n\n<a class=\"btn btn-outline-light rounded-pill px-5 py-3\" href=\"#\">Purchase Now<\/a><\/div>\n<div class=\"parallax-images-wrap\"><div class=\"parallax-image parallax-image-1\"><img decoding=\"async\" class=\"scroll-detect\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/1-11.jpg\" alt=\"Layered parallax image 1\" style=\"--cnvs-transitions:.1s linear; transform: translate3d(0, calc(var(--cnvs-scroll-percent) * 2.5px), 0)\"><\/div><div class=\"parallax-image parallax-image-2\"><img decoding=\"async\" class=\"scroll-detect\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/2-13.jpg\" alt=\"Layered parallax image 2\" style=\"--cnvs-transitions:.1s linear; transform: translate3d(0, calc(var(--cnvs-scroll-percent) * -3.5px), 0)\"><\/div><div class=\"parallax-image parallax-image-3\"><img decoding=\"async\" class=\"scroll-detect\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/3-10.jpg\" alt=\"Layered parallax image 3\" style=\"--cnvs-transitions:.1s linear; transform: translate3d(0, calc(var(--cnvs-scroll-percent) * -1px), 0)\"><\/div><div class=\"parallax-image parallax-image-4\"><img decoding=\"async\" class=\"scroll-detect\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/4-5.jpg\" alt=\"Layered parallax image 4\" style=\"--cnvs-transitions:.1s linear; transform: translate3d(0, calc(var(--cnvs-scroll-percent) * 1.2px), 0)\"><\/div><div class=\"parallax-image parallax-image-5\"><img decoding=\"async\" class=\"scroll-detect\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/6-4.jpg\" alt=\"Layered parallax image 5\" style=\"--cnvs-transitions:.1s linear; transform: translate3d(0, calc(var(--cnvs-scroll-percent) * 2px), 0)\"><\/div><\/div>\n<div class=\"vh-50\"><\/div><\/div><\/div>\n\n<div style=\"background-image:url(&apos;https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/5-5.jpg&apos;);background-position:50% 50%;background-repeat:no-repeat;background-size:cover;\" class=\"wp-block-group section bg-transparent py-0 mt-0 dark is-layout-flow wp-block-group-is-layout-flow has-background\">\n<div class=\"parallax vh-75 align-items-center justify-content-center d-flex scroll-detect\"><h3 class=\"display-1 fw-bold scroll-detect\" style=\"--cnvs-transitions:.1s linear; transform: translate3d(0, calc(-80% + calc(var(--cnvs-scroll-percent) * 2px)), 0); opacity:calc(-0.3 + var(--cnvs-scroll-percent) * 0.015)\">Text Parallax<\/h3><\/div>\n<\/div>\n\n<div class=\"container\"><div class=\"row\"><h3 class=\"text-center\">Scroll Speed<\/h3>\n<div class=\"col-lg-3\"><div class=\"vh-40 bg-contrast-500 all-ts text-light d-flex justify-content-center align-items-center scroll-detect\" style=\"--cnvs-transitions:.1s linear; transform: translate3d(0, calc(var(--cnvs-scroll-percent) * 1px), 0)\">*1x<\/div><\/div>\n<div class=\"col-lg-3\"><div class=\"vh-40 bg-contrast-600 all-ts text-light d-flex justify-content-center align-items-center scroll-detect\" style=\"--cnvs-transitions:.1s linear; transform: translate3d(0, calc(var(--cnvs-scroll-percent) * 2px), 0)\">*2x<\/div><\/div>\n<div class=\"col-lg-3\"><div class=\"vh-40 bg-contrast-700 all-ts text-light d-flex justify-content-center align-items-center scroll-detect\" style=\"--cnvs-transitions:.1s linear; transform: translate3d(0, calc(var(--cnvs-scroll-percent) * 3px), 0)\">*3x<\/div><\/div>\n<div class=\"col-lg-3\"><div class=\"vh-40 bg-contrast-800 all-ts text-light d-flex justify-content-center align-items-center scroll-detect\" style=\"--cnvs-transitions:.1s linear; transform: translate3d(0, calc(var(--cnvs-scroll-percent) * 4px), 0)\">*4x<\/div><\/div>\n<div class=\"clear vh-50\"><\/div><\/div>\n<div class=\"line\"><\/div>\n<div class=\"text-center\"><h3>Hover 3D<\/h3><\/div>\n<div class=\"row justify-content-center g-4\"><div class=\"col-md-4\"><img decoding=\"async\" class=\"hover-3d\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/1-11.jpg\" alt=\"Hover 3D tilt demo\"><\/div>\n<div class=\"col-md-4\"><div class=\"hover-3d text-center\"><img decoding=\"async\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/2-13.jpg\" alt=\"Hover 3D card with caption overlay\"><div class=\"bg-overlay\"><div class=\"bg-overlay-content dark flex-column\"><div class=\"portfolio-desc p-0\"><h3 class=\"mb-0 wp-block-heading\"><a href=\"#\" class=\"text-light\">Layered depth on hover<\/a><\/h3><\/div><\/div><\/div><\/div><\/div>\n<div class=\"col-md-4\"><div class=\"hover-3d text-center\"><img decoding=\"async\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/3-10.jpg\" alt=\"Hover 3D card with lightbox triggers\"><div class=\"bg-overlay\"><div class=\"bg-overlay-content dark\" data-hover-animate=\"fadeIn\"><a href=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/1-13.jpg\" class=\"overlay-trigger-icon bg-light text-dark\" data-lightbox=\"image\" title=\"Image\" data-hover-animate=\"fadeInDownSmall\" data-hover-animate-out=\"fadeOutUpSmall\" data-hover-speed=\"350\"><i class=\"uil uil-plus\"><\/i><\/a><a href=\"#\" class=\"overlay-trigger-icon bg-light text-dark\" data-hover-animate=\"fadeInDownSmall\" data-hover-animate-out=\"fadeOutUpSmall\" data-hover-speed=\"350\"><i class=\"uil uil-ellipsis-h\"><\/i><\/a><\/div><div class=\"bg-overlay-bg dark\" data-hover-animate=\"fadeIn\"><\/div><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-canvas","meta":{"footnotes":""},"class_list":["post-1490","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/1490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/comments?post=1490"}],"version-history":[{"count":12,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/1490\/revisions"}],"predecessor-version":[{"id":3906,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/1490\/revisions\/3906"}],"wp:attachment":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/media?parent=1490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}