search

Home >Web Front-end >H5 Tutorial >Interactive 3D tag cloud jQuery plug-in based on HTML5 SVG

Interactive 3D tag cloud jQuery plug-in based on HTML5 SVG

黄舟
黄舟Original
2017-01-19 13:58:361445browse

Brief Tutorial

svg3dtagcloud.js is a 3D tag cloud jQuery plug-in based on HTML5 SVG. This 3D tag cloud plug-in requires no additional CSS styles, can use the mouse to interact with tags, and provides many parameters to control the appearance of the tag cloud.

How to use

Using the 3D tag cloud plug-in requires the introduction of jQuery and jquery.svg3dtagcloud.min.js files. 

<script src="js/jquery.min.js"></script>
<script src="js/jquery.svg3dtagcloud.min.js"></script>

HTML structure

You can use a dc6dce4a544fdca2df29d5ac0ea9906b container as the wrapping container of the 3D tag cloud. 

<div id="tag-cloud"></div>

Initialize the plug-in

First you need to set up an object array traversal, which contains the tags you need to make and their corresponding link addresses. 

var entries = [ 
                { label: &#39;CodePen&#39;, url: &#39;http://codepen.io/&#39;, target: &#39;_top&#39; },
                { label: &#39;three.js&#39;, url: &#39;http://threejs.org/&#39;, target: &#39;_top&#39; },
                { label: &#39;JS Compress&#39;, url: &#39;http://jscompress.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;TinyPNG&#39;, url: &#39;https://tinypng.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Can I Use&#39;, url: &#39;http://caniuse.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;URL shortener&#39;, url: &#39;https://goo.gl/&#39;, target: &#39;_top&#39; },
                { label: &#39;Twitter&#39;, url: &#39;https://twitter.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Gulp&#39;, url: &#39;http://gulpjs.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Browsersync&#39;, url: &#39;https://www.browsersync.io/&#39;, target: &#39;_top&#39; },
                { label: &#39;GitHub&#39;, url: &#39;https://github.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Shadertoy&#39;, url: &#39;https://www.shadertoy.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;jsPerf&#39;, url: &#39;http://jsperf.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Foundation&#39;, url: &#39;http://foundation.zurb.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;CreateJS&#39;, url: &#39;http://createjs.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Velocity.js&#39;, url: &#39;http://julian.com/research/velocity/&#39;, target: &#39;_top&#39; },
                { label: &#39;jQuery&#39;, url: &#39;https://jquery.com/&#39;, target: &#39;_top&#39; },
            ];

Then you can initialize the 3D tag cloud plug-in through the following method. 

$( &#39;#tag-cloud&#39; ).svg3DTagCloud( {entries: entries} );

Configuration parameters

The available configuration parameters of the svg3dtagcloud.js plug-in are:

  • ##entries: an object array used to initialize tags.

  • width: The width of the tag cloud.

  • height: The height of the tag cloud.

  • radius: The radius of the tag cloud.

  • radiusMin: The minimum radius of the tag cloud.

  • bgDraw: Whether to use background color.

  • bgColor: background color.

  • opacityOver: the label transparency when the mouse slides over the label.

  • opacityOut: Label transparency when the mouse leaves the label.

  • opacitySpeed: label transparency transition speed.

  • fov: how the content is presented.

  • speed: The speed of tag cloud animation.

  • fontFamily: The font of the tag cloud.

  • fontSize: The font size of the tag cloud.

  • fontColor: The font color of the tag cloud.

  • fontWeight: The fontWeight of the tag cloud font.

  • fontStyle: The font style of the tag cloud.

  • fontStretch: The fontStretch of the font of the tag cloud.

  • fontToUpperCase: Whether to convert to uppercase font.

The above is the content of the interactive 3D tag cloud jQuery plug-in based on HTML5 SVG. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Super cool creative segmented SVG text animation special effectsNext article：Super cool creative segmented SVG text animation special effects

Related articles

See more