JavaScriptの.prepend()でページ遷移時に真ん中から開くカーテンのオーバーレイを表示して切り替え
過度な動きや、ダイナミックすぎるアニメーションはむしろユーザーのストレスになるので、気をつけたいところですが、適度なアニメーションは平坦なホームページより確実にユーザーの興味を引くことができます。 そんなアニメーションで …
JavaScriptのScrollTriggerでスクロールインするとぼやけていた文字が徐々に通常表示
JavaScriptのライブラリを使って、簡単なアニメーションを作ってみました。 簡単に実装できる「ライブラリ」と「コード」について解説していきますが、複雑なコードを書く必要がないので、参考にしてもらえたら嬉しいです。 …
JavaScriptのclientHeightでスクロールに応じて伸びたり縮む縦のプログレスバー
ブログのような縦に長いページに「プログレスバー」を入れると、全体の印象やデザインにも奥行きが出るのでオススメです。 簡単なコードで実装できるので、ぜひ参考にしてもらえたら嬉しいです。 目次.clientHeightプログ …
JavaScriptの.prepend()でページ遷移時に左から右にカーテン状のオーバーレイを表示
いろんなことができるCSSアニメーションと、JavaScriptのと setTimeout() と、.prepend() を組み合わせてページ遷移時のアニメーションを作りました。 この記事では、左から右にオーバーレイが表 …
コピペでできるScrollTriggerを使ったスクロールトリガーとアニメーションのスニペット
ScrollTriggerは、その名の通りスクロールに応じてイベントをトリガーしてくれるJavaScriptのライブラリです。 記念は、アニメーション制作のJavaScriptの定番ライブラリ「GSAP」がありますが、容 …
JavaScriptのsetTimeout()でページ切り替え時にバウンスボールを表示して切り替え
よくWebアプリで見かける、ページ切り替え時にボールが跳ねる「バウンスボール」を使って表示させるものをJavaScriptで作りました。 ページの遷移はいろんなパターンがありますが、少しのアニメーションでサイトがリッチに …
JavaScriptの.innerHTMLでフォームのテキストエリアに文字を挿入
フォームによく使われる textarea に、ボタンクリックであらかじめ設定した文字を挿入するスニペットを作りました。 フォームのカスタマイズや、定型になる例文を挿入したいなど、textarea のカスタマイズとして参考 …
JavaScriptのsetTimeout()でフェードイン・フェードアウトしてふわっとページを切り替え
CSSの「@keyframes」で指定したアニメーションを、setTimeout()のタイマーで動かせてフェードイン・フェードアウトさせるスニペットを作りました。 設置するだけでページ遷移・離脱時にふわっとなり、少し動き …
まだ間に合う！レンタルサーバーの割引キャンペーン情報 [2022年4月]
2022年4月現在、「ロリポップ！」「カラフルボックス」「mixhost」「ConoHa WING」「エックスサーバー」の5社で初期費用や、利用料金がお得になるキャンペーンを実施中です。 この記事では、記事執筆時点の5社 …
JavaScriptの.setAttribute()で全てのaタグにGoogleAnalyticsのイベントトラッキングを付与[gtag.js編]
直接 a タグに、HTMLでイベントトラッキングのコードを書いても何ら問題ありませんが、対象になる a タグの数が多い場合非常に面倒なので、そんな時に使えるスニペットを作りました。 目次Google Analyticsの …
