diff --git a/assets/css/components/_header-noun-scroll.scss b/assets/css/components/_header-noun-scroll.scss new file mode 100644 index 0000000..f94657c --- /dev/null +++ b/assets/css/components/_header-noun-scroll.scss @@ -0,0 +1,44 @@ +.header-noun-scroll > span { + position: absolute; + top: 0; +} + +.header-noun-scroll__wrapper { + display: inline-block; + position: relative; + left: 4rem; + height: 2.5rem; + overflow: hidden; +} + +.header-noun-scroll__list { + display: inline-block; + transition: 300ms all; + margin-top: 0; + animation: slide 10s infinite alternate $easing--bezier-sharp 2s; +} + +.header-noun-scroll__list span { + display: block; + padding-bottom: 0.25rem; +} +@keyframes slide { + 0% { + margin-top: 0; + } + 20% { + margin-top: calc(-1 * 2.5rem); + } + 40% { + margin-top: calc(-2 * 2.5rem); + } + 60% { + margin-top: calc(-3 * 2.5rem); + } + 80% { + margin-top: calc(-4 * 2.5rem); + } + 100% { + margin-top: calc(-5 * 2.5rem); + } +} diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 822973f..5eecdde 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -50,7 +50,7 @@ height: 100%; } - &.nav--open .nav__header-noun { + &.nav--open .header-noun-scroll { opacity: 0; } @@ -66,7 +66,7 @@ } } - .nav__header-noun { + .header-noun-scroll { position: absolute; display: none; padding-left: 0.5rem; @@ -134,7 +134,7 @@ // page specific styles .p-home { - .nav__header-noun { + .header-noun-scroll { display: inline; } } diff --git a/assets/css/style.scss b/assets/css/style.scss index 75e18bb..0454506 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -9,6 +9,7 @@ @import "components/pagination"; @import "components/footer"; @import "components/page"; +@import "components/header-noun-scroll"; @import "pages/home"; @import "pages/post-page"; diff --git a/includes/header-noun-scroll.html b/includes/header-noun-scroll.html new file mode 100644 index 0000000..89b6364 --- /dev/null +++ b/includes/header-noun-scroll.html @@ -0,0 +1,13 @@ +is a +
+
+ Shop + Gallery + Archive + Institute + Company + Project + Group +
+
+
\ No newline at end of file diff --git a/includes/navigation.html b/includes/navigation.html index 27e2b19..302e1e5 100644 --- a/includes/navigation.html +++ b/includes/navigation.html @@ -3,7 +3,7 @@