![](https://cxg-design.jp/wp-content/uploads/2024/04/jsbanner02.png)
JS FADE IN
JS
その場でフェードインを実装するJavaScriptです。
CSSで、透明の状態にします。実装したい箇所にfaderクラスを記入
// JavaScript Document
/*
スクロールで要素を表示
================================================ */
// 監視対象が範囲内に現れたら実行する動作
const animateFader = (entries, obs) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.animate(
{
opacity: [0, 1],
},
{
duration: 1500,
easing: 'ease',
fill: 'forwards',
}
);
// 一度ふわっと表示されたら監視をやめる
obs.unobserve(entry.target);
}
});
};
// 監視設定
const faderObserver = new IntersectionObserver(animateFader);
// .fadeinを監視するよう指示
const faderElements = document.querySelectorAll('.fader');
faderElements.forEach((faderElement) => {
faderObserver.observe(faderElement);
});
.fader {
opacity: 0;
}
<section class="section-contents" id="works">
<div class="wrapper">
<div class=" block--1"><div class="fontUp"><h2 class="section-title text-split">Works</h2></div></div>
<span class="section-title-en fader">作品</span>
<p class="section-lead fader">CMSWebサイトなどの紹介をします。</p>
<div class="workbox">
<?php
$custom_posts = get_posts(array(
'post_type' => 'all_works',
'posts_per_page' => 6,
));
global $post;
?>
<?php if($custom_posts): ?>
<?php foreach($custom_posts as $post): setup_postdata($post); ?>
<article class="works fader" >
<div class="about-works-icon zoomIn">
<a href="<?php echo esc_url(get_permalink()); ?>">
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail('medium_large'); ?>
<?php endif; ?>
</a>
</div>
<a class="detail-link" href="<?php echo esc_url(get_permalink()); ?>">
<p class="title"><?php the_title(); ?></p>
<p class="news-text">
<?php
$terms = get_the_terms($post->ID, 'kinds');
if ($terms) :
foreach ($terms as $term) {
echo '<span>' . $term->name . '</span>';
}
endif;
?>
</p>
</a>
</article>
<?php endforeach; ?>
<?php endif; wp_reset_postdata(); ?>
</div>
<div class="fader">
<button type="button" class="button button-ghost" onclick="javascript:location.href = '<?php echo home_url('/kinds'); ?>';">
>> WORKS 一覧
</button>
</div>
</div>
</section>