{"id":293,"date":"2022-10-25T16:11:55","date_gmt":"2022-10-25T16:11:55","guid":{"rendered":"https:\/\/hayhurst2.hulldesign.co.uk\/?page_id=293"},"modified":"2024-10-28T12:51:07","modified_gmt":"2024-10-28T12:51:07","slug":"parallax","status":"publish","type":"page","link":"https:\/\/hayhurst2.hulldesign.co.uk\/index.php\/parallax\/","title":{"rendered":"Parallax"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"293\" class=\"elementor elementor-293\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fbc8f62 elementor-section-full_width elementor-section-height-min-height elementor-section-height-default elementor-section-items-middle\" data-id=\"fbc8f62\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1ee1b11\" data-id=\"1ee1b11\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f3d086e elementor-widget elementor-widget-heading\" data-id=\"f3d086e\" 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\">Parallax Exercise<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-81962b1 elementor-section-full_width elementor-section-height-full elementor-section-height-default elementor-section-items-middle\" data-id=\"81962b1\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5d49a26\" data-id=\"5d49a26\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9c6a305 elementor-absolute elementor-widget elementor-widget-heading\" data-id=\"9c6a305\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" 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\">First section heading<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0edec4c elementor-absolute elementor-invisible elementor-widget elementor-widget-image\" data-id=\"0edec4c\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;_animation&quot;:&quot;rotateInDownRight&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/hayhurst2.hulldesign.co.uk\/wp-content\/uploads\/2022\/10\/ufo-300x300.png\" class=\"attachment-medium size-medium wp-image-298\" alt=\"\" srcset=\"https:\/\/hayhurst2.hulldesign.co.uk\/wp-content\/uploads\/2022\/10\/ufo-300x300.png 300w, https:\/\/hayhurst2.hulldesign.co.uk\/wp-content\/uploads\/2022\/10\/ufo-150x150.png 150w, https:\/\/hayhurst2.hulldesign.co.uk\/wp-content\/uploads\/2022\/10\/ufo.png 360w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\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\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5e5c46b elementor-section-full_width elementor-section-height-min-height elementor-section-height-default elementor-section-items-middle\" data-id=\"5e5c46b\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f526830\" data-id=\"f526830\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-47c3594 elementor-section-full_width elementor-section-height-full elementor-section-height-default elementor-section-items-middle\" data-id=\"47c3594\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ad3cbf5\" data-id=\"ad3cbf5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-48b8414 elementor-widget elementor-widget-heading\" data-id=\"48b8414\" 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\"><b>Second Heading<\/b><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-51c7a14 elementor-section-full_width elementor-section-height-min-height elementor-section-height-default elementor-section-items-middle\" data-id=\"51c7a14\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0a03850\" data-id=\"0a03850\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-728b341 elementor-section-full_width elementor-section-height-full elementor-section-height-default elementor-section-items-middle\" data-id=\"728b341\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d6d61c8\" data-id=\"d6d61c8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a6afe7e elementor-absolute elementor-widget elementor-widget-html\" data-id=\"a6afe7e\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n  #parallax {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  background-image: url(https:\/\/raw.githubusercontent.com\/oscicen\/oscicen.github.io\/master\/img\/depth-3.png), url(https:\/\/raw.githubusercontent.com\/oscicen\/oscicen.github.io\/master\/img\/depth-2.png), url(https:\/\/raw.githubusercontent.com\/oscicen\/oscicen.github.io\/master\/img\/depth-1.png);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-position: 50% 50%;\n}\nh1 {\n  position: absolute;\n  top: 47%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: #fff;\n  font-family: \"Arial\";\n  text-transform: uppercase;\n  opacity: .2;\n  font-size: 70px;\n}  \n    \n<\/style>\n\n<div id=\"parallax\"><h1>Mouse Parallax<\/h1><\/div>\n\n<script>\n    \n    (function() {\n    \/\/ Add event listener\n    document.addEventListener(\"mousemove\", parallax);\n    const elem = document.querySelector(\"#parallax\");\n    \/\/ Magic happens here\n    function parallax(e) {\n        let _w = window.innerWidth\/2;\n        let _h = window.innerHeight\/2;\n        let _mouseX = e.clientX;\n        let _mouseY = e.clientY;\n        let _depth1 = `${50 - (_mouseX - _w) * 0.01}% ${50 - (_mouseY - _h) * 0.01}%`;\n        let _depth2 = `${50 - (_mouseX - _w) * 0.02}% ${50 - (_mouseY - _h) * 0.02}%`;\n        let _depth3 = `${50 - (_mouseX - _w) * 0.06}% ${50 - (_mouseY - _h) * 0.06}%`;\n        let x = `${_depth3}, ${_depth2}, ${_depth1}`;\n        console.log(x);\n        elem.style.backgroundPosition = x;\n    }\n\n})();\n    \n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4b861aa elementor-section-full_width elementor-section-height-full elementor-section-height-default elementor-section-items-middle\" data-id=\"4b861aa\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5e5026c\" data-id=\"5e5026c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Parallax Exercise First section heading Second Heading Mouse Parallax<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-293","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hayhurst2.hulldesign.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hayhurst2.hulldesign.co.uk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hayhurst2.hulldesign.co.uk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hayhurst2.hulldesign.co.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hayhurst2.hulldesign.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=293"}],"version-history":[{"count":38,"href":"https:\/\/hayhurst2.hulldesign.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/293\/revisions"}],"predecessor-version":[{"id":531,"href":"https:\/\/hayhurst2.hulldesign.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/293\/revisions\/531"}],"wp:attachment":[{"href":"https:\/\/hayhurst2.hulldesign.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}