diff --git a/demo/css/reset.css b/demo/css/reset.css
new file mode 100644
index 0000000..4787273
--- /dev/null
+++ b/demo/css/reset.css
@@ -0,0 +1,91 @@
+/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
+
+/* Reset box-model and set borders */
+/* ============================================ */
+
+*,
+::before,
+::after {
+ box-sizing: border-box;
+ border-style: solid;
+ border-width: 0;
+}
+
+/* Document */
+/* ============================================ */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ * 3. Remove gray overlay on links for iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+ -webkit-tap-highlight-color: transparent; /* 3*/
+}
+
+/* Sections */
+/* ============================================ */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/* Lists (enumeration) */
+/* ============================================ */
+
+ul,
+ol {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+ text-decoration: none;
+ color: inherit;
+}
+
+/* Replaced content */
+/* ============================================ */
+
+/**
+ * Prevent vertical alignment issues.
+ */
+
+svg,
+img,
+embed,
+object,
+iframe {
+ vertical-align: bottom;
+}
+
+/**
+ * Correct cursors for clickable elements.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ cursor: pointer;
+}
+
+button:disabled,
+[type="button"]:disabled,
+[type="reset"]:disabled,
+[type="submit"]:disabled {
+ cursor: default;
+}
diff --git a/demo/css/style.css b/demo/css/style.css
new file mode 100644
index 0000000..ba6c2f5
--- /dev/null
+++ b/demo/css/style.css
@@ -0,0 +1,112 @@
+ body {
+ padding-top: 10vh;
+ padding-bottom: 100vh;
+ }
+
+ .container {
+ max-width: 85%;
+ margin: 0 auto;
+ }
+
+ .buttons {
+ position: fixed;
+ padding: 2.5rem;
+ bottom: 0;
+ right: 0;
+ }
+
+ h2 {
+ margin-top: 10rem;
+ margin-bottom: 1rem;
+ }
+
+ img {
+ width: 700px;
+ height: 500px;
+ display: block;
+ object-fit: cover;
+ }
+
+ video {
+ height: 500px;
+ object-fit: cover;
+ vertical-align: bottom;
+ }
+
+ .border-radius {
+ border-radius: 5em;
+ }
+
+ .margin-auto {
+ display: block;
+ margin: 0 auto;
+ width: 500px;
+ }
+
+ .margin-left-auto {
+ display: block;
+ margin-left: auto;
+ width: 500px;
+ }
+
+ .bg {
+ background-size: cover;
+ background-image: url(https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80);
+ height: 500px;
+ }
+
+ .absolute-wrapper {
+ background-color: #f8f8f8;
+ position: relative;
+ width: 100%;
+ height: 800px;
+ border: 1px solid;
+ }
+
+ .absolute {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ display: block;
+ width: 70%;
+ height: 500px;
+ }
+
+ .absoluteTransformCenter {
+ width: 70%;
+ height: 500px;
+ display: block;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ .grid-wrapper {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+ gap: 10px;
+ grid-auto-flow: dense;
+ margin: 0 auto;
+ max-width: 50%;
+ }
+
+ .grid-wrapper img {
+ display: block;
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ }
+
+ .grid-wrapper>li:nth-child(2),
+ .grid-wrapper>li:nth-child(4),
+ .grid-wrapper>li:nth-child(5),
+ .grid-wrapper>li:nth-child(8) {
+ grid-column-end: span 2;
+ }
+
+ @media screen and (max-width: 768px) {
+ img {
+ width: 100%;
+ }
+ }
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..424ab71
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,135 @@
+
+
+
+
+
+
+ Ukiyo.js Demo
+
+
+
+
+
+
+
+
+
img element
+
+
+
+
background-image
+
+
+
+
picture element
+
+
+
+ 
+
+
+
+
video element
+
+
+
+
(option) data-u-scale scale: 1.7
+
+
+
+
(option) data-u-speed speed: 0.7
+
+
+
+
(option) data-u-willchange
+
+
+
(option) data-u-wrapper="customName"
+
+
+
+
(style) with border-radius
+
+
+
+
(style) with margin: auto
+
+
+
(style) with margin-left: auto
+
+
+
+
+
(style) with position: absolute
+
+
+
+
+
+
(style) with position: absolute + transform: translate(-50%, -50%)
+
+
+
+
+
+
(style) with CSS Grid
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demo/ukiyo.min.js b/demo/ukiyo.min.js
new file mode 100644
index 0000000..fed274c
--- /dev/null
+++ b/demo/ukiyo.min.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Ukiyo=e()}(this,(function(){"use strict";var t=function(t){return Array.prototype.slice.call(t)},e=function(){var t=window.navigator.userAgent,e=!!t.match(/iPad/i)||!!t.match(/iPhone/i),i=!!t.match(/WebKit/i);return e&&i&&!t.match(/CriOS/i)},i={scale:1.5,speed:1.5,wrapperClass:null,willChange:!1,externalRAF:!1},n=function(t,e){var n=this;if(this.element=t,this.wrapper=document.createElement("div"),this.options=Object.assign({},i,e),this.updateOptions(),this.vh=document.documentElement.clientHeight,this.isVisible=!1,this.damp=this.calcDamp(document.documentElement.clientWidth),this.elementTagName=this.element.tagName.toLowerCase(),"img"===this.elementTagName){var o=this.element.getAttribute("src");if(!o)return;(async function(t){var e=new Image;return e.src=t,await e.decode(),e})(o).then((function(){n.createParallax()}))}else this.createParallax()};n.prototype.createParallax=function(){this.setStyle(!0),this.wrapElement(),e()||this.createObserver()},n.prototype.updateOptions=function(){var t=this.element.getAttribute("data-u-scale"),e=this.element.getAttribute("data-u-speed"),i=this.element.getAttribute("data-u-willchange");null!==t&&(this.options.scale=Number(t)),null!==e&&(this.options.speed=Number(e)),null!==i&&(this.options.willChange=!0)},n.prototype.setStyle=function(t){void 0===t&&(t=!1);var e=this.element.clientHeight,i=this.element.clientWidth,n=window.getComputedStyle(this.element),o="absolute"===n.position,s=this.wrapper.style,r=this.element.style;this.overflow=Math.floor(10*(e-e*this.options.scale))/10,this.overflowAbs=Math.abs(this.overflow),o&&"0px"!==n.marginRight&&"0px"!==n.marginLeft&&n.marginLeft===n.marginRight&&(s.margin="auto"),"0px"===n.marginTop&&"0px"===n.marginBottom||(s.marginTop=n.marginTop,s.marginBottom=n.marginBottom,r.marginTop="0",r.marginBottom="0"),"auto"!==n.inset&&(s.top=n.top,s.right=n.right,s.bottom=n.bottom,s.left=n.left,r.top="0",r.right="0",r.bottom="0",r.left="0"),"none"!==n.transform&&(s.transform=n.transform),"auto"!==n.zIndex&&(s.zIndex=n.zIndex),s.position=o?"absolute":"relative","auto"!==n.gridArea&&"auto / auto / auto / auto"!==n.gridArea&&(s.gridArea=n.gridArea,r.gridArea="auto"),t&&(s.width="100%",s.overflow="hidden",r.display="block",r.overflow="hidden",r.backfaceVisibility="hidden","0px"!==n.padding&&(r.padding="0"),"img"===this.elementTagName?r.objectFit="cover":"video"!==this.elementTagName&&(r.backgroundPosition="center")),"0px"!==n.borderRadius&&(s.borderRadius=n.borderRadius,s.isolation||(s.isolation="isolate"),"0px"!==n.marginLeft&&(s.marginLeft=n.marginLeft,r.marginLeft="0"),"0px"!==n.marginRight&&(s.marginRight=n.marginRight,r.marginRight="0"),s.width=i+"px",r.width=i+"px"),o&&(s.width=i+"px",r.width="100%"),"none"!==n.maxHeight&&(s.maxHeight=n.maxHeight,r.maxHeight="none"),"0px"!==n.minHeight&&(s.minHeight=n.minHeight,r.minHeight="none"),s.height=e+"px",r.height=e*this.options.scale+"px",this.wrapperHeight=e},n.prototype.wrapElement=function(){var t=this.element.getAttribute("data-u-wrapper-class")||this.options.wrapperClass;t&&this.wrapper.classList.add(t);var e=this.element.closest("picture");if(null!==e)null!==e.parentNode&&e.parentNode.insertBefore(this.wrapper,e),this.wrapper.appendChild(e);else{var i=this.element.parentNode;null!==i&&i.insertBefore(this.wrapper,this.element),this.wrapper.appendChild(this.element)}},n.prototype.checkVisible=function(){var t=this.wrapper.getBoundingClientRect();0=1.4||e>=1.4)&&t<=1e3){e<1&&(e=1),i<1&&(i=1);var n=1.2-(1-(t/1e3+(3-(e+i)))),o=Math.max(.5,Math.min(1,n));return Math.floor(100*o)/100}return 1},n.prototype.transformParallax=function(){this.element.style.transform="translate3d(0 , "+this.calcTranslateValue()+"px , 0)"},n.prototype.animate=function(){e()&&this.checkVisible(),window.pageYOffset<0||this.isVisible&&this.transformParallax()},n.prototype.reset=function(){this.damp=this.calcDamp(window.innerWidth);var t=this.wrapper.style,e=this.element.style;this.vh=document.documentElement.clientHeight,t.width="",t.position="",t.height="100%",e.width="","img"===this.elementTagName&&"absolute"===t.position&&(t.height="100%"),""===t.gridArea?e.height="":e.height="100%","0px"!==t.margin&&(t.margin="",e.margin=""),"auto"!==t.inset&&(t.top="",t.right="",t.bottom="",t.left="",e.top="",e.right="",e.bottom="",e.left=""),"none"!==t.transform&&(t.transform="",e.transform=""),"auto"!==t.zIndex&&(t.zIndex=""),"0px"!==t.borderRadius&&(t.borderRadius="",t.isolation=""),this.setStyle(),this.transformParallax()},n.prototype.destroy=function(){var t;this.observer&&this.observer.disconnect(),this.wrapper.removeAttribute("style"),this.element.removeAttribute("style"),(t=this.wrapper).replaceWith.apply(t,this.wrapper.childNodes)};var o=function(e,i){if(this.elements=[],!e)throw new Error("Argument 'elements' is null.");var n,o;(this.elements=function(e){return Array.isArray(e)?e:"string"==typeof e?t(document.querySelectorAll(e)):e instanceof HTMLElement?[e]:e instanceof NodeList||e instanceof HTMLCollection?t(e):[e]}(e),this.options=i,this.instances=[],this.externalRAF=!(!this.options||!this.options.externalRAF)&&this.options.externalRAF,this.onResizeEvent=this.resize.bind(this),this.isInit=!1,n="undefined"!=typeof Promise&&-1!==Promise.toString().indexOf("[native code]"),o="undefined"!=typeof Element&&Element.prototype.closest,n&&o&&"IntersectionObserver"in window)&&this.init()};return o.prototype.init=function(){var t=this;this.isInit||(this.instances=this.elements.map((function(e){return new n(e,t.options)})),this.externalRAF||this.animate(),this.addEventListeners(),this.isInit=!0)},o.prototype.animate=function(){this.instances.forEach((function(t){t.animate()})),this.externalRAF||(this.requestId=window.requestAnimationFrame(this.animate.bind(this)))},o.prototype.cancel=function(){this.requestId&&window.cancelAnimationFrame(this.requestId)},o.prototype.reset=function(){this.instances.forEach((function(t){t.reset()}))},o.prototype.resize=function(){clearTimeout(this.timer),this.timer=window.setTimeout(this.reset.bind(this),500),this.reset.bind(this)},o.prototype.addEventListeners=function(){navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)?window.addEventListener("orientationchange",this.onResizeEvent):window.addEventListener("resize",this.onResizeEvent)},o.prototype.destroy=function(){this.cancel(),window.removeEventListener("resize",this.onResizeEvent),window.removeEventListener("orientationchange",this.onResizeEvent),this.instances.forEach((function(t){t.destroy()})),this.isInit=!1},o}));
diff --git a/demo/ukiyo.min.js.map b/demo/ukiyo.min.js.map
new file mode 100644
index 0000000..cdaad46
--- /dev/null
+++ b/demo/ukiyo.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"ukiyo.min.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
\ No newline at end of file