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
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
.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;
}
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.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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 .