1:テキストアニメーションの実装
テキストアニメーションで作成したmain.js・_mixin.scss・scroll-polyfill.js_・scroll.js・style.scss・text-animation.jsをこのように配置する。
貼り付けたmain.js内の以下を切り取り
scripts/main.jsにこのように貼り付け
貼り付けた_mixinはいらなかったので削除する。
style.scssの記述を変更
.animate-title,
.tween-animate-title {
opacity: 0;
&.inview {
opacity: 1;
& .char {
display: inline-block;
}
}
& .char {
opacity: 0;
}
}
.animate-title.inview .char {
@include animation(
$name: kf-animate-chars,
$duration: 0.5s,
$timing-function: cubic-bezier(0.39, 1.57, 0.58, 1),
$fill-mode: both
);
@for $i from 1 through 30 {
&:nth-child(#{$i}) {
animation-delay: $i * 0.04s;
}
}
}
@keyframes kf-animate-chars {
0% {
opacity: 0;
transform: translateY(-50%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}変更したstyle.scss・_text-animation.scssにリネームしてmodulesに移動
以前使用したTweenMax.min.jsをコピーしてvendorsに貼り付け
index.htmlに記述して読み込ませる
アニメーションされるか動作テストをする
index.htmlに以下の記述を追加 
main.jsの記述を変更
document.addEventListener('DOMContentLoaded', function () {
// newでインスタンス化
const hero = new HeroSlider('.swiper-container');
hero.start();
// コールバック関数を設ける
const cb = function (el, isIntersecting) {
if (isIntersecting) {
const ta = new TweenTextAnimation(el);
ta.animate();
}
};
// 第1引数にエレメント第二引数にコールバック関数
const so = new ScrollObserver(".animate-title", cb);
// 動作テスト用
const so2 = new ScrollObserver(".tween-animate-title", cb);
});文字がアニメーションされていればOK
2:スライダーアニメーションの実装
スクロールの監視とスライダーアニメーションのところのstyle.scssの.cover-slideより上を削除して、modulesに配置して_image-slide.scssにリネーム
_base.scssに記述を追加
img {
max-width: 100%;
vertical-align: bottom;
}style.scssに記述を追加 @import ‘modules/image-slide’;
@import ‘modules/button’;
index.htmlに以下を記述して確認すると
スライダーアニメーションが追加された！
3:ボタンの実装
_button.scssをmodulesに配置する。中はこの様になっている
.btn {
position: relative;
display: inline-block;
background-color: $cWhite;
border: 1px solid $cBlack;
font-weight: 600;
padding: 10px 40px;
margin: 10px auto;
cursor: pointer;
transition: all 0.3s;
color: $cBlack;
text-decoration: none !important;
&.float:hover {
background-color: $cBlack;
color: $cWhite;
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
}
&.filled {
background-color: $cBlack;
color: $cWhite;
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
&:hover {
background-color: $cWhite;
color: $cBlack;
box-shadow: none;
}
}
&.letter-spacing:hover {
background-color: $cBlack;
letter-spacing: 3px;
color: $cWhite;
}
&.shadow {
box-shadow: none;
&:hover {
transform: translate(-2.5px, -2.5px);
box-shadow: 5px 5px 0 0 $cBlack;
}
}
&.solid {
box-shadow: 2px 2px 0 0 $cBlack;
border-radius: 7px;
&:hover {
transform: translate(2px, 2px);
box-shadow: none;
}
}
&.slide-bg {
position: relative;
overflow: hidden;
z-index: 1;
&::before {
content: "";
display: inline-block;
width: 100%;
height: 100%;
background-color: $cBlack;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
transition: transform 0.3s;
z-index: -1;
}
&:hover {
color: $cWhite;
&::before {
transform: none;
}
}
}
&.cover-3d {
position: relative;
z-index: 1;
transform-style: preserve-3d;
perspective: 300px;
& span {
display: inline-block;
transform: translateZ(20px);
}
&::before {
content: "";
display: inline-block;
width: 100%;
height: 100%;
background-color: $cBlack;
position: absolute;
top: 0;
left: 0;
transform: rotateX(90deg);
transition: all 0.3s;
transform-origin: top center;
opacity: 0;
}
&:hover {
color: $cWhite;
&::before {
transform: none;
opacity: 1;
}
}
}
}
.btn-cubic {
position: relative;
display: inline-block;
transform-style: preserve-3d;
perspective: 300px;
width: 150px;
height: 50px;
margin: 0 auto;
cursor: pointer;
font-weight: 600;
& span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid $cBlack;
line-height: 48px;
text-align: center;
transition: all 0.3s;
transform-origin: center center -25px;
color: black;
}
& .hovering {
background-color: $cBlack;
color: $cWhite;
transform: rotateX(90deg);
}
& .default {
background-color: $cWhite;
color: $cBlack;
transform: rotateX(0);
}
&:hover {
& .hovering {
transform: rotateX(0);
}
& .default {
transform: rotateX(-90deg);
}
}
}index.htmlにボタンを追加する
ボタンが生成されているのを確認する(一部おかしいのは後で修正)