.p-top-fv {
min-height: 100svh;
display: flex;
align-items: center;
background: $color-bg;
}
$works = new WP_Query([
'post_type' => 'works',
'posts_per_page' => 6,
]);
<section class="p-top-fv">
<div class="l-container">
<h1 class="__heading">
デザインの意図を、
コードに宿す。
</h1>
</div>
</section>
const observer = new
IntersectionObserver(
(entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
el.classList.add('is-show');
}
});
}, { threshold: 0.2 }
);
.l-header {
position: fixed;
top: 0; left: 0;
width: 100%;
z-index: $z-header;
}
<?php get_header(); ?>
<?php get_template_part(
'template-parts/card'
); ?>
.c-btn {
display: inline-flex;
padding: 14px 32px;
font-weight: 600;
transition: all 0.3s ease;
}
const btn = document.querySelector(
'.l-header__hamburger'
);
btn.addEventListener('click', () => {
document.body.classList
.toggle('is-menu-open');
});
.p-top-fv {
min-height: 100svh;
display: flex;
align-items: center;
background: $color-bg;
}
$works = new WP_Query([
'post_type' => 'works',
'posts_per_page' => 6,
]);
<section class="p-top-fv">
<div class="l-container">
<h1 class="__heading">
デザインの意図を、
コードに宿す。
</h1>
</div>
</section>
const observer = new
IntersectionObserver(
(entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
el.classList.add('is-show');
}
});
}, { threshold: 0.2 }
);
.l-header {
position: fixed;
top: 0; left: 0;
width: 100%;
z-index: $z-header;
}
<?php get_header(); ?>
<?php get_template_part(
'template-parts/card'
); ?>
.c-btn {
display: inline-flex;
padding: 14px 32px;
font-weight: 600;
transition: all 0.3s ease;
}
const btn = document.querySelector(
'.l-header__hamburger'
);
btn.addEventListener('click', () => {
document.body.classList
.toggle('is-menu-open');
});
