태그 클라우드 애니메이션 for 티스토리

 

 

 

 

    

 

Origin & Demo

 

 

GitHub - cong-min/TagCloud: ☁️ 3D TagCloud.js rotating with mouse

 

Tag Cloud Animation

 

 

 

 

 

 

Code & Download

 

 

<script src="./images/tagCloud.min.js"></script>

 

 

const myTags = [
	'2020년 장마',
	'COVID-19',
	'Fujifilm Finepix F300EXR',
	'Fujifilm FinePix F750EXR',
	'Kodak EasyShare M532',
	'Kodak Ektar 100',
	'Snowing Effect'
];

// var tagCloud = TagCloud('태그 클라우드가 들어갈 요소명', myTags,{
var tagCloud = TagCloud('#tagcloud', myTags,{
    // radius in px - 간격
    radius: 250,

    // animation speed
    // slow, normal, fast
    maxSpeed: 'fast',
    initSpeed: 'normal',

    // 0 = top
    // 90 = left
    // 135 = right-bottom
    direction: 135,
    
    // interact with cursor move on mouse out
    keep: true
});

//To change the color of text randomly
var colors = ['#34A853', '#FBBC05', '#4285F4', '#7FBC00', 'FFBA01', '01A6F0'];
var random_color = colors[Math.floor(Math.random() * colors.length)];
document.querySelector('.content').style.color = random_color;

 

 

/* 태그 클라우드가 표시될 레이어 */
#tagcloud { width: 350px; height: 350px; }

/* 태그 클라우드

	티스토리 사이드바의 너비와 어울리게 하려면,
	scale 값을 줄이고 font-size 값을 올려줄 것.
    
*/
.tagcloud {
    font-family: 'Arial';
    font-size: 26px;
    margin: auto;
    width: 100% !important;
    height: 100% !important;
    transform: scale(0.6);
}

 

 

tagCloud.min.js

6.8 kB