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 @@
*/
?>
<button class="toggle" id="direction-toggle">
<span>Toggle scroll axis</span>
<svg aria-hidden="true" viewBox="0 0 512 512" width="100" title="arrows-alt-h">
<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" />
</svg>
</button>
<?php if( have_rows('wall') ): ?>
<?php $rowCount = count( get_field('wall') );
$dir = get_field('direction');
......
......@@ -15959,6 +15959,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
margin-top: 40px;
transition: 0.5s;
background: #333;
margin-bottom: 40px;
}
@media (max-width: 1300px) {
.tiles {
......@@ -16340,15 +16341,9 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
--duration: 60s;
--scroll-start: 0;
--scroll-end: calc(-100% - var(--gap));
/* Pause the animation */
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: #fff;
--color-bg: fff;
--color-bg-accent: #fff;
}
}
.marquee {
display: flex;
overflow: hidden;
......@@ -16356,8 +16351,6 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
-moz-user-select: none;
user-select: none;
gap: var(--gap);
margin-right: -25%;
margin-left: -25%;
}
.marquee__group {
......@@ -16367,7 +16360,13 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll-x var(--duration) linear infinite;
animation: scroll-x 1s linear;
animation-play-state: paused;
/* Bind the animation to scroll */
animation-delay: calc(var(--scroll) * -1s);
/* These last 2 properites clean up overshoot weirdness */
animation-iteration-count: 1;
animation-fill-mode: both;
}
@media (prefers-reduced-motion: reduce) {
......@@ -16390,7 +16389,12 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
.marquee--reverse .marquee__group {
animation-direction: reverse;
animation-delay: -3s;
animation-play-state: paused;
/* Bind the animation to scroll */
animation-delay: calc(var(--scroll) * -1s);
/* These last 2 properites clean up overshoot weirdness */
animation-iteration-count: 1;
animation-fill-mode: both;
}
@keyframes scroll-x {
......@@ -16431,61 +16435,6 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
height: 100vh;
}
/* Toggle direction button */
.toggle {
--size: 3rem;
position: relative;
position: fixed;
top: 1rem;
left: 1rem;
width: var(--size);
height: var(--size);
font: inherit;
text-align: center;
cursor: pointer;
outline: none;
border: none;
border-radius: 50%;
color: inherit;
background-color: var(--color-bg-accent);
z-index: 1;
}
.toggle:focus-visible {
box-shadow: 0 0 0 2px var(--color-text);
}
.toggle span {
position: absolute;
display: inline-block;
top: 50%;
left: calc(100% + 0.4em);
width: -moz-fit-content;
width: fit-content;
white-space: nowrap;
transform: translateY(-50%);
animation: fade 400ms 4s ease-out forwards;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.toggle svg {
--size: 1.5rem;
position: absolute;
top: 50%;
left: 50%;
width: var(--size);
height: var(--size);
fill: currentcolor;
transform: translate(-50%, -50%);
transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}
.toggle--vertical svg {
transform: translate(-50%, -50%) rotate(-90deg);
}
@keyframes fade {
to {
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 @@
JS to toggle scroll axis styles
*/
var offsetStart = 0;
var offsetEnd = 0;
window.addEventListener('scroll', () => {
document.documentElement.style.setProperty('--scroll', (window.pageYOffset - offsetStart) / (document.body.offsetHeight - offsetStart - offsetEnd - window.innerHeight));
}, false);
exports.Alert = alert;
exports.Button = button;
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();
*/
var offsetStart = 0;
var offsetEnd = 0;
window.addEventListener('scroll', () => {
document.documentElement.style.setProperty('--scroll', ( window.pageYOffset - offsetStart ) / ( document.body.offsetHeight - offsetStart - offsetEnd - window.innerHeight ));
}, false);
\ No newline at end of file
......
......@@ -322,6 +322,7 @@
padding: 0px 20%;
}
}
}
......
......@@ -11,6 +11,7 @@
margin-top: 40px;
transition: .5s;
background: #333;
margin-bottom: 40px;
@media (max-width: 1300px) {
max-width:100vw;
}
......
......@@ -7,15 +7,10 @@
--duration: 60s;
--scroll-start: 0;
--scroll-end: calc(-100% - var(--gap));
/* Pause the animation */
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: #fff;
--color-bg: fff;
--color-bg-accent: #fff;
}
}
.marquee {
......@@ -23,8 +18,7 @@
overflow: hidden;
user-select: none;
gap: var(--gap);
margin-right: -25%;
margin-left: -25%;
}
......@@ -36,7 +30,15 @@
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll-x var(--duration) linear infinite;
//animation: scroll-x var(--duration) linear infinite;
animation: scroll-x 1s linear ;
animation-play-state: paused;
/* Bind the animation to scroll */
animation-delay: calc(var(--scroll) * -1s);
/* These last 2 properites clean up overshoot weirdness */
animation-iteration-count: 1;
animation-fill-mode: both;
}
@media (prefers-reduced-motion: reduce) {
......@@ -60,7 +62,12 @@
.marquee--reverse .marquee__group {
animation-direction: reverse;
animation-delay: -3s;
animation-play-state: paused;
/* Bind the animation to scroll */
animation-delay: calc(var(--scroll) * -1s);
/* These last 2 properites clean up overshoot weirdness */
animation-iteration-count: 1;
animation-fill-mode: both;
}
@keyframes scroll-x {
......@@ -107,58 +114,6 @@
height: 100vh;
}
/* Toggle direction button */
.toggle {
--size: 3rem;
position: relative;
position: fixed;
top: 1rem;
left: 1rem;
width: var(--size);
height: var(--size);
font: inherit;
text-align: center;
cursor: pointer;
outline: none;
border: none;
border-radius: 50%;
color: inherit;
background-color: var(--color-bg-accent);
z-index: 1;
}
.toggle:focus-visible {
box-shadow: 0 0 0 2px var(--color-text);
}
.toggle span {
position: absolute;
display: inline-block;
top: 50%;
left: calc(100% + 0.4em);
width: fit-content;
white-space: nowrap;
transform: translateY(-50%);
animation: fade 400ms 4s ease-out forwards;
user-select: none;
}
.toggle svg {
--size: 1.5rem;
position: absolute;
top: 50%;
left: 50%;
width: var(--size);
height: var(--size);
fill: currentcolor;
transform: translate(-50%, -50%);
transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}
.toggle--vertical svg {
transform: translate(-50%, -50%) rotate(-90deg);
}
@keyframes fade {
to {
opacity: 0;
......