マガジンのカバー画像

Web制作Tips

9
本
Web制作会社を退職したので、マガジンとして過去記事をまとめました。 少しでも参考になれば幸いです。
運営しているクリエイター
KojimaKohei

【gulp4】もう迷わないgulpfile.jsの書き方

gulpとは、Node.jsで動作するビルドシステムヘルパーと言って、web制作において時間のかかるタスクを自動化できる便利なツールです。 gulpを使うことで様々な処理を自動で行うことができ、とっても便利なのです。 さて、 gulpは前から使っていたのですが、gulpfile.jsの書き方が非推奨となっていたため、一から書き直してみました。 Node.jsの説明やgulpの環境構築についてはこの記事では触れません。 環境構築から知りたい方は、ICS MEDIAさん

KojimaKohei

ページ遷移時にアニメーションをつける

お洒落なサイトでよく実装されているのが、「ページ遷移時のアニメーション」ですね。 例えば、企業のアイコンを表示させたり、画面をスライドさせたり、フェードインさせたり、様々なアニメーションをつけてユーザーを飽きさせないようにしてます。 （あまりやりすぎてるサイトは離脱率が上がりそうですが） 　jQueryのプラグインで有名どころとしてはANIMSITIONですね。 今回は、プラグインを使用せず、ページ遷移時のアニメーションを実装してみます。 参考にしたサイト、は記事最

KojimaKohei

スクロールに連動して要素をアニメーションさせるTips

アニメーションといえばスクロール連動ですね。 画面をスクロールしていって、特定の要素が画面内に入った時にアニメーションが発生してくれると、いい感じです。 一見難しそうに感じますが、少し前に書いたスティキーヘッダーのTipsを参考に進めれば難しいことはありません。 スクロール連動してアニメーションさせるアニメーションさせるには、クラスをつける まずはやりたいことを整理します。 ・スクロールし、特定の要素が画面内に入った時にクラスをつける ・クラス付与をトリガーに、要素

KojimaKohei

Twitter風入力文字数チェック

今日のjQueryTipsは、Twitter風文字数カウントです。 Twitterをやってる人ならご存知かもしれませんが、 文字を入力していくと、右下にドーナツ型のアイコンが出てきて、「あとどれくらい入力できるか」が視覚的にわかるようになってます。 この機能が実装された当初は「わかりにくい」と否定的な意見もあったみたいですが、個人的にはお洒落で気に入ってます。 TwitterはReactで実装されてますがjQueryでもこの仕組みは作ることができます。ただ、完璧にコピ

KojimaKohei