/DynaWP

Parallax.js like wallpaper in bare JavaScript

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

DynaWP

DynaWP is a JavaScript wallpaper library that adds effect like Parallax.js engine.

Live demo

Installation

  1. Import the code:
<script src="DynaWP.js"></script> <!-- Preferred: Will work offline and much faster --->
<script src="https://github.com/Segilmez06/DynaWP/releases/latest/download/DynaWP.js"></script>
  1. Create a div and set attributes:
<div id="wallpaper" effectscale="0.25" reactscale="2" effectimg="wallpaper.webp"></div>

Usage

  • id: To set a element as wallpaper, you need to change it's id to wallpaper.
  • effectscale: Time to react the mouse move in seconds. For example, 0.25 means it'll take 0.25 second to complete requested animation.
  • reactscale: Moving value of image in screen size's percentage. For example, 1 means it'll set image size as 102% and change image position between -1vh/-1vw and 1vh/1vw.
  • effectimg: Background image URL for element.

Note: You must set all id, effectscale, reactscale, effectimg attributes to work properly.