@plutonium-js/vanilla-background-image-switch

A vanilla JavaScript component that animates and switches a target background image when hovering elements / links. * Add to any existing element with a custom tag attribute * Child elements act as image switches when hovered * Target any container with your switch images (default is body) * Animate with custom CSS transition settings * Add custom CSS directly to the switch image attribute (perfect for WordPress / other CMS) * Custom CSS can style the container, switch links, and image elements * Specify optional default image and sticky properties * Images are preloaded by default

Usage no npm install needed!

<script type="module">
  import plutoniumJsVanillaBackgroundImageSwitch from 'https://cdn.skypack.dev/@plutonium-js/vanilla-background-image-switch';
</script>

README

Plutonium [vanilla-background-image-switch]

A vanilla JavaScript component that animates and switches a target background image when hovering elements / links.

  • Add to any existing element with a custom tag attribute
  • Child elements act as image switches when hovered
  • Target any container with your switch images (default is body)
  • Animate with custom CSS transition settings
  • Add custom CSS directly to the switch image attribute (perfect for WordPress / other CMS)
  • Custom CSS can style the container, switch links, and image elements
  • Specify optional default image and sticky properties
  • Images are preloaded by default

Links

Bookmarks

Install

> npm install @plutonium-js/vanilla-background-image-switch

:arrow_up_small:

Import

  • Module

    ES6...

    import '@plutonium-js/vanilla-background-image-switch';

    CommonJS...

    require('@plutonium-js/vanilla-background-image-switch');

  • CDN Script Tag

    Add the component directly to a web page.

    <script src="https://cdn.jsdelivr.net/npm/@plutonium-js/vanilla-background-image-switch@1/dist/bundle.js"></script>

:arrow_up_small:

Instantiate

To create a new background image switch instance add the data-pu-background-image-switch attribute with the components custom JSON settings to an element in your HTML...

<div data-pu-background-image-switch='{
   "name":"myImageSwitch",
   "image":"assets/default.jpg",
   "target":{
      "querySelector":"body",
      "sticky":false
   },
   "animate":{
      "opacity":{"from":0, "to":1},
      "props":{
         "duration":"1s",
         "timing":"ease",
         "delay":".25s"
      }
   },
   "css":[
      ".pu-background-image-switch-comp {height:100%;color:white;font-size:4vmin;text-shadow:-1px -1px 10px #111,1px -1px 10px #111,-1px 1px 10px #111,1px 1px 10px #111;}",
      ".pu-background-image-switch-comp .link {display:inline-block;color:white;text-decoration:none;padding:10px 30px 10px 30px;cursor:pointer;border:solid 2px #666;background-color:#333;margin:20px;border-radius:5px;}",
      ".pu-background-image-switch-comp .link:hover {background-color:#999;}",
      ".pu-background-image-switch-image {background:no-repeat center/contain;pointer-events:none;z-index:-1;}",
      ".pu-background-image-switch-image-myImageSwitch {}",
      ".pu-background-image-switch-image-myImage1 {}"
   ]
}'>
   <a class="link" href="https://plutonium.dev" data-pu-link='{"name":"myImage1", "image":"assets/bg1.jpg"}'}">Link 1</a></br>
   <a class="link" href="https://plutonium.dev" data-pu-link='{"name":"myImage2", "image":"assets/bg2.jpg"}'}">Link 2</a></br>
   <a class="link" href="https://plutonium.dev" data-pu-link='{"name":"myImage3", "image":"assets/bg3.jpg"}'}">Link 3</a></br>
   <a class="link" href="https://plutonium.dev" data-pu-link='{"name":"myImage4", "image":"assets/bg4.jpg"}'}">Link 4</a>
</div>

The attribute data must be properly formatted JSON data with double quotes surrounding the key names as shown above.

Additional documentation covering the properties and API is available at...

:arrow_up_small:

License

Released under the MIT license

Author: Jesse Dalessio / Plutonium.dev

:arrow_up_small: