티스토리 뷰
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Happy Birthday, JavaScript!</title>
<style>
body {
background: #34E1FF;
font-family: 'Fredoka One', cursive;
overflow-x: hidden;
}
.container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.text {
min-width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px #2C3A49;
font-size: 3em;
}
.text .char {
-webkit-animation: slide-in 1s cubic-bezier(0.5, 0, 0.5, 1) both;
animation: slide-in 1s cubic-bezier(0.5, 0, 0.5, 1) both;
-webkit-animation-delay: calc(60ms * var(--char-index));
animation-delay: calc(60ms * var(--char-index));
}
@-webkit-keyframes slide-in {
from {
-webkit-transform: translateY(-1em) rotate(-0.5turn) scale(0.5);
transform: translateY(-1em) rotate(-0.5turn) scale(0.5);
opacity: 0;
}
}
@keyframes slide-in {
from {
-webkit-transform: translateY(-1em) rotate(-0.5turn) scale(0.5);
transform: translateY(-1em) rotate(-0.5turn) scale(0.5);
opacity: 0;
}
}
.presents {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: end;
align-items: flex-end;
height: 200px;
}
.green {
position: relative;
left: -20px;
width: 100px;
height: 100px;
z-index: 1;
}
.green:hover {
-webkit-animation: 0.5s green;
animation: 0.5s green;
}
.green .lid {
background: #3DDC81;
}
.green .box {
background-image: radial-gradient(#fff 20%, transparent 20%), radial-gradient(#fff 20%, transparent 20%);
background-color: #3DDC81;
}
.green .ribbon {
background: #F75D4C;
}
.green .ribbon::before {
top: 21%;
}
.green .bow {
background: #F75D4C;
}
.green .bow::before, .green .bow::after {
background: #F75D4C;
}
@-webkit-keyframes green {
0% {
width: 100px;
height: 100px;
}
30% {
width: calc(100px + 10px);
height: calc(100px - 10px);
}
60% {
width: calc(100px - 10px);
height: calc(100px + 10px);
}
100% {
width: 100px;
height: 100px;
}
}
@keyframes green {
0% {
width: 100px;
height: 100px;
}
30% {
width: calc(100px + 10px);
height: calc(100px - 10px);
}
60% {
width: calc(100px - 10px);
height: calc(100px + 10px);
}
100% {
width: 100px;
height: 100px;
}
}
.orange {
position: relative;
left: 20px;
width: 130px;
height: 120px;
z-index: 10;
}
.orange:hover {
-webkit-animation: 0.5s orange;
animation: 0.5s orange;
}
.orange .lid {
background: #FFA726;
}
.orange .box {
background-image: radial-gradient(#2C3A49 20%, transparent 20%), radial-gradient(#2C3A49 20%, transparent 20%);
background-color: #FFA726;
}
.orange .ribbon {
background: #F75D4C;
}
.orange .ribbon::before {
top: 21%;
}
.orange .bow {
background: #F75D4C;
}
.orange .bow::before, .orange .bow::after {
background: #F75D4C;
}
@-webkit-keyframes orange {
0% {
width: 130px;
height: 120px;
}
30% {
width: calc(130px + 10px);
height: calc(120px - 10px);
}
60% {
width: calc(130px - 10px);
height: calc(120px + 10px);
}
100% {
width: 130px;
height: 120px;
}
}
@keyframes orange {
0% {
width: 130px;
height: 120px;
}
30% {
width: calc(130px + 10px);
height: calc(120px - 10px);
}
60% {
width: calc(130px - 10px);
height: calc(120px + 10px);
}
100% {
width: 130px;
height: 120px;
}
}
.blue {
position: relative;
left: 0;
width: 120px;
height: 160px;
z-index: 0;
}
.blue:hover {
-webkit-animation: 0.5s blue;
animation: 0.5s blue;
}
.blue .lid {
background: #1BB5FE;
}
.blue .box {
background-image: radial-gradient(transparent 20%, transparent 20%), radial-gradient(transparent 20%, transparent 20%);
background-color: #1BB5FE;
}
.blue .ribbon {
background: #3DDC81;
}
.blue .ribbon::before {
top: 21%;
}
.blue .bow {
background: #3DDC81;
}
.blue .bow::before, .blue .bow::after {
background: #3DDC81;
}
@-webkit-keyframes blue {
0% {
width: 120px;
height: 160px;
}
30% {
width: calc(120px + 10px);
height: calc(160px - 10px);
}
60% {
width: calc(120px - 10px);
height: calc(160px + 10px);
}
100% {
width: 120px;
height: 160px;
}
}
@keyframes blue {
0% {
width: 120px;
height: 160px;
}
30% {
width: calc(120px + 10px);
height: calc(160px - 10px);
}
60% {
width: calc(120px - 10px);
height: calc(160px + 10px);
}
100% {
width: 120px;
height: 160px;
}
}
.present {
position: relative;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
cursor: pointer;
}
.present .lid {
height: 20%;
width: calc(100% + 10px);
border: 4px solid #2C3A49;
border-radius: 5px;
box-shadow: inset 2px 2px rgba(255, 255, 255, 0.5), 5px 0 rgba(0, 0, 0, 0.15);
}
.present .box {
width: 100%;
height: 100%;
background-position: 0 0, 20px 20px;
background-size: 40px 40px;
border: 4px solid #2C3A49;
border-top: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: inset -10px 5px rgba(0, 0, 0, 0.3), 5px 0 rgba(0, 0, 0, 0.15);
}
.present .ribbon {
position: absolute;
top: -3px;
width: 30px;
height: calc(100% - 5px);
border: 4px solid #2C3A49;
border-radius: 5px;
box-shadow: inset 2px 2px rgba(255, 255, 255, 0.5);
}
.present .ribbon::before {
display: block;
content: '';
position: absolute;
width: 100%;
height: 5px;
background: rgba(0, 0, 0, 0.3);
}
.present .bow {
position: absolute;
top: -20px;
width: 20px;
height: 20px;
border: 4px solid #2C3A49;
border-radius: 50%;
box-shadow: inset 2px 2px rgba(255, 255, 255, 0.5), inset -2px -5px rgba(0, 0, 0, 0.3);
}
.present .bow::before, .present .bow::after {
display: block;
content: '';
position: absolute;
top: -10px;
width: 30px;
height: 30px;
border: 4px solid #2C3A49;
border-radius: 50%;
box-shadow: inset 2px 2px rgba(255, 255, 255, 0.5), inset -2px -5px rgba(0, 0, 0, 0.3);
z-index: -1;
}
.present .bow::before {
left: 15px;
}
.present .bow::after {
right: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="text" data-splitting="">Happy Birthday, JavaScript!</div>
<div class="presents">
<div class="present orange">
<div class="lid"></div>
<div class="box"></div>
<div class="bow"></div>
<div class="ribbon"></div>
</div>
<div class="present blue">
<div class="lid"></div>
<div class="box"></div>
<div class="bow"></div>
<div class="ribbon"></div>
</div>
<div class="present green">
<div class="lid"></div>
<div class="box"></div>
<div class="bow"></div>
<div class="ribbon"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/mojs/0.288.1/mo.min.js"></script><!-- 팡팡 터지는 애니매이션을 위해 사용 -->
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script><!-- 텍스트 애니매이션을 위해 사용 -->
<script>
document.addEventListener("click", event => {
bursty(event.pageX, event.pageY);
});
setInterval(() => randomizedConfetti(), 500);
function bursty(x, y) {
const burst = new mojs.Burst({
left: 0,
top: 0,
radius: { 0: 200 },
count: 20,
degree: 360,
children: {
fill: { white: "#34E1FF" },
duration: 2000 } }).
tune({
x: x,
y: y });
burst.replay();
}
function randomizedConfetti() {
let randomX = Math.floor(Math.random() * (document.body.clientWidth - 100) + 0);
let randomY = Math.floor(Math.random() * (window.innerHeight - 200) + 0);
const burst = new mojs.Burst({
left: 0,
top: 0,
radius: { 0: 200 },
count: 20,
degree: 360,
children: {
fill: { white: "#34E1FF" },
duration: 2000 } }).
tune({
x: randomX,
y: randomY });
burst.replay();
}
Splitting();
</script>
</body>
</html>출처: codepen.io/cassidoo/pen/yLaVYbK
사용된 라이브러리
mo.js
mojs.github.io
Splitting.js
CSS Vars for split words, chars, images and more!
splitting.js.org
'CodePen 따라하기' 카테고리의 다른 글
| 밤낮 전환 토글 (0) | 2020.12.15 |
|---|