{"id":3914,"date":"2024-08-29T06:14:38","date_gmt":"2024-08-29T06:14:38","guid":{"rendered":"https:\/\/artscoral.com\/parallax-background-with-scrolling-effects\/"},"modified":"2024-08-29T06:14:38","modified_gmt":"2024-08-29T06:14:38","slug":"parallax-background-with-scrolling-effects","status":"publish","type":"page","link":"https:\/\/www.artscoral.com\/fr\/parallax-background-with-scrolling-effects\/","title":{"rendered":"Parallax Background with Scrolling Effects"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3914\" class=\"elementor elementor-3914\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6fd3018 e-flex e-con-boxed e-con e-parent\" data-id=\"6fd3018\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9680bed elementor-widget elementor-widget-ucaddon_animated_mouse_scroll_icon\" data-id=\"9680bed\" data-element_type=\"widget\" data-widget_type=\"ucaddon_animated_mouse_scroll_icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Animated Mouse Scroll Icon -->\n<style>\/* widget: Animated Mouse Scroll Icon *\/\n\n.mousey {\n  border-style:solid;\n  box-sizing: border-box;\n  display:inline-block;\n  text-align:center;\n}\n.scroller {\n  border-radius: 50px;\n  animation-name: scroll;\n  animation-duration: 2.2s;\n  animation-timing-function: cubic-bezier(.15,.41,.69,.94);\n  animation-iteration-count: infinite;\n  display:inline-block;\n}\n@keyframes scroll {\n  0% { opacity: 0; }\n  10% { transform: translateY(0); opacity: 1; }\n  100% { transform: translateY(15px); opacity: 0;}\n}\n\n<\/style>\n\n<div class=\"scroll-downs\" style=\"text-align:center;\">\n  <a href=\"#\" >\t\n  <div class=\"mousey\">\n    <div class=\"scroller\"><\/div>\n  <\/div>\n  <\/a>\t\n<\/div>\n<!-- end Animated Mouse Scroll Icon -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b83850 elementor-widget elementor-widget-text-editor\" data-id=\"7b83850\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Start by scrolling down the page to see the parallax effect in action. You&#8217;ll notice the background moving at a different speed compared to the foreground, adding a captivating sense of depth and motion.<\/p>\t\t\t\t\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<div class=\"elementor-element elementor-element-7d7ba64 e-flex e-con-boxed e-con e-parent\" data-id=\"7d7ba64\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c918c38 e-con-full e-flex e-con e-child\" data-id=\"c918c38\" data-element_type=\"container\" data-settings=\"{&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_direction&quot;:&quot;negative&quot;,&quot;motion_fx_translateY_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;motion_fx_translateY_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:52}},&quot;motion_fx_translateX_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_direction&quot;:&quot;negative&quot;,&quot;motion_fx_translateX_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;motion_fx_translateX_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:52}},&quot;motion_fx_opacity_effect&quot;:&quot;yes&quot;,&quot;motion_fx_opacity_range&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:31,&quot;end&quot;:44}},&quot;motion_fx_blur_effect&quot;:&quot;yes&quot;,&quot;motion_fx_blur_level&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:8,&quot;sizes&quot;:[]},&quot;motion_fx_blur_range&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:30,&quot;end&quot;:47}},&quot;motion_fx_rotateZ_effect&quot;:&quot;yes&quot;,&quot;motion_fx_rotateZ_direction&quot;:&quot;negative&quot;,&quot;motion_fx_rotateZ_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:50}},&quot;motion_fx_scale_effect&quot;:&quot;yes&quot;,&quot;motion_fx_scale_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0.1,&quot;sizes&quot;:[]},&quot;motion_fx_scale_range&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:33}},&quot;motion_fx_opacity_direction&quot;:&quot;out-in&quot;,&quot;motion_fx_opacity_level&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;motion_fx_blur_direction&quot;:&quot;out-in&quot;,&quot;motion_fx_rotateZ_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;motion_fx_scale_direction&quot;:&quot;out-in&quot;,&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf22fe8 elementor-widget elementor-widget-heading\" data-id=\"bf22fe8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">See the Future<br>with Us<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4dace9f elementor-widget elementor-widget-button\" data-id=\"4dace9f\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Buy Now<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\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\t\t<div class=\"unlimited-elements-background-overlay\" data-forid=\"7d7ba64\" data-location=\"back\" style=\"display:none\">\n\t\t\t<template>\n\t\t\t\n<!-- start Parallax Background -->\n<style>\/* widget: Parallax Background *\/\n\n#uc_parallax_background_bg_addon26900{\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  position: absolute;\n}\n\n#uc_parallax_background_bg_addon26900 .ue-parallax-item-wrapper{\n  position: absolute;\n}\n\n#uc_parallax_background_bg_addon26900 .simpleParallax{\n  height: 100%;\n}\n\/* parallax type background layer settings *\/\n\n  .elementor-repeater-item-68d95ef{\n\tleft: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  .elementor-repeater-item-68d95ef,\n  .elementor-repeater-item-68d95ef .ue-parallax-item-inner,\n  .elementor-repeater-item-68d95ef .ue-parallax-item{\n\twidth: 100%;\n    height: 100%;\n  }\n\n\t\n\n\/* visibility settings *\/\n.elementor-repeater-item-68d95ef{\n  display: block;\n}\n\n@media only screen and (max-width: 1024px){\n\t.elementor-repeater-item-68d95ef{\n      display: block;\n    }\n}\n\n@media only screen and (max-width: 767px){\n\t.elementor-repeater-item-68d95ef{\n      display: block;\n    }\n}\n\/* parallax type background layer settings *\/\n\t\n\n\/* visibility settings *\/\n.elementor-repeater-item-ffdf82f{\n  display: block;\n}\n\n@media only screen and (max-width: 1024px){\n\t.elementor-repeater-item-ffdf82f{\n      display: block;\n    }\n}\n\n@media only screen and (max-width: 767px){\n\t.elementor-repeater-item-ffdf82f{\n      display: block;\n    }\n}\n\/* parallax type background layer settings *\/\n\t\n\n\/* visibility settings *\/\n.elementor-repeater-item-6a493be{\n  display: block;\n}\n\n@media only screen and (max-width: 1024px){\n\t.elementor-repeater-item-6a493be{\n      display: block;\n    }\n}\n\n@media only screen and (max-width: 767px){\n\t.elementor-repeater-item-6a493be{\n      display: block;\n    }\n}\n\n\n<\/style>\n\n<div id=\"uc_parallax_background_bg_addon26900\" class=\"ue-parallax\">\n  <div class=\"ue-parallax-wrapper\">    \n    <div class=\"ue-parallax-item-wrapper elementor-repeater-item-68d95ef\">\n  <div class=\"ue-parallax-item-inner\">\n  \n          <img decoding=\"async\" class=\"ue-parallax-item\" src=\"https:\/\/www.artscoral.com\/wp-content\/uploads\/2025\/05\/m_1.png\" alt=\"m_1\" \/>\n      \n  <\/div>  \n<\/div>\n<div class=\"ue-parallax-item-wrapper elementor-repeater-item-ffdf82f\">\n  <div class=\"ue-parallax-item-inner\">\n  \n          <img decoding=\"async\" class=\"ue-parallax-item\" src=\"https:\/\/www.artscoral.com\/wp-content\/uploads\/2025\/05\/astro.png\" alt=\"astro\" \/>\n      \n  <\/div>  \n<\/div>\n<div class=\"ue-parallax-item-wrapper elementor-repeater-item-6a493be\">\n  <div class=\"ue-parallax-item-inner\">\n  \n          <img decoding=\"async\" class=\"ue-parallax-item\" src=\"https:\/\/www.artscoral.com\/wp-content\/uploads\/2025\/05\/m_3.png\" alt=\"m_3\" \/>\n      \n  <\/div>  \n<\/div>\n\n  <\/div>  \n<\/div>\n<script type=\"text\/javascript\"  id=\"ue_script_parallax_background\">\n\n\/* Parallax Background scripts: *\/ \n\njQuery(document).ready(function(){\nfunction uc_parallax_background_bg_addon26900_start(){\n\t\t\t\n\n  var objParallaxWidget = jQuery(\"#uc_parallax_background_bg_addon26900\");\n  var objItems = objParallaxWidget.find(\".ue-parallax-item\");\n  \n  \/**\n  * get array of orientations\n  *\/\n  \n  var itemsOrientationArray = [\n        \"down\",\n        \"up\",\n        \"down\",\n      ]; \n\n  \/**\n  * get array of sensitivity\n  *\/\n  var itemsSensitivityArray = [\n        \"0\",\n        \"2.2\",\n        \"2.2\",\n      ]; \n   \n  \/**\n  * get array of overflows\n  *\/\n  var itemsOverflowArray = [\n        \"true\",\n        \"true\",\n        \"true\",\n      ]; \n   \n  \/**\n  * get array of delays\n  *\/\n  var itemsDelayArray = [\n        \"0\",\n        \"0\",\n        \"0\",\n      ];  \n   \n  \/**\n  * get array of transitions\n  *\/\n  var itemsTransitionArray = [\n        \"ease\",\n        \"ease\",\n        \"ease\",\n      ];  \n   \n  \/**\n  * get array of scale directions\n  *\/\n  var itemSizeDirectionsArray = [\n        \"up\",\n        \"up\",\n        \"up\",\n      ];  \n   \n  \/**\n  * get array of scales\n  *\/\n  var itemSizeArray = [\n        \"4\",\n        \"7\",\n        \"4\",\n      ];  \n   \n  \/**\n  * get array of rotate directions\n  *\/\n  var itemRotateDirectionsArray = [\n        \"right\",\n        \"left\",\n        \"right\",\n      ];  \n   \n  \/**\n  * get array of rotates\n  *\/\n  var itemRotateArray = [\n        \"0\",\n        \"2\",\n        \"0\",\n      ];\n   \n  \/**\n  * get array of opacity directions\n  *\/\n  var itemOpacityDirectionsArray = [\n        \"fade-in\",\n        \"fade-in\",\n        \"fade-in\",\n      ];  \n   \n  \/**\n  * get array of opacities\n  *\/\n  var itemOpacityArray = [\n        \"0\",\n        \"0\",\n        \"0\",\n      ];\n\n  \/**\n  * for each item set its own parallax settings\n  *\/\n  objItems.each(function(index, parallaxElement){\n  \n    new simpleParallax(parallaxElement, {\n      \n        delay: itemsDelayArray[index], \/\/delay before transition\n        orientation: itemsOrientationArray[index], \/\/the direction of the transition\n        scale: itemsSensitivityArray[index], \/\/how visible the transition is\n        overflow: itemsOverflowArray[index] === \"true\", \/\/itemsOverflowArray[index] returns string, so make sure it's a boolean value \/ makes overflow hiden for the image container\n        transition: itemsTransitionArray[index], \/\/css transition\n        sizeDirection: itemSizeDirectionsArray[index], \/\/whether element is getting bigger or smaller\n        sizeSpeed: Number(itemSizeArray[index]), \/\/adjust size of the element during scroll using transform scale(n) css property - the bigger number the faster is change \/ make sure you set a number\n      \trotateDirection: itemRotateDirectionsArray[index], \/\/to right or to left\n      \trotateSpeed: Number(itemRotateArray[index]), \/\/how fast is the rotate\n        opacityDirection: itemOpacityDirectionsArray[index], \/\/fade-in \/ fade-out\n        opacityLevel: Number(itemOpacityArray[index]) \/\/how transparent element is (the higher number the more transparent becomes element)\n      \n    });    \n  \n  });\n    \t\n}if(jQuery(\"#uc_parallax_background_bg_addon26900\").length) uc_parallax_background_bg_addon26900_start();\n\tjQuery( document ).on( 'elementor\/popup\/show', (event, id, objPopup) => {\n\tif(objPopup.$element.has(jQuery(\"#uc_parallax_background_bg_addon26900\")).length) uc_parallax_background_bg_addon26900_start();});\n});\n\n\t\t\t\n<\/script>\n<!-- end Parallax Background -->\t\t\t<\/template>\n\t\t<\/div>\n\t\t\n\t\t<div class=\"elementor-element elementor-element-ef51216 e-flex e-con-boxed e-con e-parent\" data-id=\"ef51216\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2f9083d elementor-widget elementor-widget-ucaddon_ue_scroll_to_top\" data-id=\"2f9083d\" data-element_type=\"widget\" data-widget_type=\"ucaddon_ue_scroll_to_top.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Scroll To Top -->\n\t\t<link id='font-awesome-css' href='https:\/\/www.artscoral.com\/wp-content\/plugins\/unlimited-elements-for-elementor-premium\/assets_libraries\/font-awesome6\/fontawesome-all.min.css' type='text\/css' rel='stylesheet' >\n\t\t<link id='font-awesome-4-shim-css' href='https:\/\/www.artscoral.com\/wp-content\/plugins\/unlimited-elements-for-elementor-premium\/assets_libraries\/font-awesome6\/fontawesome-v4-shims.min.css' type='text\/css' rel='stylesheet' >\n\n<style>\/* widget: Scroll To Top *\/\n\n#uc_ue_scroll_to_top_elementor_2f9083d.ue-scroll-to {\n    display: flex;\n   z-index: auto;\n  \n}\n#uc_ue_scroll_to_top_elementor_2f9083d .ue-scroll-to-cta {\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  transition: all 400ms ease-in-out;\n  align-content:center;\n  justify-content:center;\n  flex-direction:column;\n  text-align:center;\n}\n#uc_ue_scroll_to_top_elementor_2f9083d .ue-scroll-to-cta .ue-scroll-to-icon {\n  line-height:1em;\n  margin:0 auto;\n}\n\n#uc_ue_scroll_to_top_elementor_2f9083d .ue-scroll-to-cta .ue-scroll-to-icon svg {\n  height:1em; \n  width:1em; \n}\n\n.ue-scroll-to-cta \n#uc_ue_scroll_to_top_elementor_2f9083d .ue-scroll-to-icon {\n  position: relative;\n}\n\n#uc_ue_scroll_to_top_elementor_2f9083d .ue-scroll-to-icon:hover {\n  cursor: pointer;\n}\n.ue-snap-v-middle{\n  top:50%;\n}\n.ue-scroll-to-text\n{\n  font-size:10px;\n}\n\n\t\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\n<\/style>\n\n<div id=\"uc_ue_scroll_to_top_elementor_2f9083d\" class=\"ue-scroll-to ue-snap-v-bottom ue-snap-h-right\">\n      <div class=\"ue-scroll-to-cta none\">\n          <div class=\"ue-scroll-to-icon\"><i class='fas fa-arrow-up'><\/i><\/div>\n          \t\n      <\/div>\n<\/div>\n<!-- end Scroll To Top -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d84d0db elementor-widget elementor-widget-text-editor\" data-id=\"d84d0db\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Want to see the demo again? No problem! Simply click the &#8220;Scroll to Top&#8221; button, and you&#8217;ll be taken back to the beginning so you can enjoy the parallax effect all over again.<\/p>\t\t\t\t\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Start by scrolling down the page to see the parallax ef<a class=\"btn btn-primary more-link\" href=\"https:\/\/www.artscoral.com\/fr\/parallax-background-with-scrolling-effects\/\">Poursuivre la lecture<\/a><\/p>","protected":false},"author":1,"featured_media":3913,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"pmpro_default_level":"","footnotes":""},"class_list":["post-3914","page","type-page","status-publish","has-post-thumbnail","hentry","pmpro-has-access"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.artscoral.com\/fr\/wp-json\/wp\/v2\/pages\/3914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artscoral.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.artscoral.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.artscoral.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.artscoral.com\/fr\/wp-json\/wp\/v2\/comments?post=3914"}],"version-history":[{"count":0,"href":"https:\/\/www.artscoral.com\/fr\/wp-json\/wp\/v2\/pages\/3914\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artscoral.com\/fr\/wp-json\/wp\/v2\/media\/3913"}],"wp:attachment":[{"href":"https:\/\/www.artscoral.com\/fr\/wp-json\/wp\/v2\/media?parent=3914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}