[해피CGI][cgimall] 클릭하면 아이콘이 나오는 바 애니메이션 Chat Bar Interaction
+ 버튼을 클릭하면 아이콘이 나오는 바 애니메이션입니다.
소스를 변경하여 다양하게 응용 가능합니다.
HTML 구조
<nav class="chatbar">
<div class="control">
<a>
<svg>
<use xlink:href="#plus">
</svg>
</a>
<div class="text">
<input type="text" placeholder="Message">
</div>
<ul class="list">
<li>
<a href="">
<svg>
<use xlink:href="#video">
</svg>
</a>
</li>
<li>
<a href="">
<svg>
<use xlink:href="#photo">
</svg>
</a>
</li>
<li>
<a href="">
<svg>
<use xlink:href="#image">
</svg>
</a>
</li>
</ul>
</div>
</nav>
.
.
.
CSS(SCSS) 소스
.chatbar {
--primary: #275EFE;
--shadow: rgba(39, 94, 254, .2);
width: 276px;
position: relative;
padding: 20px;
border-radius: 42px;
background: var(--primary);
overflow: hidden;
transform-origin: 42px 50%;
box-shadow: 0 32px 48px -8px var(--shadow);
.control {
--rotate: 0deg;
position: relative;
transform-origin: 22px 22px;
transition: transform .45s ease;
transform: rotate(var(--rotate));
& > a {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
cursor: pointer;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(#fff, .2);
svg {
width: 28px;
height: 28px;
display: block;
color: #fff;
}
}
.text,
.list {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 0 0 0 64px;
transform-origin: 22px 50%;
}
.text {
top: -6px;
input {
line-height: 24px;
padding: 14px 22px;
border: 0;
border-radius: 26px;
background: rgba(#fff, .2);
display: block;
color: #fff;
font-size: 18px;
outline: none;
width: 100%;
&::placeholder {
color: rgba(#fff, .4);
opacity: 1;
}
}
}
.list {
margin: 0;
list-style: none;
display: flex;
justify-content: space-between;
transform: rotate(135deg);
li {
--y: 0;
transition: transform 1s ease;
transform: translateY(var(--y));
a {
display: flex;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(#fff, .2);
svg {
width: 20px;
height: 20px;
display: block;
color: #fff;
stroke-linecap: round;
stroke-width: 1.2;
stroke-linejoin: round;
}
}
&:nth-child(2) {
--y: 8px;
}
&:nth-child(3) {
--y: 16px;
}
}
}
}
&.active {
animation: top 1s ease-in-out forwards;
.control {
--rotate: -135deg;
.list {
li {
--y: 0;
}
}
}
&.default {
animation: down 1s ease-in-out forwards;
.control {
--rotate: 0deg;
}
}
}
}
@keyframes top {
0%,
100% {
transform: rotate(0deg);
}
50%,
60% {
transform: rotate(-6deg);
}
88% {
transform: rotate(1deg);
}
}
@keyframes down {
0%,
100% {
transform: rotate(0deg);
}
50%,
60% {
transform: rotate(6deg);
}
88% {
transform: rotate(-1deg);
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// Center & dribbble
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #E4ECFA;
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
img {
display: block;
height: 28px;
}
}
}
JS 소스
$('.chatbar .control > a').on('click touch', function(e) {
e.preventDefault();
let parent = $(this).parent().parent();
if(parent.hasClass('active')) {
parent.addClass('default');
setTimeout(() => {
parent.removeClass('active default');
}, 1000);
} else {
parent.addClass('active');
}
});
첨부파일을 다운로드하거나 해당 사이트로 이동하여 전체 소스를 확인하실 수 있습니다.
