Download
User Rating: 0/5 ( 0 votes)
Multiple.js enables background image sharing across various elements by using CSS or HTML with no JavaScript coordinate processing.
Features/Benefits:
-
Supports multiple backgrounds.
-
Gradient opacity support.
-
Supports many mobile and web browsers.
Use cases:
-
To share background images.
Source: github.com
1. INCLUDE CSS & JS FILES
<link href="./multiple.css" rel="stylesheet">
<script src="./multiple.min.js"></script>
2. HTML
<div class="item">Content</div>
<div class="item">Content</div>
<div class="item">Content</div>
3. JAVASCRIPT
var multiple = new Multiple({
selector: '.item',
background: 'linear-gradient(#273463, #8B4256)'
});
4. OPTIONS
|
Name |
Required |
Description |
Example |
Default |
selector
|
Required |
Selector. Refers to document.querySelectorAll() |
'.items' |
|
background
|
Required |
Background image/gradient. Should be valid background-image CSS property. Support multiple backgrounds. Must not contain vendor prefixes for gradients, they will be added automatically. |
'url(image.png), linear-gradient(pink, violet)' |
|
affectText
|
Optional |
Specifies if background image should affect text instead of background.
P.s. Works only at desktop webkit browsers. As fallback for mobile or other desktop browsers will be shown color specified in this property. See difference at Codepen .
|
'black' |
false |
opacity
|
Optional |
Obviously gradient's opacity may be set by RGBA syntax.
But if you are too lazy to convert HEX or RGB to RGBA, you might find this option useful. All HEX (short and long forms) and RGB colors of gradients specified in background option will be converted to RGBA with specified opacity. See difference at Codepen .
opacity supports two types of input:
-
0.1 - number. Will be set RGBA with specified opacity 0.1
-
true - boolean. Will be calculated RGBA color with as much transparency as possible over white (in other words looks same as RGB color with transparency and without loss of color)
P.s. Works only with gradients, does not work with images.
|
true or 0.2 |
false |
5. METHODS
|
Name |
Params |
Description |
.update()
|
String |
Updates background image (if passed) and process newly added tags (wraps content at mobile devices, adds classes). Update background example: .update('url(image.png)');. If you've appended new items to DOM and want apply Multiple for them use .update();
|
.destroy()
|
|
Destroys Multiple instance, removes classes, reverts layout to original state if was modified |
JS Tutorial
