byeolbit / Translucent
Licence: mit
Translucent plastic card theme.
Stars: ✭ 93
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Translucent
Pg Calendar
📆 beautiful and eidetic date picker
Stars: ✭ 109 (+17.2%)
Mutual labels: design, jquery-plugin, jquery
Gdb
Generic Data Binder (GDB) for jQuery is a framework agnostic and extremely easy to use 2 way data binder. GDB binds views and models in realtime with live two-way binding and no hefty framework necessary.
Stars: ✭ 90 (-3.23%)
Mutual labels: jquery-plugin, jquery
Jquery Circle Progress
jQuery Plugin to draw animated circular progress bars
Stars: ✭ 1,065 (+1045.16%)
Mutual labels: jquery-plugin, jquery
Jquery.balloon.js
A jQuery plugin to add balloon tips to elements User-friendly, fine-tunable and without css and images
Stars: ✭ 54 (-41.94%)
Mutual labels: jquery-plugin, jquery
Cropper
⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper
Stars: ✭ 7,825 (+8313.98%)
Mutual labels: jquery-plugin, jquery
Swiftype Search Jquery
Elastic Site Search jQuery search plugin
Stars: ✭ 74 (-20.43%)
Mutual labels: jquery-plugin, jquery
Applozic Web Plugin
Javascript (jQuery) Real Time Chat & Messaging plugin
Stars: ✭ 76 (-18.28%)
Mutual labels: jquery-plugin, jquery
Jcslider
🏂 A responsive slider jQuery plugin with CSS animations
Stars: ✭ 52 (-44.09%)
Mutual labels: jquery-plugin, jquery
Imgviewer
jQuery plugin to zoom and pan images, even those with a size that is a percentage of their container
Stars: ✭ 50 (-46.24%)
Mutual labels: jquery-plugin, jquery
Hummingbird Treeview
A powerful and fast jQuery treeview plugin
Stars: ✭ 50 (-46.24%)
Mutual labels: jquery-plugin, jquery
Tui.calendar
🍞📅A JavaScript calendar that has everything you need.
Stars: ✭ 9,537 (+10154.84%)
Mutual labels: jquery-plugin, jquery
Elastic Columns
A jQuery plugin designed to be used as an alternative to the well-known Isotope library.
Stars: ✭ 39 (-58.06%)
Mutual labels: jquery-plugin, jquery
Uploader
A lightweight and very configurable jQuery plugin for file uploading using ajax(a sync); includes support for queues, progress tracking and drag and drop.
Stars: ✭ 1,042 (+1020.43%)
Mutual labels: jquery-plugin, jquery
Jquery.toaster
jQuery plugin for displaying customizable toast notifications via Bootstrap alerts
Stars: ✭ 74 (-20.43%)
Mutual labels: jquery-plugin, jquery
Translucent
Transparent card theme
Demo : https://byeolbit.github.io/translucent
Translucent is a plugin for make transparent/translucent design element in webpage.
What you need to use Translucent
- Browser support
Tested browsers
Firefox 35.0 | Chrome 53.0 | Safari 6 | Edge 38.0 | Opera 40.0 |
---|---|---|---|---|
※ Not support Internet Explorer. (It does not support CSS filter)
How to use translucent
1. Insert script into your HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/translucent.min.js"></script>
2. Make your background element and card element in HTML
<div class="your-background">
<div class="your-element">
<!-- your card contents here -->
</div>
</div>
3. Apply translucent to your card element in script
let yourElement = document.body.querySelector('.your-element');
let translucent = new Translucent(yourElement);
or you can customize options.
let translucent = new Translucent(yourElement, {
bgElement : '.your-background', // id or class name
filterValue : 5, // int
cardColor : 'clear', // preset color or your own color
shadow : true // true or false
});
Plugin description
Translucent( element , [ options ] )
Apply translucent card them to element.
element
-
type :
HTMLElement
- description : HTML element that you want to apply translucent
Options
Attribute | Type | Default | Description |
---|---|---|---|
bgElement | string |
parent of target element | Background element. |
filterValue | number |
10 | This is blur value. |
cardColor | string |
'white' | Color of card. You can use preset or your own color. Preset : 'clear' , 'white' , 'grey' , 'black'
|
shadow | boolean |
true | This decides shadow effect of element. true applies effect. |
Translucent.blur( value )
Change amount of blur for background.
Value
-
type :
number
- description : Value for blur background. 0 will get clear background.
Example
// Apply 20 blur to background
translucent.blur(20);
Translucent.destroy( void )
Destroy translucent from the element.
Example
Translucent.destroy();
How to use translucent (jQuery plugin)
1. Insert script into your HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.translucent.min.js"></script>
2. Make your background element and card element in HTML
<div class="your-background">
<div class="your-element">
<!-- your card contents here -->
</div>
</div>
3. Apply translucent to your card element in script
$('.your-element').Translucent();
or you can customize options.
$('.your-element').Translucent({
background: '.your-background', // id or class name
filterValue : 5, // int
cardColor : 'clear', // preset color or your own color
shadow : true // true or false
});
Plugin description
.Translucent( selector , [ options ] )
Apply translucent card them to element.
Selector
-
type :
string
- description : Selector for your background element. It must be id.
Options
Attribute | Type | Default | Description |
---|---|---|---|
bgElement | string |
parent of target element | Background element. |
filterValue | number |
10 | This is blur value. |
cardColor | string |
'white' | Color of card. You can use preset or your own color. Preset : 'clear' , 'white' , 'grey' , 'black'
|
shadow | boolean |
true | This decides shadow effect of element. true applies effect. |
.Translucent( 'blur' , value )
Change amount of blur for background.
Value
-
type :
number
- description : Value for blur background. 0 will get clear background.
Example
// Apply 20 blur to background
$('.your-element').Translucent('blur', 20);
.Translucent( 'destroy' )
Destroy translucent from the element.
Example
$('.your-element').Translucent('destroy');
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].