見るだけでワクワクする、そんな素晴らしいアイデアが満載のアニメーションやスクロールを使った実装テクニックをCodePenから紹介します。
新鮮なアイデアが満載！アニメーションやスクロールを使った実装テクニックのまとめ
見るだけでワクワクする、そんな素晴らしいアイデアが満載のアニメーションやスクロールを使った実装テクニックをCodePenから紹介します。
Javascriptを使ってここまでできる！凄い動きのサイト10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。マラガの海の贈り物SEKOです。 フラッシュを使えばサイトはダイナミックな動きを実現しますが、今回はフラッシュでなくてもJavascriptで凄い動きのサイトを集めてみました。 是非参考にしてください。 Javascriptを使った、凄い動きのサイト10選！ MoMA MoMA 円が時系列で表現されております。クリックするとグリンっとまわる動きは気持ちがいいです。ただサイト自体がけっこう重いですね。。 DUB FIRE DUB FIRE マウスを右や左に動かすとサイト全体が動きます。広がりがあり、操っている感もあり、こちらも操作が気持ちいいサイトです。 Volkswogen Volkswogen メインスライドの動きが綺麗です。スクロールで車を操作する年表ページやフォトギャラリーにも楽しい動きが沢山含まれています。 Secret Study Secret Study DUB F
並べると見やすい、そんなUIを実現·AppStore.js MOONGIFT
AppStore.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 最近ではPinterestのように高さに変化をつけたブロックを並べていくのが流行っていますが、逆に整然と並んでいるのもまた良いものです。今回はそんな陳列した状態を簡単に実現できるAppStore.jsを紹介します。 ダークテーマ。下の高さは違いますが、上辺は揃っています。 ライトテーマ。随分印象が違います。 AppStore.jsはJSONデータを読み込んで各ブロックを並べて表示します。画像とタイトル、説明、タグなどが構成要素になっています。こういった表示を実現したい時に採用したいUIです。 名前の通りアプリストアなどで使ってみると面白いUIです。それぞれに優劣をつけることなく、整頓して並べることで選択しやすくなります。アプリに限らずjQueryライブラリ紹介でも良さそうです。 また
[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall
Demo :Piterest Layout Pinterest風に高さの異なるカードをダイナミックにレイアウト。 Freewallの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript" src="freewall.js"></script> </head> Step 2: HTML カードを包むラッパーを用意します。 <div id="freewall" class="free-wall"> </div> Step 3: JavaScript デモでは、各カードをスクリプトで生成してレイアウトを作成しています。 <sc
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
100 Tiny CSS Tools & Apps for Web Designers — Speckyboy
Each of these free web-based tools and apps have been built by web designers for web designers. They all offer a time-saving solution to some of those monotonous or even complex CSS tasks you may need to perform from time to time. Without needing to install anything, all you have to do is bookmark, and save them for that day when required. From assessing your website’s accessibility to generating
ScaleOut | Supership
日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。
フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「FlatUI」:phpspot開発日誌
ququplay/jquery-mobile-flat-ui-theme GitHub フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「FlatUI」。 jQueryモバイルのテーマとして利用できます。なんというシンプルで美しいUIなんだろうと思ってしまいました。 デフォルトのjQueryモバイルテーマは見飽きたという方は試してみても良さそう UIはこうしてライブラリがどんどん出てくる、という中で、WEBエンジニアとして出来ることを今後考えなくてはいけないな、と思いますね 関連エントリ スマホの入力が超楽になりそうなjQueryモバイル用のオートコンプリートプラグイン GoogleAnalyticsの結果をjQueryMobileでモバイル端末で表示するサンプル モバイルブラウザでの高速クリックを実現するjQueryプラグイン「jQuery Fastbutton」
メトロライクなUIと大胆なオーバーレイエフェクトが気持ち良い EXPANDING OVERLAY EFFECT / Maka-Veli .com
CodropsでMARY LOUという方が書かれていたんですが、可愛かったのでご紹介。 CSS/JS/で作られていて、デモでは天気予報を作られているんですが、アイコンはフォント。オーバーレイエフェクトもとても良い感じです。 メトロっぽいデザイン、増えてきましたよね。 個人的には結構好きなんですが、色と枠内のバランスをミスると一気に下品な感じになりがちなので結構難しい・・・ ダウンロードも出来ます。詳しく知りたい方はこちら PUTTING CSS CLIP TO WORK: EXPANDING OVERLAY EFFECT / Codrops http://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/ メトロライクなUIと大胆なオーバーレイエフェクトが気持ち良い
[JS]jQueryのプラグイン33+1選 -2012年8・9月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 BigVideo.js MP4などの動画をウェブページの背景いっぱいに配置します。 Video Background サイズ変更可能
2012-02-20のJS: Web Appsフィールドガイド、大規模JS開発、小さなテストフレームワーク
JSer.info #57 - JavaScriptのデザインパターンについて書かれたEssential JavaScript Design Patterns For Beginnersがアップデートされたようです。どのへんが更新されたかについての記事はまだかかれてないので、gitのログを確認するしかないです。(多分そのうちEssential JavaScript And jQuery Design Patterns – A Free New Bookあたりに更新内容が書かれそうな気がします) addyosmani/essential-js-design-patterns - GitHub HTML5ROCKSのリニューアルにともなってAppward’s Field Guide to Web Applicationsという電子書籍風になってるドキュメントが公開されています。こちらもかなり量
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Makisu ~ CSS 3D Dropdown Concept