javascript - 这是如何制作的(WordBall,透明四面体)

标签 javascript html css animation

<分区>


我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。

关闭 3 年前

有人熟悉这里用来创建字球的工具吗 | https://jacekjeznach.com/skills/ |和漂浮的透明四面体,图片在这里 | https://jacekjeznach.com/about/ | ?任何建议都将不胜感激。

我尝试使用 THREEjs 重新创建这两个,但是我没有成功。我无法实现字球(或一般的字球)的鼠标跟随或四面体的清晰背景和图像

最佳答案

其实很简单。
但首先你必须附加名为 cloudTag.js 的 javascript 库。
CloudTag Can Be Download From Here


然后添加Jquery CDN

*<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>*

添加 HTML

<div id="tagcloud">

<ul>

<li><a href="#">Tag 1</a></li>

<li><a href="#">Tag 2</a></li>

<li><a href="#">Tag 3</a></li>

...

</ul>

</div>

添加 Javascript。

var settings = {
//height of sphere container
height: 400,
//width of sphere container
width: 400,
//radius of sphere
radius: 150,
//rotation speed
speed: 3,
//sphere rotations slower
slower: 0.9,
//delay between up<a href="https://www.jqueryscript.net/time-clock/">date</a> position
timer: 5,
//dependence of a font size on axis Z
fontMultiplier: 15,
//tag css stylies on mouse over
hoverStyle: {
border: 'none',
color: '#0b2e6f'
},
//tag css stylies on mouse out
mouseOutStyle: {
border: '',
color: ''
}
};

$(document).ready(function(){
$('#tagcloud').tagoSphere(settings);
});

关于javascript - 这是如何制作的(WordBall,透明四面体),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57843246/

上一篇:css - 将 flexbox 的子元素与第二个 flexbox 的子元素对齐?

下一篇:html - 图像左侧,文本和标题在 HTML 和 CSS 中右对齐顶部

相关文章:

javascript - Adobe Edge 如何通过代码禁用自动播放?

javascript - 滑动导航菜单 (sliiide.js) 部分工作

CSS Div 尊重其他 div

CSS:对齐背景图片

javascript - css背景图片移动

javascript - 如何使用 Node JS 向 ActiveMQ 发送 JSON 对象消息

javascript - CSS 导航链接样式 : remove styling of other element & remove double border when hovered on selected

html - 如何为导入 svg 图标的 md-icon 着色?

html - 整个网页的行间距

javascript - 网页中的半透明div