TSUBASAが属する個人プロジェクト「COFUS」内のBLOGコンテンツです。TSUBAS1992年生まれ、沖縄県育ち、現在大阪暮らし。フリーなフロントエンドエンジニアとしてコーディング案件をメインに行いながら、Web制作・Webサイト運営・ツール制作などの活動を行っています。スクロールに合わせて特定の要素にActiveクラスを付与する実装の例です。毎回作っては破棄しているので備忘録としてメモしておきます。下記例ではスクロールし特定の要素が事前に設定した位置に達した時にActiveクラス(例ではis-visibleクラス)を1回付与する想定です。}};最適化するとよりページパフォーマンスが可能だと思いますが、改めて見返すと私はよくこんな感じで実装する事が多いようですね。見え返すのは大事です。scrollイベントはthrottle処理で間引いてあげるscrollイベントの所はthrottle処理で間引いて上げるとページパフォーマンスの向上になります。{})内で処理を書いてあげます。ちなみに上記プラグインだとdebounceも利用可能になります。(便利!)PC、SPでタイミングを変えるgetClientRect()のActiveクラスを付与するスクロール位置はPC・SPで分けて使うことも多いです。例ではPCの場合(lg)は750、そうでなければ600という値に設定しています。600;getDeviceType()は制作時に個人的によく利用するので最初でfunctions.js等に設置する事が多いです。中身はウインドウサイズと比較してPCサイズなのか、SPサイズなのか返しているだけですので案件に合わせて色々変わったりします。deviceType;};プラグインを利用せずともActiveクラスの付与程度で可能なアニメーションであれば、上記の様な形で簡素に実装してしまう事も割と多いです。自由度も高いので案外複雑な表現も出来たり。備忘録ではありますがWeb制作者の参考になりましたら幸いです。GithubTwitterChatworknoteFacebookWeb制作、コーディングのご依頼お待ちしております!。