タグ

2013年12月11日のブックマーク (5件)

  • まるで自分の意思があるかのよう!canvasサイトまとめ12選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。たまです。 最近canvasを使用したサイトをちらほら見かけますね。サイトのコンセプトに合えば是非とも取り入れたい表現です。 今回は有機的な動きをcanvas+javascriptで展開しているサイトをまとめてみました。 インスピレーションが湧いてくるな〜。では行ってみよう! My Life in 20 Years https://www.mylifein20years.com/ ※現在はサービスを終了しています。 facebookと同期してみてください。他のユーザーとの関係を繋ぐラインや読み込み時のローディング等、所々canvasが使用されています LAMDASH DNA | メンズシェーバー ラムダッシュ | Panasonic https://panasonic.jp/shaver/lamdash/dna/index.html DNAがcanvasによって表現され、3Dの

    まるで自分の意思があるかのよう!canvasサイトまとめ12選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 使いやすくなった!UI素材とテクニック集/CSS jQuery版

    作成:2013/12/9 更新:2014/11/01 無料素材 > アプリを作るとき、クライアントさんのナビサイト、サービスを作るときにユーザーの満足度を上げれないか、使いやすく見やすく、コンバージョンを上げれないかと調べていたら、役に立ちそうなものが沢山ありました。今回はボタンやフォーム、ナビゲーションなどウェブサイトなどを使っていて楽しいと感じてもらうための素材やサンプルをcss/jQuery中心にまとめます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー 1.円形 2.タブ 3.ナビゲーション 4.アコーディオン ウィンドウ 5.モーダルウィンドウ 6.フローティングウィンドウ 7.Dialog(ダイアログ) 8.フォーム+バリデーション ボタン 9.Toggle (トグルボタン) 10.Switch (スイッチボタン) 11.Scrubbe

    使いやすくなった!UI素材とテクニック集/CSS jQuery版
  • シンプルで軽量なJavaScriptスライドライブラリ「slidr.js」 | ソフトアンテナ

    「slidr.js」はシンプルで軽量なJavaScriptライブラリ(GitHub)。inline / inline-block / block要素にお手軽にスライドエフェクトを追加することができます。Chrome 26 / Firefox 20 / Safari 5.1.7 / IE 10などで動くようです。 様々なエフェクト オンラインデモで実際に試してみることができます。スライドが遷移するときのアニメーション効果は以下のものを使うことができます。 cube: 箱が回転するようなエフェクト。 linear: スライドが横に移動するエフェクト。 fade: フェードイン/フェードアウト。 none: なし。 「controls」で矢印の表示位置の切り替え、「breadcrumbs」でパン屑リストの表示・非表示の切り替えができます。 スライドの作り方は以下の通り。data-slidr属性で

    シンプルで軽量なJavaScriptスライドライブラリ「slidr.js」 | ソフトアンテナ
  • [JS]jQueryのプラグイン100選 -2012年総集編

    2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 ナビゲーション関連 レイアウト関連 レスポンシブ関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連

  • もう同じコードを繰り返さない!SublimeTextのスニペットで快適コーディング!

    こんにちは。 小林です。 今日も、SublimeTextの便利な使い方を、一緒に覚えていきましょう。 今回は、「スニペット」についてです。 DreamWeaverやEclipse等のIDEをご利用の方にはおなじみかと思われますが、 まずは、「スニペット」とは何ぞやというところから。 スニペットとは? snippet 【名詞】 切れ端、断片 切れ端や断片で何ができるのかといいますと、例えば、何かものを作る際に、よく使う部品を簡単に利用出来る様に準備しておくとどうでしょう?とっても効率がいいですよね? 三輪車を作る時に、タイヤを三つそれぞれ一から作っていたら、大変だし、出来上がりもばらつきが出たりしますよね。タイヤを作るものを準備してポポーンとタイヤを三つつくっちゃいたいところですよね。 こういう考え方でしょうか。 DRYってやつですかね。 DRY【Don’t Repeat Yourself.

    もう同じコードを繰り返さない!SublimeTextのスニペットで快適コーディング!