Download Mirror Characters, Text, And Images In jQuery – mirror.js

This time I will share jQuery Plugin and tutorial about Mirror Characters, Text, And Images In jQuery – mirror.js, hope it will help you in programming stack.

File Size:	4.48 KB
Views Total:	1015
Last Update:	2 years ago
Publish Date:	2 years ago
Official Website:	Go to website
License:	MIT

Demo Download

mirror.js is a small jQuery plugin (jQuery UI widget) that applies mirror and reflection effects characters, text, and/or images using CSS3 transforms.

How to use it:

1. Include the necessary jQuery and jQuery UI libraries on the web page.

1
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

2
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"

3
        crossorigin="anonymous">

4
</script>

5
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

2. Place the JavaScript file mirror.js after jQuery.

`1`	`<script` `src="mirror.js"></script>`

3. Call the plugin to mirror your text and images in the document.

1
<p class="example">

2
  <span>Left-aligned text becomes right-aligned.</span>

3
</p>

4
 
5
<div class="example">

6
  <img src="https://picsum.photos/200/300/?random">

7
</div>

8
 
9
...

1
$(function(){

2
 
3
  $('.example').mirror();

4
 
5
});

4. Mirror the characters instead of the whole text.

1
$(function(){

2
 
3
  $('.example').mirror({

4
    char: true

5
  });

6
 
7
});

5. Apply a reflection effect to the mirrored text/image.

1
$(function(){

2
 
3
  $('.example').mirror({

4
    horizontal: false

5
    vertical: true

6
  });

7
 
8
});

This awesome jQuery plugin is developed by s1r-J. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

How to use it:

Share this:

Related posts: