サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
photopizza.design
今回は、cssのみで(コピペで)実装できるローディングアニメーションをまとめた記事になっています。 ローディングはかつてはgifアニメで作られることが多かったですが、現在は複雑なことができるcss3によって実装されるケースがほとんどです。 jsより学習コストも低く、ブラウザに負荷もかけないので良いことづくめと言えます。 ただ、普段から感じていたことですが、ローディングのようなちょっと特殊なcssを書くことって本職のコーダーでもあまりありませんよね? 案件によって作ったり作らなかったり、それも案件ごとに基本1つしか作らないと思うので慣れていない人が多くても当然だと思います。 そんなwebデザイナー、コーダー、フロントエンドエンジニアの皆さまを対象に、コピペで実装できるローディングアニメーションをまとめました。 doneローディングアニメーション実装するメリットは大きい ローディングを実装する
今回は、cssのみで実装できるスクロールを促すアニメーションをまとめた記事になっています。 よくメインビジュアル下部についている、スクロールバー / スクロールボタンを見たことはありますか? メインビジョンの下にコンテンツがあることをユーザーにわかりやすく伝える定番のUIですよね。 とはいえ、実装する機会は1サイトに基本一回だと思います。 やる度に作り方を調べている諸兄も多いはず。 そこで今回はcodepenからのまとめではありますが、実装しやすいものから思わず記憶に残る個性的なスクロールバー / スクロールボタンまで20個まとめました。 是非web制作の参考にされてくださいね。 それでは下記からどうぞ。 【CSS】スクロールを促す華麗なアニメーション20選 シンプルなようで凝った矢印アニメーション 矢印の大きさがふわっと変わるのが地味に個性を演出しますね。 See the Pen Scr
今回の記事では、webサイトのメインビジュアルに設置することが多い、超オシャレなスライドショーのサンプルを厳選して紹介していきます。 スライドショーといえば、slickslideやswiperなどが定番のプラグインですよね。 オプションが豊富で汎用性が高いので、普段からお世話になっている人も多いはず。 僕もコーディングを担当するときは大体ここら辺のプラグインを使うことが多いです。 ですが、webサイトの花形であるスライドショーにいつも同じプラグインを使っていて良いんだろうか? ふとそんな疑問を抱いてしまう人もいるのではないでしょうか。 今回はメジャーなプラグインに囚われず、柔軟な発想でオシャレな動きを実装しているスライドショーをまとめてみました。 コピペで使うもよし、動きのアイディアだけ拝借するも良しです。 中にはブッ飛んだ動きを実装しているものもあるので、いつものスライドショーに飽きてし
今回は、cssのみでなんともおしゃれに動くハンバーガーメニューのサンプルを紹介する記事となっています🍔 webサイトといえばハンバーガーメニュー。ハンバーガーメニューといえばwebサイト。 そういっても決して言い過ぎではないくらい、ハンバーガーメニューはwebサイトにおける定番のUIの一つですよね。 とはいえ、実装には通常ではjavascript(jQuery)を使用する必要があり、ハンバーガーメニューのコーディングとなると身構えるwebクリエイターの方も多いのではないでしょうか?笑 僕もかれこれ6年ほどweb制作をやっていますが、なんだかんだいつも時間をかけてしまうところでもあるんですよね。 そこで今回は、面倒なjsのコーディングが必要無い、cssのみで作成されたおしゃれなデザインのハンバーガーメニューを厳選して紹介していきます。 本記事で紹介しているものは汎用性が高く、かつデザイン性
このページを最初にブックマークしてみませんか?
『photopizza.design』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く