diff --git a/MIT.LICENSE b/MIT.LICENSE
deleted file mode 100755
index c0de17d..0000000
--- a/MIT.LICENSE
+++ /dev/null
@@ -1,17 +0,0 @@
-Open Source Initiative OSI - The MIT License (MIT):Licensing
-[OSI Approved License]
-The MIT License (MIT)
-
-Copyright (c) 2014 CynthiaSanchez - Parallax Image Scroll
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
-documentation files (the "Software"), to deal in the Software without restriction, including without limitation
-the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, 
-and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
-OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR 
-IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
deleted file mode 100644
index a25d80f..0000000
--- a/README.md
+++ /dev/null
@@ -1,112 +0,0 @@
-Parallax-img-scroll
-===================
-IMPORTANT: The use of Parallax-img-scroll is free for both personal and commmercial use.
-
-DEMO: <a href="http://cyntss.github.io/Parallax-img-scroll/" target="_blank"> Parallax Image Scroll</a>
-
-Other pages using it:
-<a href="http://trivialine.herokuapp.com/" target="_blank">TriviaLine</a>
-
-<h3>Whats new in version 1.2.5</h3>
-* Page reload fix. Scroll to top on page load.
-* Page Loader added: adds a "Loading Page" which fades out after all images have been loaded. Simply set "pageLoader: true" in your configuration.
-
-<h2>Installing</h2>
-<ul>
-<li>
-  Download <strong>parallaxImg.js</strong> from <a href="https://github.com/cyntss/Parallax-img-scroll/blob/master/demo/js/parallaxImg.js" target="_blank">here</a></li>
-<li>
-  Add it to your &lt;head&gt; like: <br/>
-  <pre>&lt;script src="js/parallaxImg.js" type="text/javascript"&gt;&lt;/script&gt;</pre>
-</li>
-<li>
-  Call Parallax Image Scroll on Document Ready <br/>
-  <pre> 
-    $(document).on("ready", function() {
-      parallaxImgScroll();
-    }); 
-  </pre>
-</li>
-<li>
-  In your HTML wrap you only need to add the class <strong>parallax-img-container</strong> to the wraper containing the information itself (e.g. it can have a video, images, text, etc. every element that will remain static) and the floating elements you want to give life when scrolling your site.<br/>
-  To make the elements in this container move, you only need to add the class <strong>parallax-move</strong> to them. You can make any kind of element move: images, divs, titles, etc. etc.
-  <h3>Example</h3>
-  <pre>
-    &lt;div class="parallax-img-container"&gt;
-      &lt;h1&gt;The day Internet was the future&lt;/h1&gt;
-      &lt;p&gt;Some static text that will not move&lt;/p&gt;
-      
-      &lt;!-- here I put the elements that will move.. they dont 
-      have to necessarily be at the bottom of the container --&gt;
-      
-      &lt;img class="parallax-move"src="01.png" /&gt;
-      &lt;div class="parallax-move"&gt;something here&lt;/div&gt;
-      &lt;p class="parallax-move"&gt;text that will move&lt;/p&gt;
-    &lt;/div&gt;
-  </pre>
-  <h4>Important!</h4>
-   <ul>
-     <li>The container with class="parallax-img-container" can have multiple classes.</li>
-     <li>There must be a parent container with a fixed height in order for you to be able to whether give the fixed position to your floating elements, or for Parallax-img-scroll to give a random position inside the container.</li>
-   </ul>
-</li>
-</ul>
-<h2>Options</h2>
-<ul>
-<li>
-<h3>Global Parameters</h3>
-When initiating Parallax-img-scroll you can pass an object with two parameters as stated below:
-<pre>
-  $(document).on("ready", function() {
-    var parallaxSettings = { 
-      initialOpacity: 1, //from 0 to 1, e.g. 0.34 is a valid value. 0 = transparent, 1 = Opaque
-      opacitySpeed: 0.1, //values from 0.01 to 1 -> 0.01: slowly appears on screen; 1: appears as soon as the user scrolls 1px
-      pageLoader: true //creates a page loader. It is set "false" by default.
-    };
-
-    parallaxImgScroll(parallaxSettings);
-  });
-</pre>
-<h4>initialOpacity</h4>
-Is the initial opacity for all the elements with class="parallax-move".
-Can have a decimal value from 0 to 1 (e.g.: 0, 0.4, 0.9, etc), where 0 means the elements will start transparent and 1 meaning they will appear opaque on screen.
-
-<h4>opacitySpeed</h4>
-Is the speed in which the element will become opaque as the user scrolls down your page.
-Can have a decimal value from 0.01 to 1, where 0.01 means it will veryyyy slowly appear on screen, and 1 means it will become opaque as soon as the user touches the scroll of the mouse ;).
-ATTENTION: 0 is also a valid value, but it means the elements WONT become visible...ever.
-
-<h4>pageLoader</h4>
-This option of type Boolean (true/false) will add a "loading page" div while the page is being loaded. The div will disappear once all the images and elements have been loaded and your page will fade into the screen.
-It is set to False by default by I recommend you setting it as True when you initialize ParallaxImgScroll as it will avoid the user from seing any imperfection of the screen being rendered para Parallax.
-
-</li>
-<li>
-<h3>Individual Parameters</h3>
-Calling ParallaxImgScroll will assing random positions to the elements containing the class "parallax-move" as well as random scrolling speed.
-This is very useful if you have a design where you need stars, lights, bugs, etc. appearing randomly on the container (with class="parallax-img-container").
-However, in most of the cases you may need to set a fixed initial position for your elements. For that, you can play with the role attribute as stated in the following lines:
-<ul>
-<li>data-ps-z-index: will set the position of the element as a layer. For example, in the <a href="http://cyntss.github.io/Parallax-img-scroll/">demo</a> you can see when you scroll down and see the people appearing, they have been distributed in layers so then one is on top of the other to create this sort of 3D effect that Parallax defines.<br>In order to do so you can give a value of 1 to the element that goes below, then "2" to the element that goes on top of this and "3" to the next element, etc.</li>
-<li>data-ps-speed: This attribute will set the scrolling speed. The value here starts from 0.01 as a veryyyyy slow movement on scroll down, and a number 10 is a very fast element passing by when the user scrolls. (give it a try until you find the speed you need for each of your elements)
-</li>
-<li>data-ps-vertical-position: This is where you can set up the initial Vertical position. Please notice that this vertical position will add the property "bottom: xxx" to your element at the beginning, and then of course update it every time the user scrolls down/up calculating the speed you have declared (or the random one assigned if you didnt declare one). Therefor, if you set a value like <strong>data-ps-vertical-position="100"</strong> it means the element will start 100px from the bottom of the container, that means, it will have a CSS property of <strong>bottom: 100px;</strong>
-</li>
-<li>
-data-ps-horizontal-position: This is where you set up the horizontal position (yes, the name says it). In this case the behaviour is similar to the one stated above but the property added in this case in CSS is <strong>Left</strong>, which means if you declare this attribute for your element as <strong>data-ps-horizontal-position="50"</strong> this will have a distance of 50px between the left side of the window and the actual element.
-</li>
-<h4>An example:</h4>
-<pre>&lt;div src='img/assassins/smoke-01.png' class='parallax-move' data-ps-z-index="1" data-ps-speed="1" data-ps-vertical-position="700" data-ps-horizontal-position="420"&gt;&lt;/div&gt;</pre>
-In this case you can see this image is the lowest one in the layer <strong>data-ps-z-index="1"</strong>, it has a scrolling speed of 1 <strong> data-ps-speed="1"</strong>, and it has a vertical position of 700px from the bottom and 420px from the left side of the window <strong>data-ps-vertical-position="700" data-ps-horizontal-position="420"</strong>
-</ul>
-</li>
-<h2>Dependencies:</h2>
-Make sure to previously include the JQuery script:
-http://jquery.com/download/
-
-To get a better behaviour of your scroll I recommend also adding "jquery.nicescroll.min.js" which will give your page an smooth scrolling like mobiles and ipads/tablets have.
-(more info: http://nicescroll.areaaperta.com/).
-
-For more information do not hesitate contacting me on twitter as @cyntss
-
-Licensed under the MIT License, http://www.opensource.org/licenses/mit-license.php
diff --git a/demo/img/assassins/001.png b/assassins/001.png
similarity index 100%
rename from demo/img/assassins/001.png
rename to assassins/001.png
diff --git a/demo/img/assassins/002.png b/assassins/002.png
similarity index 100%
rename from demo/img/assassins/002.png
rename to assassins/002.png
diff --git a/demo/img/assassins/003.png b/assassins/003.png
similarity index 100%
rename from demo/img/assassins/003.png
rename to assassins/003.png
diff --git a/demo/img/assassins/Thumbs.db b/assassins/Thumbs.db
similarity index 100%
rename from demo/img/assassins/Thumbs.db
rename to assassins/Thumbs.db
diff --git a/demo/img/assassins/bg-assassins.jpg b/assassins/bg-assassins.jpg
similarity index 100%
rename from demo/img/assassins/bg-assassins.jpg
rename to assassins/bg-assassins.jpg
diff --git a/demo/img/assassins/bg.jpg b/assassins/bg.jpg
similarity index 100%
rename from demo/img/assassins/bg.jpg
rename to assassins/bg.jpg
diff --git a/demo/img/assassins/birds.png b/assassins/birds.png
similarity index 100%
rename from demo/img/assassins/birds.png
rename to assassins/birds.png
diff --git a/demo/img/assassins/black-cloud.png b/assassins/black-cloud.png
similarity index 100%
rename from demo/img/assassins/black-cloud.png
rename to assassins/black-cloud.png
diff --git a/demo/img/assassins/smoke-01.png b/assassins/smoke-01.png
similarity index 100%
rename from demo/img/assassins/smoke-01.png
rename to assassins/smoke-01.png
diff --git a/demo/img/assassins/smoke-02.png b/assassins/smoke-02.png
similarity index 100%
rename from demo/img/assassins/smoke-02.png
rename to assassins/smoke-02.png
diff --git a/demo/img/assassins/smoke-03.png b/assassins/smoke-03.png
similarity index 100%
rename from demo/img/assassins/smoke-03.png
rename to assassins/smoke-03.png
diff --git a/demo/img/assassins/smoke-04.png b/assassins/smoke-04.png
similarity index 100%
rename from demo/img/assassins/smoke-04.png
rename to assassins/smoke-04.png
diff --git a/demo/img/assassins/smoke-05.png b/assassins/smoke-05.png
similarity index 100%
rename from demo/img/assassins/smoke-05.png
rename to assassins/smoke-05.png
diff --git a/demo/img/assassins/smoke-06.png b/assassins/smoke-06.png
similarity index 100%
rename from demo/img/assassins/smoke-06.png
rename to assassins/smoke-06.png
diff --git a/demo/img/assassins/smoke-07.png b/assassins/smoke-07.png
similarity index 100%
rename from demo/img/assassins/smoke-07.png
rename to assassins/smoke-07.png
diff --git a/demo/img/assassins/stick.png b/assassins/stick.png
similarity index 100%
rename from demo/img/assassins/stick.png
rename to assassins/stick.png
diff --git a/demo/img/circle.png b/circle.png
similarity index 100%
rename from demo/img/circle.png
rename to circle.png
diff --git a/demo/.DS_Store b/demo/.DS_Store
deleted file mode 100644
index dee0e3e..0000000
Binary files a/demo/.DS_Store and /dev/null differ
diff --git a/demo/MIT.LICENSE b/demo/MIT.LICENSE
deleted file mode 100755
index c0de17d..0000000
--- a/demo/MIT.LICENSE
+++ /dev/null
@@ -1,17 +0,0 @@
-Open Source Initiative OSI - The MIT License (MIT):Licensing
-[OSI Approved License]
-The MIT License (MIT)
-
-Copyright (c) 2014 CynthiaSanchez - Parallax Image Scroll
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
-documentation files (the "Software"), to deal in the Software without restriction, including without limitation
-the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, 
-and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
-OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR 
-IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/demo/index.html b/demo/index.html
deleted file mode 100644
index 7a72331..0000000
--- a/demo/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <title>Parallax Images Scroll</title>
-  <script src="js/jquery.js" type="text/javascript"></script>
-  <script src="js/jquery.nicescroll.min.js" type="text/javascript"></script>
-  <script src="js/parallaxImg.js" type="text/javascript"></script>
-  <link rel="stylesheet" type="text/css" href="css/demotheme.css">
-  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
-  <script type="text/javascript">
-    $(document).on("ready", function() {
-      var parallaxSettings = {
-        initialOpacity: 1, //from 0 to 1, e.g. 0.34 is a valid value. 0 = transparent, 1 = Opaque
-        opacitySpeed: 0.1, //values from 0.01 to 1 -> 0.01: slowly appears on screen; 1: appears as soon as the user scrolls 1px
-        pageLoader: true
-      };
-
-      parallaxImgScroll(parallaxSettings);
-    });
-  </script>
-</head>
-<body>
-  <header>
-    <nav>
-      <a href="http://cyntss.github.io/Parallax-img-scroll/">Home</a><a href="http://cynt.co.nf/">Cyntss Page</a><a href="">Documentation</a>
-    </nav>
-  </header>
-  <section>
-    <article class="parallax-img-container">
-      <h1>Parallax Image Scroll</h1>
-      <h3>Give life to your website</h3>
-      <a class="btn-download-init" href="js/parallaxImg.js">Download .JS</a>
-      <!-- images for parallax -->
-      <img src="img/assassins/smoke-01.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="1" data-ps-vertical-position="700" data-ps-horizontal-position="420" />
-      <img src="img/assassins/smoke-02.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.5" data-ps-vertical-position="700" data-ps-horizontal-position="220" />
-      <img src="img/assassins/smoke-03.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="1" data-ps-vertical-position="700" data-ps-horizontal-position="300" />
-      <img src="img/assassins/smoke-04.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.5" data-ps-vertical-position="500" data-ps-horizontal-position="620" />
-      <img src="img/assassins/smoke-05.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="1" data-ps-vertical-position="600" data-ps-horizontal-position="0" />
-      <img src="img/assassins/smoke-06.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.4" data-ps-vertical-position="200" data-ps-horizontal-position="520" />
-      <img src="img/assassins/smoke-07.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.3" data-ps-vertical-position="300" data-ps-horizontal-position="320" />
-      <img src="img/assassins/smoke-06.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.2" data-ps-vertical-position="-900" data-ps-horizontal-position="220" />
-      <img src="img/assassins/smoke-05.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.3" data-ps-vertical-position="-600" data-ps-horizontal-position="150" />
-      <img src="img/assassins/stick.png" class="parallax-move" data-ps-z-index="2" data-ps-speed="1" data-ps-vertical-position="1200" data-ps-horizontal-position-right="0" />
-      <img src="img/assassins/003.png" class="parallax-move" data-ps-z-index="2" data-ps-speed="0.4" data-ps-vertical-position="-200" data-ps-horizontal-position="0" />
-      <img src="img/assassins/002.png" class="parallax-move" data-ps-z-index="3" data-ps-speed="0.5" data-ps-vertical-position="-400" data-ps-horizontal-position="0" />
-      <img src="img/assassins/birds.png" class="parallax-move" data-ps-z-index="4" data-ps-speed="1" data-ps-vertical-position="-300" data-ps-horizontal-position="600" />
-      <img src="img/assassins/black-cloud.png" class="parallax-move" data-ps-z-index="5" data-ps-speed="0.35" data-ps-vertical-position="-400" data-ps-horizontal-position="0">
-    </article>
-  </section>
-  <section>
-    <article class="parallax-img-container">
-      <h2>Fixed content</h2>
-      <p>All the content inside the article will not be affected by parallaximg.js</p>
-      <h3>I made this inspired by PlayStation and Assassins Unity</h3>
-      <img id="parallax-img-2" class="parallax-move" src="img/triangle.png" />
-      <img id="parallax-img-3" class="parallax-move" src="img/square.png" />
-      <img id="parallax-img-4" class="parallax-move" src="img/circle.png" />
-      <img id="parallax-img-5" class="parallax-move" src="img/ex.png" />
-      <img id="parallax-img-6" class="parallax-move" src="img/triangle.png" />
-      <img id="parallax-img-7" class="parallax-move" src="img/square.png" />
-      <img id="parallax-img-7" class="parallax-move" src="img/circle.png" />
-      <img id="parallax-img-5" class="parallax-move" src="img/ex.png" />
-      <img id="parallax-img-1" class="parallax-move" src="img/triangle.png" />
-      <img id="parallax-img-4" class="parallax-move" src="img/square.png" />
-      <img id="parallax-img-3" class="parallax-move" data-ps-vertical-position="200" data-ps-horizontal-position="500" src="img/circle.png" />
-    </article>
-    <article>
-      <h3 class="testOffset">Fork from Github</h3>
-    </article>
-  </section>
-  <footer>
-    <p>made by cynthia sanchez</p>
-  </footer>
-</body>
-</html>
diff --git a/demo/js/parallaxImg.js b/demo/js/parallaxImg.js
deleted file mode 100755
index 77e2efc..0000000
--- a/demo/js/parallaxImg.js
+++ /dev/null
@@ -1,274 +0,0 @@
-/* Parallax Images Scroll - by
-╱╱╱╱╱╱╱╱╱╱╭╮╭╮╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╭╮
-╱╱╱╱╱╱╱╱╱╭╯╰┫┃╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱┃┃
-╭━━┳╮╱╭┳━╋╮╭┫╰━┳┳━━╮╭━━┳━━┳━╮╭━━┫╰━┳━━┳━━━╮
-┃╭━┫┃╱┃┃╭╮┫┃┃╭╮┣┫╭╮┃┃━━┫╭╮┃╭╮┫╭━┫╭╮┃┃━╋━━┃┃
-┃╰━┫╰━╯┃┃┃┃╰┫┃┃┃┃╭╮┃┣━━┃╭╮┃┃┃┃╰━┫┃┃┃┃━┫┃━━┫
-╰━━┻━╮╭┻╯╰┻━┻╯╰┻┻╯╰╯╰━━┻╯╰┻╯╰┻━━┻╯╰┻━━┻━━━╯
-╱╱╱╭━╯┃/////////////////////////////////////
-╱╱╱╰━━╯http://cynt.co.nf////////////////////
-http://cyntss.github.io/Parallax-img-scroll/
-////////////////////////////////////////////
-V.1.2.5 - MIT license. Allowed for commercial
-and personal use =D
-*/
-
-//reset the scroll to 0 (top of page)
-$(window).on('beforeunload', function() {
-  $(window).scrollTop(0);
-});
-
-function parallaxImgScroll(settings) {
-
-  //if the user is setting the configuration
-  var default_settings = {
-    initialOpacity : 0, //from 0 to 1, e.g. 0.34 is a valid value. 0 = transparent, 1 = Opaque
-    opacitySpeed : 0.02, //values from 0.01 to 1 -> 0.01: slowly appears on screen; 1: appears as soon as the user scrolls 1px
-    pageLoader: false // boolean type
-  }
-  var parallaxSettings = $.extend({}, default_settings, settings);
-
-  //definition of essential variables [do not modify]
-  var parallaxElementsArray = [];
-  var lastestScrolled = 0;
-  var scrolled = 0;
-
-  $(document).ready(function (){
-
-    $(".parallax-move").css({
-      'opacity' : 0,
-      position: "absolute"
-    });
-
-    if (parallaxSettings.pageLoader) {
-      var loadingMaringTop = $(window).height() / 2
-      $("body").wrapInner( "<div class='parallaxImg-page'></div>");
-      $("body").css({
-        height: '100%',
-        width: '100%'
-      })
-      $("body").prepend("<div class='parallaxImg-loading-page'></div>")
-      $(".parallaxImg-loading-page").css({
-        position: 'absolute',
-        top: '0px',
-        left: '0px',
-        width: '100%',
-        height: '100%',
-        background: '#333',
-      })
-      $(".parallaxImg-loading-page").prepend("<div class='parallaxImg-loading-text'>Loading Page</div>")
-      $(".parallaxImg-loading-text").css({
-        width: '300px',
-        'margin-left': 'auto',
-        'margin-right': 'auto',
-        'text-align': 'center',
-        'padding-top': loadingMaringTop + 'px'
-      })
-
-      $(".parallaxImg-page").hide()
-    }
-
-  })
-
-  $(window).load(function() {
-    $(".parallax-move").css({
-      'opacity' : parallaxSettings.initialOpacity
-    });
-
-    if (parallaxSettings.pageLoader) {
-      $(".parallaxImg-loading-page").fadeOut('600', function() {
-        $(".parallaxImg-page").fadeIn()
-        $(this).remove()
-        parallaxImgInit();
-      })
-    }
-    else {
-      parallaxImgInit();
-    }
-
-    /* Scroll event to trigger the function */
-    $(window).bind('scroll',function(e){
-      parallaxImgScroll();
-    });
-
-  });
-
-  /* Initial setup of the elements */
-  function parallaxImgInit() {
-
-    $(".parallax-img-container").each(function() {
-      var widthOfContainer = $(this).width();
-      var heightOfContainer = $(this).height();
-      var setOfElements = $(this).children();
-      for (i = 0; i < setOfElements.length ; i++) {
-        var classApplied = $(setOfElements[i]).attr('class');
-        if (classApplied != "parallax-move") {
-          $(setOfElements[i]).css({
-            "z-index": 100,
-            "position": "relative"
-          })
-        }
-        // for all the elements that have the class "parallax-move"
-        else {
-
-          // if the element has a Speed declared
-          if ($(setOfElements[i]).hasData('ps-speed')) {
-            scrollSpeed = $(setOfElements[i]).data('ps-speed');
-          }
-          else {
-            var ranNumSpeed = Math.floor((Math.random() * 100) + 1);
-            if(ranNumSpeed < 10) {
-              var scrollSpeed = "0.0" + ranNumSpeed;
-            }
-            else {
-              var scrollSpeed = "0." + ranNumSpeed;
-            }
-          }
-
-          //if the element has a vertical position declared
-          if ($(setOfElements[i]).hasData('ps-vertical-position')) {
-            TopPosition = $(setOfElements[i]).data('ps-vertical-position');
-          }
-          else {
-            var TopPosition = Math.floor(Math.random() * (heightOfContainer - (heightOfContainer/4)) + 1);
-          }
-
-          //if the element has an horizontal position declared
-          if ($(setOfElements[i]).hasData('ps-horizontal-position')) {
-            var leftPosition = $(setOfElements[i]).data('ps-horizontal-position');
-            var rightPosition = undefined;
-          }
-          else if ($(setOfElements[i]).hasData('ps-horizontal-position-right')) {
-            var rightPosition = $(setOfElements[i]).data('ps-horizontal-position-right');
-            var leftPosition = undefined;
-          } else {
-            var leftPosition = Math.floor(Math.random() * (widthOfContainer - 100) + 50);
-            var rightPosition = undefined;
-          }
-
-          //if the element has a z-index declared
-          if ($(setOfElements[i]).hasData('ps-z-index')) {
-            var zPosition = $(setOfElements[i]).data('ps-z-index');
-          }
-          else {
-            var zPosition = Math.floor(Math.random() * 10 + 1);
-          }
-
-          parallaxElementsArray.push({
-            "element" : $(setOfElements[i]),
-            "scrollSpeed" : scrollSpeed,
-            "horizontalPagePosition" : leftPosition,
-            "horizontalPagePositionRight" : rightPosition,
-            "verticalPagePosition" : TopPosition,
-            "opacity" : parallaxSettings.initialOpacity,
-            "privateScrolled" : 0
-          });
-
-          /* Apply initial position */
-          console.log(leftPosition, rightPosition)
-          if (leftPosition) {
-            $(setOfElements[i]).css({
-              "bottom": TopPosition,
-              "left": leftPosition,
-              "z-index": zPosition
-            })
-          } else {
-            $(setOfElements[i]).css({
-              "bottom": TopPosition,
-              "right": rightPosition,
-              "z-index": zPosition
-            })
-          }
-        }
-      }
-    });
-
-    $(".parallax-img-container").css({
-      position: "relative",
-      overflow: "hidden"
-    });
-
-  }
-
-  /* Move the images while scrolling the page */
-  function parallaxImgScroll() {
-
-    scrolled = $(window).scrollTop();
-
-    for (i = 0; i < parallaxElementsArray.length; i++) {
-
-      alpha = parallaxElementsArray[i].opacity;
-
-      /* Calculate the distance between the element and the top of the document */
-      var distanceFromTop = $(parallaxElementsArray[i].element).offset().top;
-      var elementHeight = $(parallaxElementsArray[i].element).height();
-
-      if (isVisible(distanceFromTop, elementHeight)) {
-
-        /* if scrolling down */
-        if (lastestScrolled < scrolled) {
-          /* unless parallaxSettings.opacitySpeed = 1, make the element appear progressively */
-          if (parallaxSettings.initialOpacity != 1) {
-            alpha = alpha + parallaxSettings.opacitySpeed;
-            if (alpha > 1) {
-              alpha = 1;
-            }
-          } else {
-            alpha = parallaxSettings.initialOpacity;
-          }
-          //save the scrolling for this element
-          parallaxElementsArray[i].privateScrolled = parallaxElementsArray[i].privateScrolled + (scrolled - lastestScrolled);
-        }
-        else if (scrolled == 0) {
-          alpha = parallaxSettings.initialOpacity;
-          parallaxElementsArray[i].privateScrolled = 0;
-        /* else.. if scrolling up */
-        }
-        else {
-          /* unless parallaxSettings.opacitySpeed = 1, make the element appear progressively */
-          if (parallaxSettings.initialOpacity != 1) {
-            alpha = alpha - parallaxSettings.opacitySpeed;
-            if (alpha < parallaxSettings.initialOpacity) {
-              alpha = parallaxSettings.initialOpacity;
-            }
-          } else {
-            alpha = parallaxSettings.initialOpacity;
-          }
-          //save the scrolling for this element
-          parallaxElementsArray[i].privateScrolled = parallaxElementsArray[i].privateScrolled - (lastestScrolled - scrolled);
-        }
-
-        $(parallaxElementsArray[i].element).css({
-          "opacity" : alpha,
-          'bottom': (parallaxElementsArray[i].verticalPagePosition + (parallaxElementsArray[i].privateScrolled * parallaxElementsArray[i].scrollSpeed)) + 'px'
-          });
-
-        /* save the opacity in the elements object */
-        parallaxElementsArray[i].opacity = alpha;
-      }
-    }
-    lastestScrolled = scrolled;
-
-    /* check if the element is visible on screen */
-    function isVisible(distance, height) {
-      //if it went up and off the screen
-      if ([distance + height] < scrolled) {
-        return false;
-      }
-      //if if didnt appear from belog yet
-      else if ([scrolled + $(window).height()] < distance) {
-        return false;
-      }
-      //if it is being displayed on screen
-      else {
-        return true;
-      }
-    }
-  }
-
-}
-
-/* check if a data attribute exists */
-$.fn.hasData = function(attrName) {
-  return (typeof $(this).data(attrName) != 'undefined');
-};
diff --git a/demo/params.json b/demo/params.json
deleted file mode 100644
index 1301583..0000000
--- a/demo/params.json
+++ /dev/null
@@ -1 +0,0 @@
-{"name":"Parallax-img-scroll","tagline":"Parallax effect to make images (or any other kind of html content) float and move as the website is scrolled up or down.","body":"### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:\r\n\r\n```\r\n$ cd your_repo_root/repo_name\r\n$ git fetch origin\r\n$ git checkout gh-pages\r\n```\r\n\r\nIf you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.\r\n\r\n### Designer Templates\r\nWe've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.\r\n\r\n### Rather Drive Stick?\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `<a>` element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out the documentation at http://help.github.com/pages or contact support@github.com and we’ll help you sort it out.\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}
\ No newline at end of file
diff --git a/demo/css/demotheme.css b/demotheme.css
similarity index 71%
rename from demo/css/demotheme.css
rename to demotheme.css
index 302e84b..51d34c0 100755
--- a/demo/css/demotheme.css
+++ b/demotheme.css
@@ -37,7 +37,7 @@ nav a:hover {
   color: #1FE0D4
 }
 section:nth-of-type(1) {
-  background: url("../img/assassins/bg.jpg");
+  background: url("../assassins/bg.jpg");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
@@ -74,7 +74,7 @@ section:nth-of-type(1) article:nth-of-type(1) h3 {
   margin: 1em 0 0.5em 0
 }
 section:nth-of-type(2) article:nth-of-type(1) {
-  background: url('../img/assassins/bg-assassins.jpg') #000 no-repeat 0px 200px;
+  background: url('../assassins/bg-assassins.jpg') #000 no-repeat 0px 200px;
   width: 100%;
   height: 1100px;
   -webkit-background-size: cover;
@@ -175,3 +175,59 @@ section:nth-of-type(2) article:nth-of-type(1) {
   height: auto;
 }
 
+img {
+  width: auto; /* Ensures images take up full width of their container */
+  height: auto; /* Maintains aspect ratio */
+  object-fit: cover; /* Ensures images fill their space without distortion */
+}
+
+img.parallax-move {
+  max-width: 100%; /* Prevents images from exceeding container width */
+  height: auto; /* Maintains aspect ratio */
+  position: relative; /* Keeps the parallax effect intact */
+}
+@media (max-width: 768px) {
+  .parallax-move {
+    width: auto; /* Shrinks images on smaller screens */
+    height: auto;
+  }
+
+  section {
+    height: auto; /* Adjust section height dynamically */
+    padding: 20px; /* Add padding for better spacing */
+  }
+}
+
+@media (max-width: 480px) {
+  .parallax-move {
+    width: 60%; /* Further shrink images on very small screens */
+  }
+}
+
+
+  #countdown-container {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    text-align: center;
+  }
+
+  #countdown-container h2 {
+    margin: 0;
+    font-size: 1.2rem;
+  }
+
+  #countdown-timer {
+    font-size: 1.8rem;
+    font-weight: bold;
+    margin-top: 5px;
+  }
+  
diff --git a/demo/img/ex.png b/ex.png
similarity index 100%
rename from demo/img/ex.png
rename to ex.png
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b25b909
--- /dev/null
+++ b/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Parallax Images Scroll</title>
+  <script src="jquery.js" type="text/javascript"></script>
+  <script src="jquery.nicescroll.min.js" type="text/javascript"></script>
+  <script src="parallaxImg.js" type="text/javascript"></script>
+  <link rel="stylesheet" type="text/css" href="demotheme.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <script type="text/javascript">
+    $(document).on("ready", function() {
+      var parallaxSettings = {
+        initialOpacity: 1, //from 0 to 1, e.g. 0.34 is a valid value. 0 = transparent, 1 = Opaque
+        opacitySpeed: 0.1, //values from 0.01 to 1 -> 0.01: slowly appears on screen; 1: appears as soon as the user scrolls 1px
+        pageLoader: true
+      };
+
+      parallaxImgScroll(parallaxSettings);
+    });
+  </script>
+</head>
+<body>
+  <div id="countdown-container">
+    <h2>Countdown Timer</h2>
+    <div id="countdown-timer">00:00:00</div>
+  </div>
+  
+  
+  <section>
+    
+    
+    <article class="parallax-img-container">
+      <h1>Parallax Image Scroll</h1>
+      <h3>Give life to your website</h3>
+      <!-- <a class="btn-download-init" href="js/parallaxImg.js">Download .JS</a> -->
+      <!-- images for parallax -->
+      <img src="assassins/smoke-01.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="1" data-ps-vertical-position="700" data-ps-horizontal-position="420" />
+      <img src="assassins/smoke-02.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.5" data-ps-vertical-position="700" data-ps-horizontal-position="220" />
+      <img src="assassins/smoke-03.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="1" data-ps-vertical-position="700" data-ps-horizontal-position="300" />
+      <img src="assassins/smoke-04.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.5" data-ps-vertical-position="500" data-ps-horizontal-position="620" />
+      <img src="assassins/smoke-05.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="1" data-ps-vertical-position="600" data-ps-horizontal-position="0" />
+      <img src="assassins/smoke-06.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.4" data-ps-vertical-position="200" data-ps-horizontal-position="520" />
+      <img src="assassins/smoke-07.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.3" data-ps-vertical-position="300" data-ps-horizontal-position="320" />
+      <img src="assassins/smoke-06.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.2" data-ps-vertical-position="-900" data-ps-horizontal-position="220" />
+      <img src="assassins/smoke-05.png" class="parallax-move" data-ps-z-index="1" data-ps-speed="0.3" data-ps-vertical-position="-600" data-ps-horizontal-position="150" />
+      <img src="assassins/stick.png" class="parallax-move" data-ps-z-index="2" data-ps-speed="1" data-ps-vertical-position="1000" data-ps-horizontal-position-right="0" />
+      <img src="assassins/003.png" class="parallax-move" data-ps-z-index="2" data-ps-speed="0.4" data-ps-vertical-position="-200" data-ps-horizontal-position="0" />
+      <img src="assassins/002.png" class="parallax-move" data-ps-z-index="3" data-ps-speed="0.5" data-ps-vertical-position="-400" data-ps-horizontal-position="0" />
+      <img src="assassins/birds.png" class="parallax-move" data-ps-z-index="4" data-ps-speed="1" data-ps-vertical-position="-300" data-ps-horizontal-position="600" />
+      <img src="assassins/black-cloud.png" class="parallax-move" data-ps-z-index="5" data-ps-speed="0.35" data-ps-vertical-position="-400" data-ps-horizontal-position="0">
+    </article>
+  </section>
+  <section>
+    <article class="parallax-img-container">
+      <h2>Fixed content</h2>
+      <p>All the content inside the article will not be affected by parallaximg.js</p>
+      <h3>I made this inspired by PlayStation and Assassins Unity</h3>
+      <img id="parallax-img-2" class="parallax-move" src="triangle.png" />
+      <img id="parallax-img-3" class="parallax-move" src="square.png" />
+      <img id="parallax-img-4" class="parallax-move" src="circle.png" />
+      <img id="parallax-img-5" class="parallax-move" src="ex.png" />
+      <img id="parallax-img-6" class="parallax-move" src="triangle.png" />
+      <img id="parallax-img-7" class="parallax-move" src="square.png" />
+      <img id="parallax-img-7" class="parallax-move" src="circle.png" />
+      <img id="parallax-img-5" class="parallax-move" src="ex.png" />
+      <img id="parallax-img-1" class="parallax-move" src="triangle.png" />
+      <img id="parallax-img-4" class="parallax-move" src="square.png" />
+      <img id="parallax-img-3" class="parallax-move" data-ps-vertical-position="200" data-ps-horizontal-position="500" src="circle.png" />
+    </article>
+    
+  </section>
+  <script>
+    function startCountdown(targetDate) {
+      const countdownElement = document.getElementById("countdown-timer");
+  
+      function updateCountdown() {
+        const now = new Date();
+        const difference = targetDate - now;
+  
+        if (difference <= 0) {
+          countdownElement.innerText = "00:00:00";
+          clearInterval(interval);
+          return;
+        }
+  
+        const hours = String(Math.floor((difference / (1000 * 60 * 60)) % 24)).padStart(2, "0");
+        const minutes = String(Math.floor((difference / (1000 * 60)) % 60)).padStart(2, "0");
+        const seconds = String(Math.floor((difference / 1000) % 60)).padStart(2, "0");
+  
+        countdownElement.innerText = `${hours}:${minutes}:${seconds}`;
+      }
+  
+      const interval = setInterval(updateCountdown, 1000);
+      updateCountdown();
+    }
+  
+    // Set target date and start countdown
+    const targetDate = new Date(new Date().getTime() + 2 * 60 * 60 * 1000); // 2 hours from now
+    startCountdown(targetDate);
+  </script>
+  
+  <footer>
+    <p>made by Yogesh Jat</p>
+  </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/demo/js/jquery.js b/jquery.js
similarity index 100%
rename from demo/js/jquery.js
rename to jquery.js
diff --git a/demo/js/jquery.nicescroll.min.js b/jquery.nicescroll.min.js
similarity index 100%
rename from demo/js/jquery.nicescroll.min.js
rename to jquery.nicescroll.min.js
diff --git a/parallaxImg.js b/parallaxImg.js
index 77e2efc..aa3136a 100755
--- a/parallaxImg.js
+++ b/parallaxImg.js
@@ -133,17 +133,12 @@ function parallaxImgScroll(settings) {
             var TopPosition = Math.floor(Math.random() * (heightOfContainer - (heightOfContainer/4)) + 1);
           }
 
-          //if the element has an horizontal position declared
+          //if the element has am horizontal position declared
           if ($(setOfElements[i]).hasData('ps-horizontal-position')) {
             var leftPosition = $(setOfElements[i]).data('ps-horizontal-position');
-            var rightPosition = undefined;
           }
-          else if ($(setOfElements[i]).hasData('ps-horizontal-position-right')) {
-            var rightPosition = $(setOfElements[i]).data('ps-horizontal-position-right');
-            var leftPosition = undefined;
-          } else {
+          else {
             var leftPosition = Math.floor(Math.random() * (widthOfContainer - 100) + 50);
-            var rightPosition = undefined;
           }
 
           //if the element has a z-index declared
@@ -158,27 +153,17 @@ function parallaxImgScroll(settings) {
             "element" : $(setOfElements[i]),
             "scrollSpeed" : scrollSpeed,
             "horizontalPagePosition" : leftPosition,
-            "horizontalPagePositionRight" : rightPosition,
             "verticalPagePosition" : TopPosition,
             "opacity" : parallaxSettings.initialOpacity,
             "privateScrolled" : 0
           });
 
           /* Apply initial position */
-          console.log(leftPosition, rightPosition)
-          if (leftPosition) {
-            $(setOfElements[i]).css({
-              "bottom": TopPosition,
-              "left": leftPosition,
-              "z-index": zPosition
-            })
-          } else {
-            $(setOfElements[i]).css({
-              "bottom": TopPosition,
-              "right": rightPosition,
-              "z-index": zPosition
-            })
-          }
+          $(setOfElements[i]).css({
+            "bottom": TopPosition,
+            "left": leftPosition,
+            "z-index": zPosition
+          })
         }
       }
     });
diff --git a/demo/img/pattern.png b/pattern.png
similarity index 100%
rename from demo/img/pattern.png
rename to pattern.png
diff --git a/demo/img/sly-2.png b/sly-2.png
similarity index 100%
rename from demo/img/sly-2.png
rename to sly-2.png
diff --git a/demo/img/sly.png b/sly.png
similarity index 100%
rename from demo/img/sly.png
rename to sly.png
diff --git a/demo/img/square.png b/square.png
similarity index 100%
rename from demo/img/square.png
rename to square.png
diff --git a/demo/img/tearaway.jpg b/tearaway.jpg
similarity index 100%
rename from demo/img/tearaway.jpg
rename to tearaway.jpg
diff --git a/demo/img/triangle.png b/triangle.png
similarity index 100%
rename from demo/img/triangle.png
rename to triangle.png
diff --git a/demo/img/wallpaper-1132086.jpg b/wallpaper-1132086.jpg
similarity index 100%
rename from demo/img/wallpaper-1132086.jpg
rename to wallpaper-1132086.jpg