ã¨ã³ã¸ãã¢ã®éå±±ï¼@spicato_kanaï¼ã§ãï¼
ä»åã¯ãã¿ã¤ãã«ã®éãç°¡åãªããã¹ãã¢ãã¡ã¼ã·ã§ã³ãç´¹ä»ãã¾ãã
å
ã
ã¯å人ã®ã¹ãã¬ã¹çºæ£ã®ããã«ä½ã£ã¦ããã®ã§ãããã©ãããªãããã°ã«ãã¦å
¬éãããã¨æãã¾ã¨ãã¦ã¿ã¾ããã
CodePen ãç¨ãã¦å®éã®ç»é¢ã¨ã³ã¼ããè¦ãªããã¡ãã£ã¨ãã解説ã交ãã¦ããããã¨æãã¾ãã
JavaScript ã¯ãã¯ã©ã¹ã®ä»ãå¤ãã§ããããã¦ãã¾ãã®ã§å¿ è¦ã«å¿ãã¦ã¹ã¯ãã¼ã«ã«é£åãããããã¯ãªãã¯ã¤ãã³ãå¾ã«çºç«ãããã調æ´ãã¦é ããã°ãªã¨æãã¾ãï¼
1. ä¸ãã1ã¤ãã¤è¡¨ç¤ºãããð
æåããæåã1æåãã¤span
ã¿ã°ã§åºåã£ã¦ãã¾ãããSplitting.js ã®ãããªãã©ã°ã¤ã³ã使ç¨ãããããã¡ãã®è¨äºã®ããã«èªä½ããã®ãããããã§ãï¼
ã¡ãã£ã¨å¤ããã°ä»åã®ããã«CSSå¤æ°ã使ã£ã¦ã¤ã³ããã¯ã¹ãä»ä¸ã§ããã¨æãã¾ãã
.char {
display: inline-block;
transform: translateY(var(--y, 110%));
transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: calc(0.04s * var(--char-index));
}
ä¸è¨ã®ããã«ãCSSå¤æ°ã§--y
ãè¨å®ãã¦ãããã¨ã§ã
.text.is-active {
--y: 0;
}
親è¦ç´ ã« is-active
ãã¤ããã ãã§ã¢ãã¡ã¼ã·ã§ã³ãçºç«ãããããã«ãã¦ãã¾ãã
ãã¾ãCSSã®ãã¹ããæ·±ãããããªãã£ãã®ã§ããã
ã¾ãããã£ã¬ã¤ãCSSå¤æ°ãç¨ãããã¨ã§1æåãã¤è¨å®ãããSCSSã®foræã使ç¨ããã¨ã
transition-delay: calc(0.04s * var(--char-index));
ãã®é¨åã®ã¿ã§å®çµãã¦ãã¾ãï¼
ease
ã¯ã ease-in-out
ã§ãã
ã°ã©ãã¯ãã¡ã
èªåçã«ãã®ã¢ãã¡ã¼ã·ã§ã³ã使ãã¤ã¡ã¼ã¸ã¯ã
- ã¯ã¼ã«
- æ ç·æ
- é«ç´æ
ã表ç¾ãããæã«ä½¿ããã¨ãå¤ãã§ãã
2. 横ãã1ã¤ãã¤è¡¨ç¤ºãããâºï¸
ä¸ããåºããã¼ã¿ã³ã横ããã«ããã ãã§ãããé°å²æ°ãçµæ§å¤ããã¾ãã
ease
ã¯ã ease-in-out
ã§ãã
ã°ã©ãã¯ãã¡ã
使ãã¨ãã®ã¤ã¡ã¼ã¸ã¯ã
- ã¯ã¼ã«
- ãã³ãæ
- é«ç´æ
ã§ãä¸ãããã¿ã¼ã³ã¨å°ãåãã§ã¯ããã¾ããè¦ãç®ããæãããã®ãéãã®ã§ã©ã¡ããã§çµ±ä¸ãã¦ãããã§ãããX,Y軸交äºã«ãã£ã¦ãããã§ããããã
ææã®1ã¤ã¨ãã¦è¦ãã¦ãããè¯ãã§ãï¼
3. ãã§ã¼ãã§1ã¤ãã¤è¡¨ç¤ºãããð
次ã¯ãã§ã¼ãã§åºããã¼ã¸ã§ã³ã§ãã
ease
ã¯ã ease-in-out
ã§ãã
ã°ã©ãã¯ãã¡ã
使ãã¨ãã®ã¤ã¡ã¼ã¸ã¯ã
- ã¯ã¼ã«
- æ ç·æ
- é«ç´æ
ã§ãã
1ã¤ãã®æ¨ªããåºããã®ã¨æ¯ã¹ãã¨ããæ
ç·æãå¼·ãããã£ããã¨ããä¸ç観ã表ç¾ã§ãã¾ãã
4. æãã®ç¶æ ããä¸ãã1ã¤ãã¤è¡¨ç¤ºãããð
ä»åº¦ã¯ãæãã®åãã追å ããã¾ãã
ããã«ããè¥å¹²ã®ããããªæãã«ãªããã¨æãã¾ãã
Y軸ã ãã§ã¯ãªããå転ãå¤æ°ã§ç®¡çãä¸è¨ã³ã¼ãã®ãããªå®è£ ã¨ãªãã¾ãã
.text.is-active {
--y: 0;
--rotate: 0;
}
.char {
display: inline-block;
transform: translateY(var(--y, -110%)) rotate(var(--rotate, -45deg));
transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: calc(0.02s * var(--char-index));
}
ease
ã¯ã ease-in-out
ã§ãã
ã°ã©ãã¯ãã¡ã
使ãã¨ãã®ã¤ã¡ã¼ã¸ã¯ã
- ã©ã¡ããã¨ããã¨ããã
- ãã³ãæ
- ã«ã¸ã¥ã¢ã«
ã§ãã
5. å°ããç¶æ ãã1ãã¤å¤§ããã¦è¡¨ç¤ºãããð
ä»åº¦ã¯å¤§ããï¼scaleï¼ã§1ãã¤è¡¨ç¤ºããã¾ãã
ããããªæãã§ãããªããé«ç´æãåºããã¨ãåºæ¥ã¾ãã
ã¾ãã表示ãã¦ãããã¿ã¼ã³ã¨é表示ã«ãã¦ãããã¿ã¼ã³ã§ãæããé°å²æ°ãéãã®ãé¢ç½ãã§ããã
ease
ã¯ã ease-in-out
ãå¼±ãã® ease-out
ãçµã¿åããã¦ãã¾ãã
ease-in-out ã®ã°ã©ãã¯ãã¡ã
å¼±ãã® ease-out ã®ã°ã©ãã¯ãã¡ã
使ãã¨ãã®ã¤ã¡ã¼ã¸ã¯ã
- ã©ã¡ããã¨ããã¨ããã
- ãã³ãæ
- é«ç´æ
ã§ãã
6. 3ã¤ã«ã¹ã©ã¤ã¹ãã¦æ¨ªãã表示ãããð
ããã¹ããããã¯ã3ã¤ä½æãããããã position: absolute;
ãä»ä¸ããã¦éãã¦ãã¾ãã
1ã¤ãã¤ã« mask-image
ãä»ä¸ããããã¨ã§ä¸ãã33ï¼
ãçãä¸ãã33%ãä¸ãã33ï¼
ã表示ããã¦ãããããåããã¦ãã¾ãã
.text1 {
mask-image: linear-gradient(
to bottom,
#000 33.3%,
transparent 33.3%
);
transform: translateX(var(--x, -110%)) skewX(var(--skewX, 40deg));
}
.text2 {
mask-image: linear-gradient(
to bottom,
transparent 33.3%,
#000 33.3%,
#000 66.6%,
transparent 66.6%
);
transform: translateX(var(--x, 110%)) skewX(var(--skewX, -40deg));
}
.text3 {
mask-image: linear-gradient(
to bottom,
transparent 66.6%,
#000 66.6%
);
transform: translateX(var(--x, -110%)) skewX(var(--skewX, 40deg));
}
ä¸è¨ã®ãããªã³ã¼ãã§ãã¹ã¯ããã¦ãã¾ãã
ããã«ãskew
ãä»ä¸ããããã¨ã§ã¹ã¿ã¤ãªãã·ã¥ãªé°å²æ°ããã©ã¹ãã¦ãã¾ãã
ease
ã¯ãå¼·ãã® ease-out
ã§ãã
ease-out ã®ã°ã©ãã¯ãã¡ã
使ãã¨ãã®ã¤ã¡ã¼ã¸ã¯ã
- ã¯ã¼ã«
- ãã³ãæ
- ã«ã¸ã¥ã¢ã«
ã§ãã
7. è²ä»ãã®ããã¯ã¹ã¨ä¸ç·ã«æ¨ªãã表示ãããð
空divãçä¼¼è¦ç´ ã« background-color
ã§è²ãä»ãã¦æ¨ªãã表示ããããã«è¿½å¾ããããã«ããã¹ãã表示ããã¦ãã¾ãã
.text::before,
.text::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50vh;
transform: translateX(var(--cover-x, -101%));
transition: transform 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
}
ease
ã¯ãè²ä»ãããã¯ã¹ï¼ã«ãã¼ï¼ã¯ å¼±ãã® ease-out
ã§ãããã¹ãã¯å¼·ãã® ease-out
ã使ç¨ãã¦ãã¾ãã
ãã£ã¬ã¤ã®ã¿ã¤ãã³ã°ã調æ´ããããæãã«éãªããªãã表示ãããããã«ãã¦ãã¾ãã
å¼±ãã® ease-out ã®ã°ã©ãã¯ãã¡ã
å¼·ãã® ease-out ã®ã°ã©ãã¯ãã¡ã
使ãã¨ãã®ã¤ã¡ã¼ã¸ã¯ã
- ããã
- ãã³ãæ
- ã«ã¸ã¥ã¢ã«
ã§ãã
8. 横ããã®ã¥ãã¨ç¸®å°ããªãã表示ãããð¤©
ãã®åãã¯ããã¡ãã®è¨äºã«ãã Squash and Stretch
ãæèãããã®ã§ãã
ããåã£ãå
容ã«ããå ´åã¯ã横ããã®ç§»åãskew
ã縮ã¿ãåã
ã® ease
ãã¢ãã¡ã¼ã·ã§ã³ã®ã¿ã¤ãã³ã°ããããã¾ãããã
ãããè¨äºã®ãã®ã«è¿ã¥ããããªã¨æãã¾ãã
ã¾ããä»åã¯CSSã¢ãã¡ã¼ã·ã§ã³ã§å®è£ ãã¦ãã¾ãã
.text.is-active {
animation: text08 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes text08 {
0% {
opacity: 0;
transform: translateX(20vw) scaleX(1) scaleY(1) skew(-60deg);
}
10% {
opacity: 1;
}
80% {
transform: scaleX(0.3) scaleY(1.2);
}
100% {
transform: scaleX(1) scaleY(1);
}
}
ease
ã¯ãå¼·ãã® ease-out
ã§ãã
ease-out ã®ã°ã©ãã¯ãã¡ã
使ãã¨ãã®ã¤ã¡ã¼ã¸ã¯ã
- ããã
- ãã³ãæ
- ã«ã¸ã¥ã¢ã«
ã§ãã
9. 横ããé ã«ç §ãããã¦ããããã«è¡¨ç¤ºãããð¤
ã¤ã¡ã¼ã¸ã¨ãã¦ã¯çã£æãªç©ºéã«ç¯å°ããããããã¹ãã«å¯¾ãã¦æ¨ªããã©ã¤ããããã£ã¦è¦ãã¦ããã¨ãããã®ãæ³åãã¦å®è£ ãã¦ãã¾ãã
filter: blur
ã使ç¨ãã¦ãã«ã·ãå
¥ããCSSã¢ãã¡ã¼ã·ã§ã³ã§å®è£
ãã¦ãã¾ãã
ã¢ãã¡ã¼ã·ã§ã³ã®æå¾ã§ã¾ãé表示ã«ããduration
ãdelay
ã調æ´ãã¦è¡¨ç¤ºãã¦ããããã¦ããªãé¨åã®ééã調ç¯ãã¦ãã¾ãã
.text > .char {
filter: blur(8px);
opacity: 0;
}
.text.is-active > .char {
animation: text09 1s cubic-bezier(0.77, 0, 0.175, 1);
animation-fill-mode: forwards;
animation-delay: calc(0.12s * var(--char-index));
}
@keyframes text09 {
0% {
filter: blur(8px);
opacity: 0;
}
33.3% {
filter: blur(2px);
opacity: 1;
}
50% {
filter: blur(0);
opacity: 1;
}
100% {
filter: blur(4px);
opacity: 0;
}
}
ease
ã¯ãease-in-out
ã§ãã
ease-in-out ã®ã°ã©ãã¯ãã¡ã
使ãã¨ãã®ã¤ã¡ã¼ã¸ã¯ã
- ã¯ã¼ã«
- æ ç·æ
- ã«ã¸ã¥ã¢ã«
ã§ãã
10. ããã¼ã³ã¨ä¸ãã表示ãããð¤
ä¸ãã大ãã表示ããã¦ãã¾ãã
CSSã¢ãã¡ã¼ã·ã§ã³ãease-out-back
ã使ç¨ãããªã¼ãã¼ãªåããå®è£
ãã¦ãã¾ãã
.text.is-active {
animation: text08 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes text08 {
0% {
opacity: 0;
transform: scale(0.3) translateY(150%);
}
30% {
opacity: 1;
}
75% {
transform: scale(1.5) translateY(-30%);
}
100% {
transform: scale(1) translateY(0);
}
}
ã¾ããease-out-back ã®ã°ã©ãã¯ãã¡ã
使ãã¨ãã®ã¤ã¡ã¼ã¸ã¯ã
- ããã
- ãã³ãæ
- ã«ã¸ã¥ã¢ã«
ã§ãã
ã¾ã¨ãð¥³
ææãã¨ããããçæéã«ä½æãããã®ãªã®ã§å¤§å¤æ縮ã§ããå¦ä½ã§ããã§ããããï¼
ä»å¾ããããããã®ç°¡åãªãã¤ãã¾ã¨ãã¦ãããã°ã¨ãã¦ã¢ã¦ãããããã¦ããããã§ããããï¼
ã¾ããCodePen ï¼ã³ã¼ãä»ãï¼ãªã®ã§ããã«ä½¿ããã¨æãã¾ãã
ã©ãã©ã使ã£ã¦ããã£ã¦ã大ä¸å¤«ã§ãã®ã§ãå°ãã§ãåèã«ãªãã°å¹¸ãã§ãï¼