Skip to content

Tenzing / Tenzing-Web-2023

Go to a project
Toggle navigation
Toggle navigation pinning
23cbefe0 by Jeff Balicki
Options

wall 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 040c63f8
Inline Side-by-side
Showing 13 changed files with 48 additions and 135 deletions
...@@ -10,12 +10,7 @@ ...@@ -10,12 +10,7 @@
10 */ 10 */
11 11
12 ?> 12 ?>
13 <button class="toggle" id="direction-toggle"> 13
14 <span>Toggle scroll axis</span>
15 <svg aria-hidden="true" viewBox="0 0 512 512" width="100" title="arrows-alt-h">
16 <path d="M377.941 169.941V216H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296h243.882v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.568 0-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971 16.97z" />
17 </svg>
18 </button>
19 <?php if( have_rows('wall') ): ?> 14 <?php if( have_rows('wall') ): ?>
20 <?php $rowCount = count( get_field('wall') ); 15 <?php $rowCount = count( get_field('wall') );
21 $dir = get_field('direction'); 16 $dir = get_field('direction');
......
...@@ -15959,6 +15959,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -15959,6 +15959,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15959 margin-top: 40px; 15959 margin-top: 40px;
15960 transition: 0.5s; 15960 transition: 0.5s;
15961 background: #333; 15961 background: #333;
15962 margin-bottom: 40px;
15962 } 15963 }
15963 @media (max-width: 1300px) { 15964 @media (max-width: 1300px) {
15964 .tiles { 15965 .tiles {
...@@ -16340,15 +16341,9 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -16340,15 +16341,9 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
16340 --duration: 60s; 16341 --duration: 60s;
16341 --scroll-start: 0; 16342 --scroll-start: 0;
16342 --scroll-end: calc(-100% - var(--gap)); 16343 --scroll-end: calc(-100% - var(--gap));
16344 /* Pause the animation */
16343 } 16345 }
16344 16346
16345 @media (prefers-color-scheme: dark) {
16346 :root {
16347 --color-text: #fff;
16348 --color-bg: fff;
16349 --color-bg-accent: #fff;
16350 }
16351 }
16352 .marquee { 16347 .marquee {
16353 display: flex; 16348 display: flex;
16354 overflow: hidden; 16349 overflow: hidden;
...@@ -16356,8 +16351,6 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -16356,8 +16351,6 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
16356 -moz-user-select: none; 16351 -moz-user-select: none;
16357 user-select: none; 16352 user-select: none;
16358 gap: var(--gap); 16353 gap: var(--gap);
16359 margin-right: -25%;
16360 margin-left: -25%;
16361 } 16354 }
16362 16355
16363 .marquee__group { 16356 .marquee__group {
...@@ -16367,7 +16360,13 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -16367,7 +16360,13 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
16367 justify-content: space-around; 16360 justify-content: space-around;
16368 gap: var(--gap); 16361 gap: var(--gap);
16369 min-width: 100%; 16362 min-width: 100%;
16370 animation: scroll-x var(--duration) linear infinite; 16363 animation: scroll-x 1s linear;
16364 animation-play-state: paused;
16365 /* Bind the animation to scroll */
16366 animation-delay: calc(var(--scroll) * -1s);
16367 /* These last 2 properites clean up overshoot weirdness */
16368 animation-iteration-count: 1;
16369 animation-fill-mode: both;
16371 } 16370 }
16372 16371
16373 @media (prefers-reduced-motion: reduce) { 16372 @media (prefers-reduced-motion: reduce) {
...@@ -16390,7 +16389,12 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -16390,7 +16389,12 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
16390 16389
16391 .marquee--reverse .marquee__group { 16390 .marquee--reverse .marquee__group {
16392 animation-direction: reverse; 16391 animation-direction: reverse;
16393 animation-delay: -3s; 16392 animation-play-state: paused;
16393 /* Bind the animation to scroll */
16394 animation-delay: calc(var(--scroll) * -1s);
16395 /* These last 2 properites clean up overshoot weirdness */
16396 animation-iteration-count: 1;
16397 animation-fill-mode: both;
16394 } 16398 }
16395 16399
16396 @keyframes scroll-x { 16400 @keyframes scroll-x {
...@@ -16431,61 +16435,6 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -16431,61 +16435,6 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
16431 height: 100vh; 16435 height: 100vh;
16432 } 16436 }
16433 16437
16434 /* Toggle direction button */
16435 .toggle {
16436 --size: 3rem;
16437 position: relative;
16438 position: fixed;
16439 top: 1rem;
16440 left: 1rem;
16441 width: var(--size);
16442 height: var(--size);
16443 font: inherit;
16444 text-align: center;
16445 cursor: pointer;
16446 outline: none;
16447 border: none;
16448 border-radius: 50%;
16449 color: inherit;
16450 background-color: var(--color-bg-accent);
16451 z-index: 1;
16452 }
16453
16454 .toggle:focus-visible {
16455 box-shadow: 0 0 0 2px var(--color-text);
16456 }
16457
16458 .toggle span {
16459 position: absolute;
16460 display: inline-block;
16461 top: 50%;
16462 left: calc(100% + 0.4em);
16463 width: -moz-fit-content;
16464 width: fit-content;
16465 white-space: nowrap;
16466 transform: translateY(-50%);
16467 animation: fade 400ms 4s ease-out forwards;
16468 -webkit-user-select: none;
16469 -moz-user-select: none;
16470 user-select: none;
16471 }
16472
16473 .toggle svg {
16474 --size: 1.5rem;
16475 position: absolute;
16476 top: 50%;
16477 left: 50%;
16478 width: var(--size);
16479 height: var(--size);
16480 fill: currentcolor;
16481 transform: translate(-50%, -50%);
16482 transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
16483 }
16484
16485 .toggle--vertical svg {
16486 transform: translate(-50%, -50%) rotate(-90deg);
16487 }
16488
16489 @keyframes fade { 16438 @keyframes fade {
16490 to { 16439 to {
16491 opacity: 0; 16440 opacity: 0;
......
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.
...@@ -17140,6 +17140,12 @@ ...@@ -17140,6 +17140,12 @@
17140 JS to toggle scroll axis styles 17140 JS to toggle scroll axis styles
17141 */ 17141 */
17142 17142
17143 var offsetStart = 0;
17144 var offsetEnd = 0;
17145 window.addEventListener('scroll', () => {
17146 document.documentElement.style.setProperty('--scroll', (window.pageYOffset - offsetStart) / (document.body.offsetHeight - offsetStart - offsetEnd - window.innerHeight));
17147 }, false);
17148
17143 exports.Alert = alert; 17149 exports.Alert = alert;
17144 exports.Button = button; 17150 exports.Button = button;
17145 exports.Carousel = carousel; 17151 exports.Carousel = carousel;
......
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.
...@@ -216,3 +216,9 @@ ScrollTrigger.refresh(); ...@@ -216,3 +216,9 @@ ScrollTrigger.refresh();
216 */ 216 */
217 217
218 218
219 var offsetStart = 0;
220 var offsetEnd = 0;
221
222 window.addEventListener('scroll', () => {
223 document.documentElement.style.setProperty('--scroll', ( window.pageYOffset - offsetStart ) / ( document.body.offsetHeight - offsetStart - offsetEnd - window.innerHeight ));
224 }, false);
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -322,6 +322,7 @@ ...@@ -322,6 +322,7 @@
322 padding: 0px 20%; 322 padding: 0px 20%;
323 } 323 }
324 } 324 }
325
325 } 326 }
326 327
327 328
......
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
11 margin-top: 40px; 11 margin-top: 40px;
12 transition: .5s; 12 transition: .5s;
13 background: #333; 13 background: #333;
14 margin-bottom: 40px;
14 @media (max-width: 1300px) { 15 @media (max-width: 1300px) {
15 max-width:100vw; 16 max-width:100vw;
16 } 17 }
......
...@@ -7,15 +7,10 @@ ...@@ -7,15 +7,10 @@
7 --duration: 60s; 7 --duration: 60s;
8 --scroll-start: 0; 8 --scroll-start: 0;
9 --scroll-end: calc(-100% - var(--gap)); 9 --scroll-end: calc(-100% - var(--gap));
10 /* Pause the animation */
10 } 11 }
11 12
12 @media (prefers-color-scheme: dark) { 13
13 :root {
14 --color-text: #fff;
15 --color-bg: fff;
16 --color-bg-accent: #fff;
17 }
18 }
19 14
20 15
21 .marquee { 16 .marquee {
...@@ -23,8 +18,7 @@ ...@@ -23,8 +18,7 @@
23 overflow: hidden; 18 overflow: hidden;
24 user-select: none; 19 user-select: none;
25 gap: var(--gap); 20 gap: var(--gap);
26 margin-right: -25%; 21
27 margin-left: -25%;
28 22
29 23
30 } 24 }
...@@ -36,7 +30,15 @@ ...@@ -36,7 +30,15 @@
36 justify-content: space-around; 30 justify-content: space-around;
37 gap: var(--gap); 31 gap: var(--gap);
38 min-width: 100%; 32 min-width: 100%;
39 animation: scroll-x var(--duration) linear infinite; 33 //animation: scroll-x var(--duration) linear infinite;
34 animation: scroll-x 1s linear ;
35 animation-play-state: paused;
36 /* Bind the animation to scroll */
37 animation-delay: calc(var(--scroll) * -1s);
38 /* These last 2 properites clean up overshoot weirdness */
39 animation-iteration-count: 1;
40 animation-fill-mode: both;
41
40 } 42 }
41 43
42 @media (prefers-reduced-motion: reduce) { 44 @media (prefers-reduced-motion: reduce) {
...@@ -60,7 +62,12 @@ ...@@ -60,7 +62,12 @@
60 62
61 .marquee--reverse .marquee__group { 63 .marquee--reverse .marquee__group {
62 animation-direction: reverse; 64 animation-direction: reverse;
63 animation-delay: -3s; 65 animation-play-state: paused;
66 /* Bind the animation to scroll */
67 animation-delay: calc(var(--scroll) * -1s);
68 /* These last 2 properites clean up overshoot weirdness */
69 animation-iteration-count: 1;
70 animation-fill-mode: both;
64 } 71 }
65 72
66 @keyframes scroll-x { 73 @keyframes scroll-x {
...@@ -107,58 +114,6 @@ ...@@ -107,58 +114,6 @@
107 height: 100vh; 114 height: 100vh;
108 } 115 }
109 116
110 /* Toggle direction button */
111 .toggle {
112 --size: 3rem;
113 position: relative;
114 position: fixed;
115 top: 1rem;
116 left: 1rem;
117 width: var(--size);
118 height: var(--size);
119 font: inherit;
120 text-align: center;
121 cursor: pointer;
122 outline: none;
123 border: none;
124 border-radius: 50%;
125 color: inherit;
126 background-color: var(--color-bg-accent);
127 z-index: 1;
128 }
129
130 .toggle:focus-visible {
131 box-shadow: 0 0 0 2px var(--color-text);
132 }
133
134 .toggle span {
135 position: absolute;
136 display: inline-block;
137 top: 50%;
138 left: calc(100% + 0.4em);
139 width: fit-content;
140 white-space: nowrap;
141 transform: translateY(-50%);
142 animation: fade 400ms 4s ease-out forwards;
143 user-select: none;
144 }
145
146 .toggle svg {
147 --size: 1.5rem;
148 position: absolute;
149 top: 50%;
150 left: 50%;
151 width: var(--size);
152 height: var(--size);
153 fill: currentcolor;
154 transform: translate(-50%, -50%);
155 transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
156 }
157
158 .toggle--vertical svg {
159 transform: translate(-50%, -50%) rotate(-90deg);
160 }
161
162 @keyframes fade { 117 @keyframes fade {
163 to { 118 to {
164 opacity: 0; 119 opacity: 0;
......