html 3D球状旋转标签云文字云效果

想想一个球状的结构上面挂满了很多的标签，然后把我们要学习的内容或者是名字等3D的形式展现出来，还是非常炫酷的，这种形式的展示可能有一个名字叫做3D标签云，出于兴趣去找了一个这样的代码效果还是很可以的，给大家展示一把：

在线demo地址

废话不多说，主要源代码如下：

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><!-- Bootstrap CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"><style>html,body{background-color: #060b1b;/* background-color: #0a192f; */}</style></head><body id="bodyid"><!-- skills 3d--><section style="height: 600px;width: 100%;" id="skills" class="py-5"><!-- <p class="h1 mytitle pb-3">skills</p> --><div id='holder'></div></section><!-- needful scripts --><!-- Bootstrap core JS--><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script><!-- Third party plugin JS--><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script><!-- cloud --><script src='plugins/cloud/jquery.svg3dtagcloud.min.js'></script><!-- main script file --><script src="js/scripts.js"></script></body></html>

jquery.svg3dtagcloud.js

/*
Copyright (c) 2017 Niklas KnaackPermission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/( function() {function SVG3DTagCloud( element, params ) {var settings = {entries: [],width: 480,height: 480,radius: '70%',radiusMin: 75,bgDraw: true,bgColor: '#000',opacityOver: 1.00,opacityOut: 0.05,opacitySpeed: 6,fov: 800,speed: 2,fontFamily: 'Arial, sans-serif',fontSize: '15',fontColor: '#fff',fontWeight: 'normal',//boldfontStyle: 'normal',//italic fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expandedfontToUpperCase: false,tooltipFontFamily: 'Arial, sans-serif',tooltipFontSize: '15',tooltipFontColor: '#fff',tooltipFontWeight: 'normal',//boldtooltipFontStyle: 'normal',//italic tooltipFontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expandedtooltipFontToUpperCase: false,tooltipTextAnchor: 'left',tooltipDiffX: 0,tooltipDiffY: 10};//---if ( params !== undefined )for ( var prop in params )if ( params.hasOwnProperty( prop ) && settings.hasOwnProperty( prop ) )settings[ prop ] = params[ prop ];//---if ( !settings.entries.length )return false;//---var entryHolder = [];var tooltip;var radius;var diameter;var mouseReact = true;var mousePos = { x: 0, y: 0 };var center2D;var center3D = { x: 0, y: 0, z: 0 };var speed = { x: 0, y: 0 };var position = { sx: 0, cx: 0, sy: 0, cy: 0 };var MATHPI180 = Math.PI / 180;var svg;var svgNS = 'http://www.w3.org/2000/svg';var bg;//---function init() {svg = document.createElementNS( svgNS, 'svg' );svg.addEventListener( 'mousemove', mouseMoveHandler );element.appendChild( svg );if ( settings.bgDraw ) {bg = document.createElementNS( svgNS, 'rect' );bg.setAttribute( 'x', 0 );bg.setAttribute( 'y', 0 );bg.setAttribute( 'fill', settings.bgColor );svg.appendChild( bg );}//---addEntries();reInit();animloop();//---window.addEventListener( 'resize', resizeHandler );};function reInit() {var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;var svgWidth = windowWidth;var svgHeight = windowHeight;if ( settings.width.toString().indexOf( '%' ) > 0 || settings.height.toString().indexOf( '%' ) > 0 ) {svgWidth = Math.round( element.offsetWidth / 100 * parseInt( settings.width ) );svgHeight = Math.round( svgWidth / 100 * parseInt( settings.height ) );} else {svgWidth = parseInt( settings.width );svgHeight = parseInt( settings.height );}if ( windowWidth <= svgWidth )svgWidth = windowWidth;if ( windowHeight <= svgHeight )svgHeight = windowHeight;//---center2D = { x: svgWidth / 2, y: svgHeight / 2 };speed.x = settings.speed / center2D.x;speed.y = settings.speed / center2D.y;if ( svgWidth >= svgHeight )diameter = svgHeight / 100 * parseInt( settings.radius );elsediameter = svgWidth / 100 * parseInt( settings.radius );if ( diameter < 1 )diameter = 1;radius = diameter / 2;if ( radius < settings.radiusMin ) {radius = settings.radiusMin;diameter = radius * 2;}//---svg.setAttribute( 'width', svgWidth );svg.setAttribute( 'height', svgHeight );if ( settings.bgDraw ) {bg.setAttribute( 'width', svgWidth );bg.setAttribute( 'height', svgHeight );}//---setEntryPositions( radius );};//---function setEntryPositions( radius ) {for ( var i = 0, l = entryHolder.length; i < l; i++ ) {setEntryPosition( entryHolder[ i ], radius );}};function setEntryPosition( entry, radius ) {var dx = entry.vectorPosition.x - center3D.x;var dy = entry.vectorPosition.y - center3D.y;var dz = entry.vectorPosition.z - center3D.z;var length = Math.sqrt( dx * dx + dy * dy + dz * dz );entry.vectorPosition.x /= length;entry.vectorPosition.y /= length;entry.vectorPosition.z /= length;entry.vectorPosition.x *= radius;entry.vectorPosition.y *= radius;entry.vectorPosition.z *= radius;};function addEntry( index, entryObj, x, y, z ) {var entry = {};if ( typeof entryObj.label != 'undefined' ) {entry.element = document.createElementNS( svgNS, 'text' );entry.element.setAttribute( 'x', 0 );entry.element.setAttribute( 'y', 0 );entry.element.setAttribute( 'fill', settings.fontColor );entry.element.setAttribute( 'font-family', settings.fontFamily );entry.element.setAttribute( 'font-size', settings.fontSize );entry.element.setAttribute( 'font-weight', settings.fontWeight );entry.element.setAttribute( 'font-style', settings.fontStyle );entry.element.setAttribute( 'font-stretch', settings.fontStretch );entry.element.setAttribute( 'text-anchor', 'middle' );entry.element.textContent = settings.fontToUpperCase ? entryObj.label.toUpperCase() : entryObj.label;} else if ( typeof entryObj.image != 'undefined' ) {entry.element = document.createElementNS( svgNS, 'image' );entry.element.setAttribute( 'x', 0 );entry.element.setAttribute( 'y', 0 );entry.element.setAttribute( 'width', entryObj.width );entry.element.setAttribute( 'height', entryObj.height );entry.element.setAttribute( 'id', 'image_' + index );entry.element.setAttributeNS( 'http://www.w3.org/1999/xlink','href', entryObj.image );entry.diffX = entryObj.width / 2;entry.diffY = entryObj.height / 2;}entry.link = document.createElementNS( svgNS, 'a' );entry.link.setAttributeNS( 'http://www.w3.org/1999/xlink', 'xlink:href', entryObj.url );entry.link.setAttribute( 'target', entryObj.target );entry.link.addEventListener( 'mouseover', mouseOverHandler, true );entry.link.addEventListener( 'mouseout', mouseOutHandler, true );entry.link.appendChild( entry.element );if ( typeof entryObj.tooltip != 'undefined' ) {entry.tooltip = true;entry.tooltipLabel = settings.tooltipFontToUpperCase ? entryObj.tooltip.toUpperCase() : entryObj.tooltip;;} else {entry.tooltip = false;}entry.index = index;entry.mouseOver = false;entry.vectorPosition = { x:x, y:y, z:z };entry.vector2D = { x:0, y:0 };svg.appendChild( entry.link );return entry;};function addEntries() {var tooltip = false;for ( var i = 1, l = settings.entries.length + 1; i < l; i++ ) {var phi = Math.acos( -1 + ( 2 * i ) / l );var theta = Math.sqrt( l * Math.PI ) * phi;var x = Math.cos( theta ) * Math.sin( phi );var y = Math.sin( theta ) * Math.sin( phi );var z = Math.cos( phi );var entry = addEntry( i - 1, settings.entries[ i - 1 ], x, y, z );entryHolder.push( entry );if ( typeof settings.entries[ i - 1 ].tooltip != 'undefined' ) {tooltip = true;}}if ( tooltip ) {addTooltip();}};function addTooltip() {tooltip = document.createElementNS( svgNS, 'text' );tooltip.setAttribute( 'x', 0 );tooltip.setAttribute( 'y', 0 );tooltip.setAttribute( 'fill', settings.tooltipFontColor );tooltip.setAttribute( 'font-family', settings.tooltipFontFamily );tooltip.setAttribute( 'font-size', settings.tooltipFontSize );tooltip.setAttribute( 'font-weight', settings.tooltipFontWeight );tooltip.setAttribute( 'font-style', settings.tooltipFontStyle );tooltip.setAttribute( 'font-stretch', settings.tooltipFontStretch );tooltip.setAttribute( 'text-anchor', settings.tooltipTextAnchor );tooltip.textContent = '';svg.appendChild( tooltip );};function getEntryByElement( element ) {for ( var i = 0, l = entryHolder.length; i < l; i++ ) {var entry = entryHolder[ i ];if ( entry.element.getAttribute( 'x' ) === element.getAttribute( 'x' ) && entry.element.getAttribute( 'y' ) === element.getAttribute( 'y' ) ) {return entry;}}return;};function highlightEntry( entry ) {for ( var i = 0, l = entryHolder.length; i < l; i++ ) {var e = entryHolder[ i ];if ( e.index === entry.index ) {e.mouseOver = true; } else {e.mouseOver = false; }} };//---function showTooltip( entry ) {if ( entry.tooltip ) {tooltip.setAttribute( 'x', entry.vector2D.x - settings.tooltipDiffX );tooltip.setAttribute( 'y', entry.vector2D.y - settings.tooltipDiffY );tooltip.textContent = settings.tooltipFontToUpperCase ? entry.tooltipLabel.toUpperCase() : entry.tooltipLabel;tooltip.setAttribute( 'opacity', 1.0 );}};function hideTooltip( entry ) {tooltip.setAttribute( 'opacity', 0.0 );};//---function render() {var fx = speed.x * mousePos.x - settings.speed;var fy = settings.speed - speed.y * mousePos.y;var angleX = fx * MATHPI180;var angleY = fy * MATHPI180;position.sx = Math.sin( angleX );position.cx = Math.cos( angleX );position.sy = Math.sin( angleY );position.cy = Math.cos( angleY );//---for ( var i = 0, l = entryHolder.length; i < l; i++ ) {var entry = entryHolder[ i ];//---if ( mouseReact ) {var rx = entry.vectorPosition.x;var rz = entry.vectorPosition.y * position.sy + entry.vectorPosition.z * position.cy;entry.vectorPosition.x = rx * position.cx + rz * position.sx;entry.vectorPosition.y = entry.vectorPosition.y * position.cy + entry.vectorPosition.z * -position.sy;entry.vectorPosition.z = rx * -position.sx + rz * position.cx;}//---var scale = settings.fov / ( settings.fov + entry.vectorPosition.z );entry.vector2D.x = entry.vectorPosition.x * scale + center2D.x; entry.vector2D.y = entry.vectorPosition.y * scale + center2D.y;//---if ( entry.diffX && entry.diffY ) {entry.vector2D.x -= entry.diffX;entry.vector2D.y -= entry.diffY;}//---entry.element.setAttribute( 'x', entry.vector2D.x );entry.element.setAttribute( 'y', entry.vector2D.y );//---var opacity;if ( mouseReact ) {opacity = ( radius - entry.vectorPosition.z ) / diameter;if ( opacity < settings.opacityOut ) {opacity = settings.opacityOut;}} else {opacity = parseFloat( entry.element.getAttribute( 'opacity' ) );if ( entry.mouseOver ) {opacity += ( settings.opacityOver - opacity ) / settings.opacitySpeed;} else {opacity += ( settings.opacityOut - opacity ) / settings.opacitySpeed;}}entry.element.setAttribute( 'opacity', opacity );}//---entryHolder = entryHolder.sort( function( a, b ) {return ( b.vectorPosition.z - a.vectorPosition.z );} );};//---window.requestAnimFrame = ( function() {return  window.requestAnimationFrame       ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame    ||function( callback ) {window.setTimeout( callback, 1000 / 60 );};} )();function animloop() {requestAnimFrame( animloop );render();};//---function mouseOverHandler( event ) {mouseReact = false;//---var entry = getEntryByElement( event.target );highlightEntry( entry );if ( entry.tooltip ) {showTooltip( entry );}};function mouseOutHandler( event ) {mouseReact = true;//---var entry = getEntryByElement( event.target );if ( entry.tooltip ) {hideTooltip( entry );}};//---function mouseMoveHandler( event ) {mousePos = getMousePos( svg, event );};function getMousePos( svg, event ) {var rect = svg.getBoundingClientRect();return { x: event.clientX - rect.left, y: event.clientY - rect.top };};//---function resizeHandler( event ) {reInit();};//---init();};window.SVG3DTagCloud = SVG3DTagCloud;} () );if ( typeof jQuery !== 'undefined' ) {( function( $ ) {$.fn.svg3DTagCloud = function( params ) {var args = arguments;return this.each( function() {if ( !$.data( this, 'plugin_SVG3DTagCloud' ) ) {$.data( this, 'plugin_SVG3DTagCloud', new SVG3DTagCloud( this, params ) );} else {var plugin = $.data( this, 'plugin_SVG3DTagCloud' );if ( plugin[ params ] ) {plugin[ params ].apply( this, Array.prototype.slice.call( args, 1 ) );} else {$.error( 'Method ' +  params + ' does not exist on jQuery.svg3DTagCloud' );}}} );};} ( jQuery ) );}

html 3D球状旋转标签云文字云效果相关推荐

词云文字云标签云教程19年最新版
必须推荐这款免费又好用的线上词云工具在V2EX看到发的帖子,关于微词云的创作总结 [半自由职业两个月总结]:[ http://t.cn/EIDTbpa ] 支持独立开发者,一路走来真心不容易我仔细 ...
【web前端特效源码】使用 HTMLCSSJavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开发基础入门教程|网页制作|网站开发定制
b站视频演示效果: [web前端特效源码]使用 HTML&CSS&JavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开效 ...
超酷的javascript文字云/标签云效果 - D3 Cloud
日期:2012-10-11 来源:GBin1.com 在线演示如果你想创建漂亮的文字云或者标签云效果的话,你可以考虑使用D3-Cloud,这是一个超棒的开源字体云效果javascript类库,基于 ...
【3D计算机视觉】PRIN——基于点云的旋转不变性网络
PRIN: Pointwise Rotation-Invariant Network 一.论文摘要二.模型概述 2.1 相关工作 2.2 网络结构 2.3 Rotation-Invariant Po ...
Canvas 3D球形文字云动画特效
Canvas 3D球形文字云动画特效 Canvas 3D球形文字云动画特效效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. ...
java文字云_Canvas 3D球形文字云动画特效
Canvas 3D球形文字云动画特效 body { color:#555555; } h4 { font-family:sans-serif; color:#555555; font-size:16p ...
js实现3d标签云tag动画效果js特效代码
下载地址JS制作TAG标签云文字动画特效是一款当鼠标悬停某个标签时,当前标签静止,移出恢复滚动效果.tagcloud({ selector: ".tagcloud", //元素选择 ...
tagcanvas.min.js 文字云
tagcanvas官网地址: http://www.goat1000.com/tagcanvas-options.php 引入 tagcanvas.min.js Internet Explorer 9 ...
R语言文字云神器wordcloud2包
续上篇文章,总结下wordcloud2包,主要的函数包括wordcloud2()和letterword(),其中wordcloud2函数用于生成文字云,而letterword能将词云设置成文字形状,接 ...

html 3D球状旋转标签云文字云效果

html 3D球状旋转标签云文字云效果相关推荐

最新文章

热门文章