Code for Interests Animation (Example)

Intro

Hi everyone! I'm shae, I like to code.

Recently I made an animation for my "【ＳＨÆ＇Ｓ　ＩＮＴＥＲＥＳＴＳ】" table, on my profile, where the cells of the table grow bigger when you hover over it with your mouse.

This is the blog post where I will be posting the code for it.

Please be aware that this might not work for all profiles, you may have to tweak it a little if you want it to fit your profile.

This is meant for educational purposes, for those who want the actual code, please leave a comment and I'll make another blog post.

Without further adieu, here's the post!

Visual Example

Here is an interactable example of what the animation looks like, you can hover over the cells with your mouse to see.

【ＧＥＮＥＲＡＬ】	Test1
【ＭＵＳＩＣ】	Test2
【ＭＯＶＩＥＳ】	Test3
【ＴＥＬＥＶＩＳＩＯＮ】	Test4
【ＢＯＯＫＳ】	Test5
【ＨＥＲＯＥＳ】	Test6

    
/* All names of variables and classes are made for the example above this*/
:root {
        /* These variables you can change */
        /* the last number for rgba is the opacity of the color */
	--leftCellColor: rgba(118, 172, 255, 0.7);
	--rightCellColor: rgba(139, 208, 255, 0.7);
}

/* This sets the values for both sides of the cells */
.test-table tbody tr td {
	border-radius: 25px;
	text-align: center;
	vertical-align: middle;
	width: 192px;
	height: 50px;
	overflow: hidden;
	transition: all 0.5s ease;
}

/* This is only for the left cells (So the categories) */
.test-table tbody tr td:first-child {
	border: 0;
	background-color: var(--leftCellColor);
}

/* This is only for the right cells (So for the interests) */
.test-table tbody tr td:last-child {
	border: 0;
	background-color: var(--rightCellColor);
}

/* This is for when you hover over the left cells */
.test-table tbody tr td:first-child:hover {
	width: 230px;
	height: 72px;
}

/* This is for when you hover over the right cells */
.test-table tbody tr td:last-child:hover {
	width: 230px;
	height: 72px;
}

WARNING! THIS IS NOT THE ACTUAL CODE!

THIS CODE ONLY APPLIES TO THE EXAMPLE ABOVE IT!

EDIT: Small edit to make the code more readable

EDIT2: Layout change

EDIT3: Minor layout changes

10 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

Caribe

1674238741

Wow this looks so cool

Report Comment