MultipleJs An Idea To Create Eye Catching Dashboards

Posted By : Sachin Arora | 24-Apr-2018

Multiple.js provides us a way to accomplish "background sharing effect across multiple elements" at HTML/CSS level without any co-ordinates processing by javascript.This effect provides us a creative way to present our dashboards just by using .



Quickstart

 

bower i multiple.js
npm i multiple.js


Including it on our page
 

<link href="./multiple.css" rel="stylesheet">
<script src="./multiple.min.js"></script>

How To Use
 
<!--HTML-->
<div class="item">Content</div>
<div class="item">Content</div>
<div class="item">Content</div>
// JavaScript
var multiple = new Multiple({
  selector: '.item',
  background: 'linear-gradient(#273463, #8B4256)'
});


Now The CSS Part

The idea  is just to get a background to be exactly the viewport's size and to be
displayedapprpriatly in every element chunk, to achieve it we need to use the property background-attachment: fixed 
 

.selector {
  background-image: linear-gradient(white, black);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* <- here it is */

  width: 100px;
  height: 100px;
}

Now the background has been successfully expanded to full viewport's size, but what we want is to show a specific chunk of background under .selector element. so for that the background outside our .selector element needs to be cropped, providing the property overflow: hidden to our selector won't help as it's descendant is position: fixed. So to achieve that we need to use 

 clip: rect(  property. The rule to use this clip property is that its parent must have position: absolute or fixed otherwise it won't crop.

 

.selector {
  position: absolute;
  clip: rect(0, auto, auto, 0);

  width: 100px;
  height: 100px;
}


Multiple.js plugin takes care of all the markup differences, vendor-prefixes, browser-specific workarounds etc.. for us. All we need is to specify the selector and background.
It also provides two methods .update() and .destroy()
  • update() - It is basically used to update the baackground image if you have passed it in params and also processes newly added tags.eg: .update('url(image.png)');
     
  • destroy() -  this destroy method is used to revert the layout to the original state if it was modified, also removes classes and destroys multiple instances. 
     

 

About Author

Author Image
Sachin Arora

Sachin is ambitious and hardworking individual with broad skills,He have the capabilities to build captivating UI applications . One of his key strength is building a strong bond with the team in order to deliver the best results on time .

Request for Proposal

Name is required

Comment is required

Sending message..