scrollTrigger
Signed-off-by: Jeff <jeff@gotenzing.com>
Showing
8 changed files
with
4 additions
and
83 deletions
| ... | @@ -15533,47 +15533,4 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { | ... | @@ -15533,47 +15533,4 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { |
| 15533 | justify-content: center; | 15533 | justify-content: center; |
| 15534 | } | 15534 | } |
| 15535 | 15535 | ||
| 15536 | .c-header_title_liner { | ||
| 15537 | display: block; | ||
| 15538 | opacity: 0; | ||
| 15539 | transform-origin: center top; | ||
| 15540 | transform-style: preserve-3d; | ||
| 15541 | transform: translateY(100%) rotateX(-80deg); | ||
| 15542 | transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0s cubic-bezier(0.215, 0.61, 0.355, 1); | ||
| 15543 | } | ||
| 15544 | html.is-ready .c-header_title_liner { | ||
| 15545 | transform: none; | ||
| 15546 | opacity: 1; | ||
| 15547 | transition-duration: 0.8s; | ||
| 15548 | } | ||
| 15549 | html.is-ready .c-header_title_liner:nth-child(1) { | ||
| 15550 | transition-delay: 0.1s; | ||
| 15551 | } | ||
| 15552 | html.is-ready .c-header_title_liner:nth-child(2) { | ||
| 15553 | transition-delay: 0.2s; | ||
| 15554 | } | ||
| 15555 | html.is-ready .c-header_title_liner:nth-child(3) { | ||
| 15556 | transition-delay: 0.3s; | ||
| 15557 | } | ||
| 15558 | html.is-ready .c-header_title_liner:nth-child(4) { | ||
| 15559 | transition-delay: 0.4s; | ||
| 15560 | } | ||
| 15561 | .c-header_title_liner span { | ||
| 15562 | display: inline-block; | ||
| 15563 | } | ||
| 15564 | .c-header_title_liner.-version { | ||
| 15565 | text-transform: none; | ||
| 15566 | font-size: 0; | ||
| 15567 | } | ||
| 15568 | |||
| 15569 | .line { | ||
| 15570 | width: 100%; | ||
| 15571 | max-width: 800px; | ||
| 15572 | height: 8px; | ||
| 15573 | margin: 0 0 10px 0; | ||
| 15574 | position: relative; | ||
| 15575 | display: inline-block; | ||
| 15576 | background-color: rgb(255, 255, 255); | ||
| 15577 | } | ||
| 15578 | |||
| 15579 | /*# sourceMappingURL=child-theme.css.map */ | 15536 | /*# sourceMappingURL=child-theme.css.map */ |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
| ... | @@ -14,6 +14,10 @@ document.addEventListener("DOMContentLoaded", function() { | ... | @@ -14,6 +14,10 @@ document.addEventListener("DOMContentLoaded", function() { |
| 14 | } | 14 | } |
| 15 | }); | 15 | }); |
| 16 | }); | 16 | }); |
| 17 | |||
| 18 | |||
| 19 | |||
| 20 | |||
| 17 | gsap.registerPlugin(ScrollTrigger); | 21 | gsap.registerPlugin(ScrollTrigger); |
| 18 | 22 | ||
| 19 | // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll | 23 | // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll | ... | ... |
| ... | @@ -147,43 +147,3 @@ | ... | @@ -147,43 +147,3 @@ |
| 147 | } | 147 | } |
| 148 | 148 | ||
| 149 | 149 | ||
| 150 | .c-header_title_liner { | ||
| 151 | display: block; | ||
| 152 | opacity: 0; | ||
| 153 | transform-origin: center top; | ||
| 154 | transform-style: preserve-3d; | ||
| 155 | transform: translateY(100%) rotateX(-80deg); | ||
| 156 | transition: opacity 0s cubic-bezier(0.215, 0.610, 0.355, 1.000), transform 0s cubic-bezier(0.215, 0.610, 0.355, 1.000); | ||
| 157 | |||
| 158 | html.is-ready & { | ||
| 159 | transform: none; | ||
| 160 | opacity: 1; | ||
| 161 | transition-duration: 0.8s; | ||
| 162 | |||
| 163 | @for $i from 1 through 4 { | ||
| 164 | &:nth-child(#{$i}){ | ||
| 165 | transition-delay: $i*0.1s; | ||
| 166 | } | ||
| 167 | } | ||
| 168 | } | ||
| 169 | |||
| 170 | span { | ||
| 171 | display: inline-block; | ||
| 172 | } | ||
| 173 | |||
| 174 | &.-version { | ||
| 175 | text-transform: none; | ||
| 176 | font-size: 0; | ||
| 177 | } | ||
| 178 | } | ||
| 179 | |||
| 180 | |||
| 181 | .line { | ||
| 182 | width: 100%; | ||
| 183 | max-width: 800px; | ||
| 184 | height: 8px; | ||
| 185 | margin: 0 0 10px 0; | ||
| 186 | position: relative; | ||
| 187 | display: inline-block; | ||
| 188 | background-color: rgba(255,255,255,1); | ||
| 189 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or sign in to post a comment