Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

シンプルなRailsアプリケーションに一匙加えるちょい足しアニメーションレシピ

Yu Ishihara
December 09, 2018

 シンプルなRailsアプリケーションに一匙加えるちょい足しアニメーションレシピ

Rails Developers Meetup 2018 Day4 ( https://techplay.jp/event/702297 ) 発表資料

Yu Ishihara

December 09, 2018
Tweet

More Decks by Yu Ishihara

Other Decks in Design

Transcript

  1. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ #PVODF͸DVCJDCFTJFSͰ͸࣮ݱͰ͖ͳ͍Έ͍ͨͰ͢ // from: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_timing-functions.scss // EASE IN $ease-in-quad: cubic-bezier(0.550,

    0.085, 0.680, 0.530); $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); // EASE OUT $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); // EASE IN OUT $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); // ͬͪ͜͸ͦΕͬΆ͍ಈ͖ͳ͚ͩ // (similar elastic). $ease-out-elastic: cubic-bezier(0.370, 1.650, 0.410, 0.780); $ease-in-elastic: cubic-bezier(0.370, 0.650, 0.410, -0.780);
  2. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 σβΠϯଆͷελΠϧ ݟӫ͑Λม͚͑ͨΕ͹ͪ͜ΒΛมߋ @mixin button-base { $c: #82ccdd; $t: .2rem;

    display: inline-block; position: relative; cursor: pointer; text-align: center; box-sizing: border-box; border: none; outline: none; margin: 0; padding: .5rem 2rem; border-radius: 4rem; transform: translateY(-$t); background-color: $c; color: #fff; box-shadow: 0 $t 0 darken($c, 5%); &:hover { color: #fff; text-decoration: none; transform: translateY(0); box-shadow: 0 0 0 $c; background-color: darken($c, 2%); } } @mixin font($size: 1rem, $line-height: normal, $weight: 400) { font-family: YuGothic, 'ᕟΰγοΫ', sans-serif; font-size: $size; font-weight: $weight; line-height: $line-height; }
  3. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 Ξχϝʔγϣϯ෦෼ @keyframes anim-shake { $m: .3rem; 0% { transform:

    translate(0, 0) rotate(0deg); } 25% { transform: translate(-$m, 0) rotate(0deg); } 50% { transform: translate(0, 0) rotate(0deg); } 75% { transform: translate($m, 0) rotate(0deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .input { @include input-base; @include font(.9375rem); &.is-action { $c: $color-red; animation: anim-shake .2s linear 4; border-color: $c; &:focus { border-color: $c; } } }
  4. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 σβΠϯଆͷελΠϧ ݟӫ͑Λม͚͑ͨΕ͹ͪ͜ΒΛมߋ @mixin input-base { $c: #82ccdd; display: inline-block;

    box-sizing: border-box; appearance: none; border: none; outline: none; text-decoration: none; line-height: 1 !important; background-image: none; margin: 0; padding: .6rem .8rem; border: 1px solid #eee; border-radius: .2rem; width: 100%; background-color: #fff; &:focus { border: 1px solid $c; outline: none; } &::placeholder { font-size: inherit; color: #ddd; } }
  5. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 $44͚ͩͰ΋Ҋ֎؆୯ʹௐ੔͢Δࣄ͕ՄೳͰ͢ .field { label { + br { display:

    none; } } input[type=checkbox] { + label { display: inline-block; } } i { + br { display: none; } } } .field_with_errors { i { display: block; } + em { display: inline-block; } + br { display: none; } }
  6. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ͋ͱ͸ࡉ͔͍ௐ੔ΛೖΕ͓͍ͯͨΒʜʢޙͰHJUIVCʹΞοϓ͓͖ͯ͠·͢ʜʣ .field { margin-top: 1rem; label { padding-bottom: .2rem;

    display: block; + br { display: none; } } input[type=text], input[type=email], input[type=password] { @extend .input; } input[type=checkbox] { margin-right: .2rem; cursor: pointer; + label { display: inline-block; cursor: pointer; } } em { @include font(.875rem); } i { @include font(.875rem); padding-bottom: .4rem; display: block; + br { display: none; } } } .field_with_errors { $c: $color-red; label { color: $c; margin-bottom: 0; } i { @include font(.875rem); font-style: normal; color: $color-red; padding-bottom: .4rem; display: block; &::before { @include fa('\f071'); margin-right: .4rem; } } + em { display: inline-block; margin-bottom: .5rem; } + br { display: none; } } #error_explanation { $c: $color-red; background-color: lighten($c, 30%); border-bottom: 1px solid lighten($c, 28%); color: $c; margin-top: 1rem; padding: .5rem 1rem; h2 { @include font(.875rem, 1.2rem, bold); margin: 0; } ul { margin: .1rem 0 0 1.5rem; padding: 0; li { @include font(.9375rem); margin-top: .3rem; } } } .actions { margin-top: 1rem; text-align: center; input { @extend .button; width: 100%; } }
  7. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 Ξχϝʔγϣϯͷ෦෼ @keyframes anim-notice { 0% { transform: translateY(-100%); opacity:

    0; animation-timing-function: ease-out; } 20% { transform: translateY(0%); opacity: 1; } 80% { transform: translateY(0%); opacity: 1; animation-timing-function: ease-in; } 100% { transform: translateY(-100%); opacity: 0; } } .notice { @include font; @include notice-base; animation: anim-notice 3s; }
  8. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 σβΠϯͷ෦෼ @mixin notice-base($c: #82ccdd) { display: block; margin: 0;

    padding: 1rem; position: fixed; width: 300px; top: 1rem; left: calc(50% - 150px); text-align: center; background-color: lighten($c, 25%); border-bottom: 1px solid lighten($c, 28%); color: $c; transform: translateY(-100%); opacity: 0; box-shadow: 0 5px 10px rgba(darken($c, 30%), .1); border-radius: .4rem; &:empty { display: none; } }