Web制作Tips

本

Web制作会社を退職したので、マガジンとして過去記事をまとめました。少しでも参考になれば幸いです。

運営しているクリエイター: KojimaKohei

#jQueryマガジン

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

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

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

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

Twitter風入力文字数チェック

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

jQueryで実装するフォームバリデーション

HTML5では、type属性を指定すれば自動でバリデーションがかかったり、requiredを指定するだけで入力チェックをかけることが可能です。 HTML5の入力検証機能はとっても簡単に導入できるのですが、下記のようなデメリットのため、使わないことの方が多いです。・ブラウザによってエラーの表示内容が異なる・JSで組んだ方がカスタマイズしやすい date,search,number,range,colorなどはいまだにIEやsafariが対応してなかったりするみたいなの