ここまで動かせる！楽しいcss アニメーションのサンプル集 - コムテブログ
TL;DR 小気味よいアニメーションを用いた Web サイトを国内でも多く見かけるようになってきました。CSS3 により画像編集や Flash が減りメンテナンス性も向上しています。2015 年もアニメーションを取り入れるサイトは増えていくでしょう。 今回は CSS アニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 エフェクトサンプル １．アニメのようにテキスト下の画像を移動させる アニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。 .type-mask h2 { -webkit-animation: scrollmask 10s ease 1.5s
今風になった！Web制作で使える最近のjQueryプラグインまとめ
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を再生するタイプ３つ スクロール ５．スクロールでクロスフェード ６．スクロールで奥行きを表現 ７．スクロールで分割 画像 ８．APNG ９．Google 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
素早く制作できた！Web制作に役立つトレンドのツール一覧
作成：2014/12/22 Web制作 > 2014年、WPテーマやコーポレートサイト作成時にお世話になったツールと2015年に使いたいツール。素早くコーディングを行うために知っておきたいツールをメモ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ CSS ツール １．CSS スニペット ２．CSSアニメーションサンプル ３．背景を様々な形に切り抜く ジェネレーター ４．SCSS/CSSに変換するツール ５．CSS フレームワークとチートシート ６．CSS3 アイコン ７．CSS / JS / HTML コード整形 ８．レスポンシブ モックアップ作成 ９．ブラウザ対応表 SVG / ロングシャドー / ポリゴン作成 １０．SVG ブラウザサポート状況確認表 １１．SVG ローディングアニメ作成 １２．SVG 背景作成ジェネレーター １３．SVG パターン背景
Webデザイナー必見、実務で役立つ逆引きレイアウト集
作成：2015/07/21 更新：2016/06/29 Webデザイン > オシャレなレイアウトやユーザーが使いやすい配置を実現するには、どのようなことに気をつければよいのか。クライアントの要望に合わせてアイデアを出したいとき、レイアウトで困った時に読んでおきたいメモ。イメージが湧きやすいように、国産サイトを多めにピックアップしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．視線を停止させたい ２．上質さを出したい ３．静寂さを出したい ４．親しみやすさ を出したい ５．文字の存在感を出したい ６．メリハリを出したい ７．先進的な演出をしたい ８．広がりを出したい ９．メッセージを目立たせい １０．要素を上手に対比させたい １１．ラインをオシャレに使いたい １２．躍動感を出したい １３．ハッキリ見せたい １４．シンボル・ロゴを目立つ位置に配置した
それなりに使える、Web制作者がお世話になる便利ツール
作成：2016/01/4 更新：2018/05/01 Web制作 > 毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 エンジニア速報は Twitter の@commteで配信しています。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいですね。 検索の他、実用新案、意匠、商標の簡易検索ができます。意外と紹介している人が少ないのと、たまに使うことがあるのでメモしておきます。 J-PlatPat 特許事務所は検索で沢山出てきますので、ここでは割愛します。商標登録とロゴマーク作成を一括で頼めるサービ
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
