JavaScript

WEB制作で「スクロールして要素が画面内に現れたらアニメーションする」という機能はとても頻繁に使います。 今回はスクロールアニメーションの作り方で、JavaScriptの「Intersection Observer AP続きを読む

1つのボタンを押すと複数のサイトが開く方法のご紹介です。 この動作は通常のサイトで使うことはありませんし、そもそもブラウザのポップアップブロックなどのセキュリティーで制限されています。 しかし、個人的な検証用やチーム内で続きを読む

「任意のYoutubeチャンネルの最新動画を取得し、WEBサイトに表示させる」方法をご紹介します。 この方法を使えば、Youtubeに新しい動画が投稿されると自動的にWEBサイトにも最新動画が表示されます。表示する動画の続きを読む

canvas(カンバス)での表現で動きやアニメーションに残像を付ける方法を紹介します。 方法は簡単で、「背景に透明度を持たせる」ことです。 実際の例と理屈を解説していきます。 canvasアニメーションで残像を付けた実例続きを読む

スクロールして画面内に現れたらアニメーションする、というエフェクトはよくありますし、そのためのプラグインやサンプルコードも沢山あります。 しかし、プラグインを入れたり多くのコードを書いてサイトを複雑にしたくない場合もあり続きを読む

スクロールすると現在の位置に合わせてナビゲーションの表示を変化させるスクリプトの作り方を紹介します。 別の言い方をすると、 ページ内リンクでのナビゲーションがあり、スクロール位置がそのナビゲーションが示す地点までくると、続きを読む

WEBサイトを作るときには、必ず更新や管理の方法も同時に考えます。 更新頻度が多いサイトなら、WordPressのようなCMSを使えば良いですし、それほど更新しないならhtmlをそのままFTPサーバにアップするやり方でも続きを読む

jQueryでアニメーションを作るときに、addClass()やremoveClass()メソッドを使ったClassの追加削除で動かすことがありますよね。 しかし、addClass()だとdelay()メソッドによる遅延続きを読む

JavaScriptとjQueryを使って、サイト内でコンテンツをフィルタリングする方法をご紹介します。 主な使いどころは、たくさんあるニュースをジャンル分けし、選んだジャンルのニュースだけを表示させるなどの場合です。 続きを読む

デバイスピクセル比の情報を取得し、それによって画像の出し分けをしてみましょう。 これは画面サイズによる条件分岐とは違います。まずはデバイスピクセル比の意味を理解しましょう。 デバイスピクセル比とは スマホやタブレットのモ続きを読む

JavaScriptでの変数宣言の方法の違いを解説しました。var・let・constの違いを理解して間違いのない使い方をしましょう。

スクロールしていくと、最初に色面が表れて、後からそのスペースに画像が表示されるエフェクトをよく見かけます。このエフェクトを私なりに作ってみましたので、ご紹介いたします。 まずは実際の動きをご覧ください。 いかがでしょうか続きを読む