cssanimationをつかってポートフォリオサイトを作る①

ポートフォリオ

くりちゃんです。

今回はHTML/CSSの勉強を始めて一年たったので、ポートフォリオサイトを作ってみたいと思います。

デザインはできないので、とりあえずアニメーションをいっぱい使って作ってみようと思います。良い勉強にもなりますしね。

6月9日、ポートフォリオサイトの進捗具合

現在(6月9日)のポートフォリオサイトの進捗具合がこちら↓(PC/Chrome閲覧推奨)

motion-prot

コードについて解説

時間経過で色が変わっていく背景

まず最初に全体背景ですね。背景は時間経過で色が変わっていきます↓

コードがこちら↓

<!-- background -->
<div class="bg">
    <span></span>
    <span></span>
</div>
/*================= 
Basic style 
==================*/
html, body{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/*================= 
background
==================*/
.animation_body{
    width: 100%;
    height: 100%;
    animation: bg01 20s infinite;
}
.bg{
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.bg span:nth-child(1){
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    bottom: -5vw;
    border-top: 23vw solid transparent;
    border-right: 23vw solid transparent;
    border-bottom: 23vw solid #006c78;
    border-left: 23vw solid #117b88;
    animation: bg02 20s infinite;
}
.bg span:nth-child(2){
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    border-top: 20vw solid transparent;
    border-right: 20vw solid #cacecf;
    animation: bg03 20s infinite;
}
@keyframes bg01 {
    0%{
        background-color: #a8bdc1;
    }
    25%{
        background-color: #beeef7;
    }
    50%{
        background-color: #ffeaa5;
    }
    75%{
        background-color: #e41749;
    }
    100%{
        background-color: #a8bdc1;
    }
}
@keyframes bg02 {
    0%{
        border-bottom: 23vw solid #006c78;
        border-left: 23vw solid #117b88;    
    }
    25%{
        border-bottom: 23vw solid #6fc2d0;
        border-left: 23vw solid #373a6d;        
    }
    50%{
        border-bottom: 23vw solid #226b80;
        border-left: 23vw solid #40a798;        
    }
    75%{
        border-bottom: 23vw solid #f5587b;
        border-left: 23vw solid #ff8a5c;        
    }
    100%{
        border-bottom: 23vw solid #006c78;
        border-left: 23vw solid #117b88;    
    }
}
@keyframes bg03 {
    0%{
        border-right: 20vw solid #cacecf;
    }
    25%{
        border-right: 20vw solid #ff8246;      
    }
    50%{
        border-right: 20vw solid #ffebd3;   
    }
    75%{
        border-right: 20vw solid #fff591;   
    }
    100%{
        border-right: 20vw solid #cacecf;
    }
}

三角形はborderをつかって作り、absoluteでそれぞれの位置に配置しています。

色が変わっていく部分はcssanimationで25%の時、50%の時、75%の時、100%の時でそれぞれ色を指定してあげています。

四方向からでてくるカード部分

次に四方からでてくるカード部分のアニメーションですね。

コードがこちら↓

<div class="animation02">
    <div class="wrapper">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="lavel"></div>
</div>
/*================= 
animation02 bg
==================*/
.animation02{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
    height: 60%;
}
.animation02 .wrapper{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}
.animation02 .wrapper div{
    display: block;
    background-color: #fff;
    opacity: 0;
}
.animation02 .wrapper span{
    background-color: #333;
    opacity: 0;
}
.animation02 .wrapper div:nth-child(1){
    width: 55%;
    height: 55%;
    animation: animation1_box 0.6s ease-in-out 0.5s forwards;
    transform-origin: top left;
}
.animation02 .wrapper div:nth-child(2){
    width: 45%;
    height: 55%;
    animation: animation1_box 0.6s ease-in-out 0.5s forwards;
    transform-origin: top right;
}
.animation02 .wrapper div:nth-child(3){
    width: 45%;
    height: 45%;
    animation: animation1_box 0.6s ease-in-out 0.5s forwards;
    transform-origin: bottom left;
}
.animation02 .wrapper div:nth-child(4){
    width: 55%;
    height: 45%;
    animation: animation1_box 0.6s ease-in-out 0.5s forwards;
    transform-origin: bottom right;
}
.animation02 .wrapper span:nth-child(5){
    position: absolute;
    top: 3%;
    left: 2%;
    width: 96%;
    height: 0.5%;
    animation: animation1_border02 0.8s ease-in-out 0.5s forwards;
    transform-origin: top left;
}
.animation02 .wrapper span:nth-child(6){
    position: absolute;
    top: 3%;
    left: 2%;
    width: 0.325%;
    height: 94%;
    animation: animation1_border01 0.8s ease-in-out 0.5s forwards;
    transform-origin: top right;
}
.animation02 .wrapper span:nth-child(7){
    position: absolute;
    top: 97%;
    left: 2%;
    width: 96%;
    height: 0.5%;
    animation: animation1_border02 0.8s ease-in-out 0.5s forwards;
    transform-origin: bottom right;
}
.animation02 .wrapper span:nth-child(8){
    position: absolute;
    top: 3%;
    left: 98%;
    width: 0.325%;
    height: 94.5%;
    animation: animation1_border01 0.8s ease-in-out 0.5s forwards;
    transform-origin: bottom left;
}
.animation02 .lavel{
    position: absolute;
    top: -6%;
    left: -2.5%;
    width: 7%;
    height: 28%;
    background-color: #333;
    opacity: 0;
    animation: animation1_lavel 0.6s ease-in-out 0.8s forwards; 
    transform-origin: top;
}
@keyframes animation1_box {
    0%{
        opacity: 1;
        transform:scale3d(0, 0, 0);
    }
    100%{
        opacity: 1;
        transform:scale3d(1, 1, 1);
    }
}
@keyframes animation1_border01 {
    0%{
        opacity: 1;
        transform:scale3d(1, 0, 0);
    }
    100%{
        opacity: 1;
        transform:scale3d(1, 1, 1);
    }
}
@keyframes animation1_border02 {
    0%{
        opacity: 1;
        transform:scale3d(0, 1, 0);
    }
    100%{
        opacity: 1;
        transform:scale3d(1, 1, 1);
    }
}
@keyframes animation1_lavel {
    0%{
        opacity: 1;
        transform:scale3d(1, 0, 0);
    }
    100%{
        opacity: 1;
        transform:scale3d(1, 1, 1);
    }
}

四つの白い四角形をflexで並べます。transform:scale3d()で最初は0にしておき、見えなくさせておきます。アニメーションが開始すると元の大きさにもどっていきます。

そしてtransform-originで変形が開始される点を決めます。例えばこんな感じ↓

transform-origin: top right;

開始される点は右上からになります。

これをそれぞれ指定していきます。右上・左上・右下・左下と指定していくと良い感じに広がっていきます。

テキスト部分

テキストが次々にでてくるアニメーションの部分↓

コードがこちら↓

<div class="text">
    <h1><span class="font">m</span><span class="font">o</span><span class="font">t</span><span class="font">i</span><span class="font">o</span><span class="font">n</span><span class="font">-</span><span class="font">p</span><span class="font">r</span><span class="font">o</span><span class="font">t</span></h1>
    <p class="copy">
        <span class="font">M</span><span class="font">y</span> <span class="font">P</span><span class="font">o</span><span class="font">r</span><span class="font">t</span><span class="font">f</span><span class="font">o</span><span class="font">l</span><span class="font">i</span><span class="font">o</span> <span class="font">S</span><span class="font">i</span><span class="font">t</span><span class="font">e</span> <span class="font">k</span><span class="font">u</span><span class="font">r</span><span class="font">i</span><span class="font">-</span><span class="font">c</span><span class="font">h</span><span class="font">a</span><span class="font">n</span>
    </p>
    <p class="copy"><span class="font">I</span><span class="font">'</span><span class="font">m</span> <span class="font">a</span> <span class="font">w</span><span class="font">e</span><span class="font">b</span> <span class="font">c</span><span class="font">o</span><span class="font">d</span><span class="font">e</span><span class="font">r</span> <span class="font">w</span><span class="font">h</span><span class="font">o</span> <span class="font">l</span><span class="font">i</span><span class="font">k</span><span class="font">e</span><span class="font">s</span> <span class="font">m</span><span class="font">o</span><span class="font">t</span><span class="font">i</span><span class="font">o</span><span class="font">n</span> <span class="font">a</span><span class="font">n</span><span class="font">d</span> <span class="font">a</span><span class="font">n</span><span class="font">i</span><span class="font">m</span><span class="font">a</span><span class="font">t</span><span class="font">i</span><span class="font">o</span><span class="font">n</span><span class="font">.</span></p>
</div>
/*================= 
animation02 text
==================*/
.animation02 .text{
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.animation02 .text h1{
    margin-bottom: 1.5%;
    color: #333;
    font-family: Roboto, sans-serif;
    font-size: 2.0vw;
}
.animation02 .text .copy:nth-of-type(1){
    margin-bottom: 1%;
    color: #333;
    font-family: Roboto, sans-serif;
    font-size: 3.5vw;
    font-weight: bold;
    letter-spacing: 0.01em;
}
.animation02 .text .copy:nth-of-type(2){
    margin-bottom: 5%;
    color: #333;
    font-family: Roboto, sans-serif;
    font-size: 1.3vw;
    letter-spacing: 0.01em;
}
/*================= 
Roboto Font 
==================*/
@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    src: url('../font/Roboto-Regular.ttf') format('ttf');
    font-display:swap;
}
.font{
    display: inline-block;
    opacity: 0;
    transform-origin: bottom right;
}
.font:nth-child(1){
    animation: font 1.8s ease-in-out 1.3s forwards;
}
.font:nth-child(2){
    animation: font 1.8s ease-in-out 1.35s forwards;
}
.font:nth-child(3){
    animation: font 1.8s ease-in-out 1.4s forwards;
}
.font:nth-child(4){
    animation: font 1.8s ease-in-out 1.45s forwards;
}
.font:nth-child(5){
    animation: font 1.8s ease-in-out 1.5s forwards;
}
.font:nth-child(6){
    animation: font 1.8s ease-in-out 1.55s forwards;
}
.font:nth-child(7){
    animation: font 1.8s ease-in-out 1.6s forwards;
}
.font:nth-child(8){
    animation: font 1.8s ease-in-out 1.65s forwards;
}
.font:nth-child(9){
    animation: font 1.8s ease-in-out 1.7s forwards;
}
.font:nth-child(10){
    animation: font 1.8s ease-in-out 1.75s forwards;
}
.font:nth-child(11){
    animation: font 1.8s ease-in-out 1.8s forwards;
}
.font:nth-child(12){
    animation: font 1.8s ease-in-out 1.85s forwards;
}
.font:nth-child(13){
    animation: font 1.8s ease-in-out 1.9s forwards;
}
.font:nth-child(14){
    animation: font 1.8s ease-in-out 1.95s forwards;
}
.font:nth-child(15){
    animation: font 1.8s ease-in-out 2.0s forwards;
}
.font:nth-child(16){
    animation: font 1.8s ease-in-out 2.05s forwards;
}
.font:nth-child(17){
    animation: font 1.8s ease-in-out 2.1s forwards;
}
.font:nth-child(18){
    animation: font 1.8s ease-in-out 2.15s forwards;
}
.font:nth-child(19){
    animation: font 1.8s ease-in-out 2.2s forwards;
}
.font:nth-child(20){
    animation: font 1.8s ease-in-out 2.25s forwards;
}
.font:nth-child(21){
    animation: font 1.8s ease-in-out 2.3s forwards;
}
.font:nth-child(22){
    animation: font 1.8s ease-in-out 2.35s forwards;
}
.font:nth-child(23){
    animation: font 1.8s ease-in-out 2.4s forwards;
}
.font:nth-child(24){
    animation: font 1.8s ease-in-out 2.45s forwards;
}
.font:nth-child(25){
    animation: font 1.8s ease-in-out 2.5s forwards;
}
.font:nth-child(26){
    animation: font 1.8s ease-in-out 2.55s forwards;
}
.font:nth-child(27){
    animation: font 1.8s ease-in-out 2.6s forwards;
}
.font:nth-child(28){
    animation: font 1.8s ease-in-out 2.65s forwards;
}
.font:nth-child(29){
    animation: font 1.8s ease-in-out 2.7s forwards;
}
.font:nth-child(30){
    animation: font 1.8s ease-in-out 2.75s forwards;
}
.font:nth-child(31){
    animation: font 1.8s ease-in-out 2.8s forwards;
}
.font:nth-child(32){
    animation: font 1.8s ease-in-out 2.85s forwards;
}
.font:nth-child(33){
    animation: font 1.8s ease-in-out 2.9s forwards;
}
.font:nth-child(34){
    animation: font 1.8s ease-in-out 2.95s forwards;
}
.font:nth-child(35){
    animation: font 1.8s ease-in-out 3.0s forwards;
}
.font:nth-child(36){
    animation: font 1.8s ease-in-out 3.05s forwards;
}
.font:nth-child(37){
    animation: font 1.8s ease-in-out 3.1s forwards;
}
.font:nth-child(38){
    animation: font 1.8s ease-in-out 3.15s forwards;
}
.font:nth-child(39){
    animation: font 1.8s ease-in-out 3.2s forwards;
}
@keyframes font {
    0%{
        opacity: 1;
        transform: scale3d(0, 0, 0); 
    }
    50%{
        transform: scale3d(1.1, 1.1,1.5); 
    }
    100%{
        opacity: 1;
        transform: scale3d(1, 1, 1); 
    }
}

かなり煩雑で強引なやり方をしてしまったかもしれません…。文字一つ一つにクラス名をつけてアニメーションさせています。transform: scale3d()で最初は見えなくしておきます。50%の時に少し大きさを調整することで、良い感じのアニメーションになりますね。

WEBフォントを使用しているのでfont-display:swapを書いています。WEBフォントを使用した際の画面のちらつきをおさえてくれます。詳しい内容はこちらをご参照ください↓

hoverした時

次にボタン、SNSアイコンです。

hoverした時↓

コードがこちら↓

<div class="btn_wrapper">
    <div class="btn works" role="button">My Works</div>
    <div class="btn" role="button"><a href="#">My Profile</a></div>
</div>
<div class="sns">
    <div class="blog_btn" role="button"><a href="https://kuri-designtech.com/" target="_blank">My Blog</a></div>
    <div>
        <a href="https://twitter.com/AAA00832745?s=09" target="_blank">
            <svg width="100%" height="100%" viewbox="0 0 24 24">
                <path class="snssvg" d="M0 0v24h24v-24h-24zm18.862 9.237c.208 4.617-3.235 9.765-9.33 9.765-1.854 0-3.579-.543-5.032-1.475 1.742.205 3.48-.278 4.86-1.359-1.437-.027-2.649-.976-3.066-2.28.515.098 1.021.069 1.482-.056-1.579-.317-2.668-1.739-2.633-3.26.442.246.949.394 1.486.411-1.461-.977-1.875-2.907-1.016-4.383 1.619 1.986 4.038 3.293 6.766 3.43-.479-2.053 1.079-4.03 3.198-4.03.944 0 1.797.398 2.396 1.037.748-.147 1.451-.42 2.085-.796-.245.767-.766 1.41-1.443 1.816.664-.08 1.297-.256 1.885-.517-.44.656-.997 1.234-1.638 1.697z"/>
            </svg>
        </a>
    </div>
    <div>
        <a href="https://www.instagram.com/kurita.hisami/" target="_blank">
            <svg width="100%" height="100%" viewbox="0 0 24 24">
                <path class="snssvg" d="M18 6.615v1.45c0 .34-.275.616-.616.616h-1.449c-.341 0-.615-.276-.615-.616v-1.45c0-.34.274-.615.615-.615h1.449c.341 0 .616.275.616.615zm-1.131 4.699c.033.225.054.453.054.686 0 2.72-2.204 4.923-4.922 4.923s-4.923-2.204-4.923-4.923c0-.233.021-.461.054-.686.031-.221.075-.437.134-.647h-1.266v6.719c0 .339.275.614.616.614h10.769c.34 0 .615-.275.615-.615v-6.719h-1.265c.058.211.102.427.134.648zm-4.869 3.763c1.699 0 3.078-1.378 3.078-3.077s-1.379-3.077-3.078-3.077-3.077 1.377-3.077 3.077 1.378 3.077 3.077 3.077zm12-15.077v24h-24v-24h24zm-4 5.846c0-1.019-.826-1.846-1.846-1.846h-12.308c-1.019 0-1.846.827-1.846 1.846v12.307c0 1.02.827 1.847 1.846 1.847h12.309c1.019 0 1.845-.827 1.845-1.847v-12.307z"/>
            </svg>
        </a>    
    </div>  
</div>
/*================= 
animation02 btn
==================*/
.animation02 .text .btn_wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 -1.3% 4.2% 0;
}
.animation02 .text .btn_wrapper .btn{
    position: relative;
    background: #333;
    font-size: 1.2vw;
    font-family: Roboto, sans-serif;
    letter-spacing: 0.01em;
    opacity: 0;
}
.animation02 .text .btn_wrapper .btn a{
    display: block;
    padding: 0.7vw 5.0vw;
    color: #fff;
    text-decoration: none;
}
.animation02 .text .btn_wrapper .btn.works{
    display: block;
    padding: 0.7vw 5.0vw;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.animation02 .text .btn_wrapper .btn:nth-of-type(1){
    margin: 0 6.0% 0 0;
    animation: animation02_btn01 1s ease-out 2.5s forwards;
}
.animation02 .text .btn_wrapper .btn:nth-of-type(2){
    animation: animation02_btn02 1s ease-out 2.5s forwards;
}
@keyframes animation02_btn01 {
    0%{
        opacity: 0;
        transform: translate3d(-25%, 0, 0)
    }
    100%{
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}
@keyframes animation02_btn02 {
    0%{
        opacity: 0;
        transform: translate3d(25%, 0, 0)
    }
    100%{
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}
.animation02 .text .btn_wrapper .btn:nth-of-type(1):before{
    position: absolute;
    top: 50%;
    left: -10%;
    width: 1.5vw;
    height: 0.15vw;
    background-color: #333;
    content: '';
    z-index: 999;
    transition: 0.6s cubic-bezier(.215,.61,.355,1);
    transform-origin: left;
}
.animation02 .text .btn_wrapper .btn:nth-of-type(2):before{
    position: absolute;
    top: 50%;
    left: -9%;
    width: 1.5vw;
    height: 0.15vw;
    background-color: #333;
    content: '';
    z-index: 999;
    transition: 0.6s cubic-bezier(.215,.61,.355,1);
    transform-origin: left;
}
.animation02 .text .btn_wrapper .btn:nth-of-type(1):after{
    position: absolute;
    top: 50%;
    left: 0%;
    width: 13.0vw;
    height: 0.12vw;
    background-color: #fff;
    content: '';
    transform: scale(0.1,1); 
    transition: 0.6s cubic-bezier(.215,.61,.355,1);
    transform-origin: left;
}
.animation02 .text .btn_wrapper .btn:nth-of-type(2):after{
    position: absolute;
    top: 50%;
    left: 0%;
    width: 14.0vw;
    height: 0.12vw;
    background-color: #fff;
    content: '';
    transform: scale(0.1,1); 
    transition: 0.6s cubic-bezier(.215,.61,.355,1);
    transform-origin: left;
}
.animation02 .text .btn_wrapper .btn:hover{
    overflow: hidden;
}
.animation02 .text .btn_wrapper .btn:nth-of-type(1):hover:after{
    transform: scale(1.075,1);
}
.animation02 .text .btn_wrapper .btn:hover:after{
    transform: scale(1,1);
}
.animation02 .text .btn_wrapper .btn:nth-of-type(1):hover:before{
    transform: translateX(1.35vw);
}
.animation02 .text .btn_wrapper .btn:nth-of-type(2):hover:before{
    transform: translateX(1.35vw);
}
/*================= 
animation02 sns
==================*/
.animation02 .text .sns{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 3%;
}
.animation02 .text .sns div{
    width: 3vw;
    height: 3vw;
    opacity: 0;
}
.animation02 .text .sns div:nth-of-type(2){
    margin: 0 3% 0 0;
    animation: animation02_sns 1s ease-out 2.8s forwards;
}
.animation02 .text .sns div:nth-of-type(3){
    animation: animation02_sns 1s ease-out 2.8s forwards;
}
@keyframes animation02_sns {
    0%{
        opacity: 0;
        transform: translate3d(35%, 0, 0)
    }
    100%{
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}
path {
    fill: #333;
    stroke: transparent;
}
svg:hover path {
-webkit-animation: stroke 2.5s ease-in-out forwards; 
animation: stroke 2.5s ease-in-out forwards; 
stroke: #333;
stroke-dasharray: 1800;
stroke-dashoffset: 0;
stroke-width: 1;
}
@keyframes stroke {
0% {
    fill: #333;
    stroke-dashoffset: 1800;
}
10% {
    fill: transparent;
}
80% {
    fill: transparent;
}
100% {
    fill: #fff;
    stroke-dashoffset: 0;
}
}
.blog_btn{
    position: relative;
    width: auto!important;
    height: auto!important;
    margin: 0 4.5% 0 0;
    background: #333;
    font-size: 1.2vw;
    font-family: Roboto, sans-serif;
    letter-spacing: 0.01em;
    opacity: 0!important;
}
.blog_btn a{
    display: block;
    padding: 0.7vw 5.0vw;
    color: #fff;
    text-decoration: none;
}
.blog_btn{
    animation: blog_btn 1s ease-out 2.5s forwards;
}
@keyframes blog_btn {
    0%{
        opacity: 0;
        transform: translate3d(-25%, 0, 0)
    }
    100%{
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}
.blog_btn:before{
    position: absolute;
    top: 50%;
    left: -9%;
    width: 1.5vw;
    height: 0.15vw;
    background-color: #333;
    content: '';
    z-index: 999;
    transition: 0.6s cubic-bezier(.215,.61,.355,1);
    transform-origin: left;
}
.blog_btn:after{
    position: absolute;
    top: 50%;
    left: 0%;
    width: 13.0vw;
    height: 0.12vw;
    background-color: #fff;
    content: '';
    transform: scale(0.1,1); 
    transition: 0.6s cubic-bezier(.215,.61,.355,1);
    transform-origin: left;
}
.blog_btn:hover{
    overflow: hidden;
}
.blog_btn:hover:after{
    transform: scale(1,1);
}
.blog_btn:hover:before{
    transform: translateX(1.35vw);
}

ボタン部分はhoverした時に、疑似要素でおいておいた線を伸ばします。SNSアイコンはhoverした時にSVGアニメーションでアウトラインを書き換えています。けっこう簡単にできるので、おすすめのアニメーションです。

My worksをクリックした時

My worksボタンをクリックした時カードとテキストが消えます↓

コードがこちら↓

<!-- Myworks_clickevent_hidden -->
<div class="animation_hidden">
    <!-- background -->
    <div class="bg">
        <span></span>
        <span></span>
    </div>
    <!-- animation02 -->
    <div class="animation02">
        <div class="wrapper">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="lavel"></div>
        <div class="text">
            <h1><span class="font">m</span><span class="font">o</span><span class="font">t</span><span class="font">i</span><span class="font">o</span><span class="font">n</span><span class="font">-</span><span class="font">p</span><span class="font">r</span><span class="font">o</span><span class="font">t</span></h1>
            <p class="copy">
                <span class="font">M</span><span class="font">y</span> <span class="font">P</span><span class="font">o</span><span class="font">r</span><span class="font">t</span><span class="font">f</span><span class="font">o</span><span class="font">l</span><span class="font">i</span><span class="font">o</span> <span class="font">S</span><span class="font">i</span><span class="font">t</span><span class="font">e</span> <span class="font">k</span><span class="font">u</span><span class="font">r</span><span class="font">i</span><span class="font">-</span><span class="font">c</span><span class="font">h</span><span class="font">a</span><span class="font">n</span>
            </p>
            <p class="copy"><span class="font">I</span><span class="font">'</span><span class="font">m</span> <span class="font">a</span> <span class="font">w</span><span class="font">e</span><span class="font">b</span> <span class="font">c</span><span class="font">o</span><span class="font">d</span><span class="font">e</span><span class="font">r</span> <span class="font">w</span><span class="font">h</span><span class="font">o</span> <span class="font">l</span><span class="font">i</span><span class="font">k</span><span class="font">e</span><span class="font">s</span> <span class="font">m</span><span class="font">o</span><span class="font">t</span><span class="font">i</span><span class="font">o</span><span class="font">n</span> <span class="font">a</span><span class="font">n</span><span class="font">d</span> <span class="font">a</span><span class="font">n</span><span class="font">i</span><span class="font">m</span><span class="font">a</span><span class="font">t</span><span class="font">i</span><span class="font">o</span><span class="font">n</span><span class="font">.</span></p>
            <div class="btn_wrapper">
                <div class="btn works" role="button">My Works</div>
                <div class="btn" role="button"><a href="#">My Profile</a></div>
            </div>
            <div class="sns">
                <div class="blog_btn" role="button"><a href="https://kuri-designtech.com/" target="_blank">My Blog</a></div>
                <div>
                    <a href="https://twitter.com/AAA00832745?s=09" target="_blank">
                        <svg width="100%" height="100%" viewbox="0 0 24 24">
                            <path class="snssvg" d="M0 0v24h24v-24h-24zm18.862 9.237c.208 4.617-3.235 9.765-9.33 9.765-1.854 0-3.579-.543-5.032-1.475 1.742.205 3.48-.278 4.86-1.359-1.437-.027-2.649-.976-3.066-2.28.515.098 1.021.069 1.482-.056-1.579-.317-2.668-1.739-2.633-3.26.442.246.949.394 1.486.411-1.461-.977-1.875-2.907-1.016-4.383 1.619 1.986 4.038 3.293 6.766 3.43-.479-2.053 1.079-4.03 3.198-4.03.944 0 1.797.398 2.396 1.037.748-.147 1.451-.42 2.085-.796-.245.767-.766 1.41-1.443 1.816.664-.08 1.297-.256 1.885-.517-.44.656-.997 1.234-1.638 1.697z"/>
                        </svg>
                    </a>
                </div>
                <div>
                    <a href="https://www.instagram.com/kurita.hisami/" target="_blank">
                        <svg width="100%" height="100%" viewbox="0 0 24 24">
                            <path class="snssvg" d="M18 6.615v1.45c0 .34-.275.616-.616.616h-1.449c-.341 0-.615-.276-.615-.616v-1.45c0-.34.274-.615.615-.615h1.449c.341 0 .616.275.616.615zm-1.131 4.699c.033.225.054.453.054.686 0 2.72-2.204 4.923-4.922 4.923s-4.923-2.204-4.923-4.923c0-.233.021-.461.054-.686.031-.221.075-.437.134-.647h-1.266v6.719c0 .339.275.614.616.614h10.769c.34 0 .615-.275.615-.615v-6.719h-1.265c.058.211.102.427.134.648zm-4.869 3.763c1.699 0 3.078-1.378 3.078-3.077s-1.379-3.077-3.078-3.077-3.077 1.377-3.077 3.077 1.378 3.077 3.077 3.077zm12-15.077v24h-24v-24h24zm-4 5.846c0-1.019-.826-1.846-1.846-1.846h-12.308c-1.019 0-1.846.827-1.846 1.846v12.307c0 1.02.827 1.847 1.846 1.847h12.309c1.019 0 1.845-.827 1.845-1.847v-12.307z"/>
                        </svg>
                    </a>    
                </div>  
            </div>
        </div>
        <h2><span class="font">N</span><span class="font">o</span> <span class="font">c</span><span class="font">r</span><span class="font">e</span><span class="font">a</span><span class="font">t</span><span class="font">i</span><span class="font">n</span><span class="font">g</span> <span class="font">w</span><span class="font">e</span><span class="font">b</span><span class="font">,</span> <span class="font">N</span><span class="font">O</span> <span class="font">L</span><span class="font">I</span><span class="font">F</span><span class="font">E</span><span class="font">!</span></h2>
    </div>
</div>
/*===========================================================
Myworks clickevent hidden-animation
===========================================================*/
/*================= 
background
==================*/
.animation_hidden{
    position: relative;
    width: 100%;
    height: 100%;
}
.animation_hidden.active:before{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0;
    z-index: 1;
    content: '';
    animation: animation_bg_hidden 1.0s ease-out 2s forwards;
    transform-origin: center;
}
@keyframes animation_bg_hidden{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
/*================= 
animation02 bg
==================*/
.active .animation02 .wrapper div{
    opacity: 1;
}
.active .animation02 .wrapper div:nth-child(1){
    animation: animation1box_hidden 1.8s ease-in-out 0.5s forwards;
}
.active .animation02 .wrapper div:nth-child(2){
    animation: animation1box_hidden 1.8s ease-in-out 0.5s forwards;
}
.active .animation02 .wrapper div:nth-child(3){
    animation: animation1box_hidden 1.8s ease-in-out 0.5s forwards;
}
.active .animation02 .wrapper div:nth-child(4){
    animation: animation1box_hidden 1.8s ease-in-out 0.5s forwards;
}
@keyframes animation1box_hidden {
    0%{
        opacity: 1;
        transform:scale3d(1, 1, 1);
    }
    100%{
        opacity: 0;
        transform:scale3d(0, 0, 0);
    }
}
.active .animation02 .wrapper span{
    opacity: 1;
}
.active .animation02 .wrapper span:nth-child(5){
    animation: animation1_border02_hidden 1.3s ease-in-out 0.5s forwards;
}
.active .animation02 .wrapper span:nth-child(6){
    animation: animation1_border01_hidden 1.3s ease-in-out 0.5s forwards;
}
.active .animation02 .wrapper span:nth-child(7){
    animation: animation1_border02_hidden 1.3s ease-in-out 0.5s forwards;
}
.active .animation02 .wrapper span:nth-child(8){
    animation: animation1_border01_hidden 1.3s ease-in-out 0.5s forwards;
}
@keyframes animation1_border01_hidden {
    0%{
        opacity: 1;
        transform:scale3d(1, 1, 1);
    }
    100%{
        opacity: 0;
        transform:scale3d(1, 0, 0);
    }
}
@keyframes animation1_border02_hidden {
    0%{
        opacity: 1;
        transform:scale3d(1, 1, 1);
    }
    100%{
        opacity: 0;
        transform:scale3d(0, 1, 0);
    }
}
.active .animation02 .lavel{
    opacity: 1;
    animation: animation1_lavel_hidden 0.6s ease-in-out 0.8s forwards; 
}
@keyframes animation1_lavel_hidden {
    0%{
        opacity: 1;
        transform:scale3d(1, 1, 1);
    }
    100%{
        opacity: 0;
        transform:scale3d(1, 0, 0);
    }
}
/*================= 
Roboto Font 
==================*/
.active .font{
    opacity: 1;
}
.active .font:nth-child(1){
    animation: font_hidden 1.8s ease-in-out forwards;
}
.active .font:nth-child(2){
    animation: font_hidden 1.8s ease-in-out .05s forwards;
}
.active .font:nth-child(3){
    animation: font_hidden 1.8s ease-in-out .10s forwards;
}
.active .font:nth-child(4){
    animation: font_hidden 1.8s ease-in-out .15s forwards;
}
.active .font:nth-child(5){
    animation: font_hidden 1.8s ease-in-out .20s forwards;
}
.active .font:nth-child(6){
    animation: font_hidden 1.8s ease-in-out .25s forwards;
}
.active .font:nth-child(7){
    animation: font_hidden 1.8s ease-in-out .30s forwards;
}
.active .font:nth-child(8){
    animation: font_hidden 1.8s ease-in-out .35s forwards;
}
.active .font:nth-child(9){
    animation: font_hidden 1.8s ease-in-out .40s forwards;
}
.active .font:nth-child(10){
    animation: font_hidden 1.8s ease-in-out .45s forwards;
}
.active .font:nth-child(11){
    animation: font_hidden 1.8s ease-in-out .50s forwards;
}
.active .font:nth-child(12){
    animation: font_hidden 1.8s ease-in-out .55s forwards;
}
.active .font:nth-child(13){
    animation: font_hidden 1.8s ease-in-out .60s forwards;
}
.active .font:nth-child(14){
    animation: font_hidden 1.8s ease-in-out .65s forwards;
}
.active .font:nth-child(15){
    animation: font_hidden 1.8s ease-in-out .70s forwards;
}
.active .font:nth-child(16){
    animation: font_hidden 1.8s ease-in-out .75s forwards;
}
.active .font:nth-child(17){
    animation: font_hidden 1.8s ease-in-out .80s forwards;
}
.active .font:nth-child(18){
    animation: font_hidden 1.8s ease-in-out .85s forwards;
}
.active .font:nth-child(19){
    animation: font_hidden 1.8s ease-in-out .90s forwards;
}
.active .font:nth-child(20){
    animation: font_hidden 1.8s ease-in-out .95s forwards;
}
.active .font:nth-child(21){
    animation: font_hidden 1.8s ease-in-out 1.0s forwards;
}
.active .font:nth-child(22){
    animation: font_hidden 1.8s ease-in-out 1.05s forwards;
}
.active .font:nth-child(23){
    animation: font_hidden 1.8s ease-in-out 1.10s forwards;
}
.active .font:nth-child(24){
    animation: font_hidden 1.8s ease-in-out 1.15s forwards;
}
.active .font:nth-child(25){
    animation: font_hidden 1.8s ease-in-out 1.20s forwards;
}
.active .font:nth-child(26){
    animation: font_hidden 1.8s ease-in-out 1.25s forwards;
}
.active .font:nth-child(27){
    animation: font_hidden 1.8s ease-in-out 1.30s forwards;
}
.active .font:nth-child(28){
    animation: font_hidden 1.8s ease-in-out 1.35s forwards;
}
.active .font:nth-child(29){
    animation: font_hidden 1.8s ease-in-out 1.40s forwards;
}
.active .font:nth-child(30){
    animation: font_hidden 1.8s ease-in-out 1.45s forwards;
}
.active .font:nth-child(31){
    animation: font_hidden 1.8s ease-in-out 1.50s forwards;
}
.active .font:nth-child(32){
    animation: font_hidden 1.8s ease-in-out 1.55s forwards;
}
.active .font:nth-child(33){
    animation: font_hidden 1.8s ease-in-out 1.60s forwards;
}
.active .font:nth-child(34){
    animation: font_hidden 1.8s ease-in-out 1.65s forwards;
}
.active .font:nth-child(35){
    animation: font_hidden 1.8s ease-in-out 1.70s forwards;
}
.active .font:nth-child(36){
    animation: font_hidden 1.8s ease-in-out 1.75s forwards;
}
.active .font:nth-child(37){
    animation: font_hidden 1.8s ease-in-out 1.80s forwards;
}
.active .font:nth-child(38){
    animation: font_hidden 1.8s ease-in-out 1.85s forwards;
}
.active .font:nth-child(39){
    animation: font_hidden 1.8s ease-in-out 1.90s forwards;
}
@keyframes font_hidden {
    0%{
        opacity: 1;
        transform: scale3d(1, 1, 1); 
    }
    100%{
        opacity: 0;
        transform: scale3d(0, 0, 0); 
    }
}
/*================= 
animation02 btn
==================*/
.active .animation02 .text .btn_wrapper .btn:nth-of-type(1){
    animation: btn01_hidden 1.5s ease-out forwards;
}
.active .animation02 .text .btn_wrapper .btn:nth-of-type(2){
    animation: btn02_hidden 1.5s ease-out forwards;
}
.active .blog_btn{
    animation: btn01_hidden 1.5s ease-out forwards!important;
}
@keyframes btn01_hidden {
    0%{
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
    100%{
        opacity: 0;
        transform: translate3d(-25%, 0, 0)
    }
}
@keyframes btn02_hidden {
    0%{
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
    100%{
        opacity: 0;
        transform: translate3d(25%, 0, 0)
    }
}
/*================= 
animation02 sns
==================*/
.active .animation02 .text .sns div{
    animation: sns01_hidden 1.5s ease-out forwards; 
}
@keyframes sns01_hidden {
    0%{
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    100%{
        opacity: 0;
        transform: translate3d(55%, 0, 0);
    }
}
//MyWorksクリック時の処理
document.querySelector('.works').addEventListener('click', () => {
    const works = document.querySelector('.animation_hidden');
    works.classList.add('active')
});

コードが長くてすいません。でもこの部分は簡単ですね。.worksをクリックした時に全体のアニメーションを最初に状態にもどしています。JavaScriptの部分はアロー関数を使っているのでIEで動かないです…(後から気づいた)ここはなおさないとですね。

まとめ

とりあえず、今のところはこんな感じでしょうか。

cssanimationをたくさん使っているので、どうしてもコードが煩雑になってしまいますね。JavaScriptを使えばもっときれいに書けるのかな。

あとやらないといけないのは、レスポンシブにすること、アロー関数を書き換えること、プロフィールページとワークスページの完成させることですね。

では、また来週~。

コメント

タイトルとURLをコピーしました