diff options
| author | “Ryder <“r@okfoc.us”> | 2016-03-29 14:04:27 -0400 |
|---|---|---|
| committer | “Ryder <“r@okfoc.us”> | 2016-03-29 14:04:27 -0400 |
| commit | 722484ef71b0298671fdc66e8985fc5c531f5907 (patch) | |
| tree | f687c47bb56ff6cd107ed8a3c0d98804fb5cd388 | |
| parent | 5752a598c5139ac410efae1c67d429e2dd4bb3b8 (diff) | |
slick icon animation
| -rw-r--r-- | public/assets/ok.css | 36 | ||||
| -rw-r--r-- | templates/index.liquid | 2 |
2 files changed, 37 insertions, 1 deletions
diff --git a/public/assets/ok.css b/public/assets/ok.css index c232883..6fc82e4 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -175,8 +175,44 @@ h3 { /*opacity:0.5;*/ background: black; } +nav svg g g rect { + transition:150ms all 50ms; + width: 100px; +} + + +nav svg g g:first-child rect{ + transform: rotate(0deg); + transform-origin: center; +} + +nav svg g g:nth-child(2) rect{ + opacity:1; +} + +nav svg g g:last-child rect{ + transform: rotate(0deg); + transform-origin: center; +} + +.navopen nav svg g g:first-child rect{ + transform: rotate(45deg); + transform-origin: center; + width: 100px; +} + +.navopen nav svg g g:nth-child(2) rect{ + opacity:0; +} + +.navopen nav svg g g:last-child rect{ + transform: rotate(-45deg); + transform-origin: center; + width: 100px; +} + .navopen .item > * { opacity: 0.1; transition: 150ms opacity cubic-bezier(0, 0, 0, 1); diff --git a/templates/index.liquid b/templates/index.liquid index 9a46c9d..4777239 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -59,7 +59,7 @@ <div>e.g.<b class="slide-no">1</b> OF <b>3</b> • PG.<b class="page-no">1</b></div> </span> </nav> - <div class="item cover intro"> + <div class="item cover intro hidden"> <div class="left"> <h1> OKFocus Portfolio |