Skip to content

Tenzing / Tenzing-Web-2023

Go to a project
Toggle navigation
Toggle navigation pinning
040c63f8 by Jeff Balicki
Options

wall 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 3374e4e0
Inline Side-by-side
Showing 12 changed files with 402 additions and 2 deletions
<?php
/**
* Wall Block Template.
*
* @param array $block The block settings and attributes.
* @param string $content The block inner HTML (empty).
* @param bool $is_preview True during AJAX preview.
* @param (int|string) $post_id The post ID this block is saved to.
*/
?>
<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');
if( $dir == 'right'){
$marquee = 'marquee--reverse';
} ?>
<article class="wrapper">
<div class="marquee <?php echo $marquee; ?>">
<div class="marquee__group">
<?php while( the_repeater_field('wall') ): ?>
<?php $image = get_sub_field('image'); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endwhile; ?>
</div>
<div aria-hidden="true" class="marquee__group <?php echo $marquee; ?>">
<?php while( the_repeater_field('wall') ): ?>
<?php $image = get_sub_field('image'); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endwhile; ?>
</div>
</div>
</div>
<?php endif; ?>
......@@ -16331,4 +16331,166 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
padding: 0px;
}
:root {
--color-text: navy;
--color-bg: papayawhip;
--color-bg-accent: #ecdcc0;
--size: clamp(10rem, 1rem + 40vmin, 30rem);
--gap: calc(var(--size) / 14);
--duration: 60s;
--scroll-start: 0;
--scroll-end: calc(-100% - var(--gap));
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: #fff;
--color-bg: fff;
--color-bg-accent: #fff;
}
}
.marquee {
display: flex;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
gap: var(--gap);
margin-right: -25%;
margin-left: -25%;
}
.marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll-x var(--duration) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.marquee__group {
animation-play-state: paused;
}
}
.marquee--vertical {
--mask-direction: to bottom;
}
.marquee--vertical,
.marquee--vertical .marquee__group {
flex-direction: column;
}
.marquee--vertical .marquee__group {
animation-name: scroll-y;
}
.marquee--reverse .marquee__group {
animation-direction: reverse;
animation-delay: -3s;
}
@keyframes scroll-x {
from {
transform: translateX(var(--scroll-start));
}
to {
transform: translateX(var(--scroll-end));
}
}
@keyframes scroll-y {
from {
transform: translateY(var(--scroll-start));
}
to {
transform: translateY(var(--scroll-end));
}
}
/* Element styles */
.marquee img {
display: grid;
place-items: center;
width: auto;
border-radius: 0;
}
/* Parent wrapper */
.wrapper {
display: flex;
flex-direction: column;
gap: var(--gap);
margin: auto;
max-width: 100vw;
}
.wrapper--vertical {
flex-direction: row;
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;
visibility: hidden;
}
}
/*# sourceMappingURL=child-theme.css.map */
\ 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.
......@@ -23,5 +23,17 @@ function my_acf_init_block_types() {
]
));
acf_register_block_type( array(
'title' => __( 'Wall', 'client_textdomain' ),
'name' => 'wall',
'render_template' => 'blocks/wall/wall.php',
'mode' => 'edit',
'supports' => [
'align' => false,
'anchor' => true,
'customClassName' => true
]
));
}
}
\ No newline at end of file
......
......@@ -17136,6 +17136,10 @@
// window.requestAnimationFrame(scrollPlay);
/*
JS to toggle scroll axis styles
*/
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.
......@@ -182,7 +182,6 @@ function numberWithCommas(x) {
});
ScrollTrigger.refresh();
......@@ -212,3 +211,8 @@ ScrollTrigger.refresh();
/*
JS to toggle scroll axis styles
*/
......
......@@ -16,4 +16,5 @@
@import "theme/body";
@import "theme/footer";
@import "theme/tabs";
@import "theme/tiles";
\ No newline at end of file
@import "theme/tiles";
@import "theme/wall";
\ No newline at end of file
......
:root {
--color-text: navy;
--color-bg: papayawhip;
--color-bg-accent: #ecdcc0;
--size: clamp(10rem, 1rem + 40vmin, 30rem);
--gap: calc(var(--size) / 14);
--duration: 60s;
--scroll-start: 0;
--scroll-end: calc(-100% - var(--gap));
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: #fff;
--color-bg: fff;
--color-bg-accent: #fff;
}
}
.marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
margin-right: -25%;
margin-left: -25%;
}
.marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll-x var(--duration) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.marquee__group {
animation-play-state: paused;
}
}
.marquee--vertical {
--mask-direction: to bottom;
}
.marquee--vertical,
.marquee--vertical .marquee__group {
flex-direction: column;
}
.marquee--vertical .marquee__group {
animation-name: scroll-y;
}
.marquee--reverse .marquee__group {
animation-direction: reverse;
animation-delay: -3s;
}
@keyframes scroll-x {
from {
transform: translateX(var(--scroll-start));
}
to {
transform: translateX(var(--scroll-end));
}
}
@keyframes scroll-y {
from {
transform: translateY(var(--scroll-start));
}
to {
transform: translateY(var(--scroll-end));
}
}
/* Element styles */
.marquee img {
display: grid;
place-items: center;
width: auto;
border-radius: 0;
}
.marquee--vertical img {
}
/* Parent wrapper */
.wrapper {
display: flex;
flex-direction: column;
gap: var(--gap);
margin: auto;
max-width: 100vw;
}
.wrapper--vertical {
flex-direction: row;
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;
visibility: hidden;
}
}