Skip to content
This repository has been archived by the owner on Dec 26, 2023. It is now read-only.

byeolbit/translucent

Repository files navigation

Translucent Build Status codecov

Transparent card theme

Title image

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
Firefox Chrome Safari Edge Opera

※ 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');