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

• BG Image Switch Home
  • Documentation
  • API

Bookmarks

• Install
• Import
  • Module
  • CDN Script Tags
• Instantiate
• License

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...

• https://plutonium.dev/wp/libraries/vanilla-background-image-switch

:arrow_up_small:

License

Released under the MIT license

Author: Jesse Dalessio / Plutonium.dev

:arrow_up_small: