ページサイドにカッコよく表示できるLightBox「Strip」:phpspot開発日誌
Strip - A Less Intrusive Responsive Lightbox ページサイドにカッコよく表示できるLightBox「Strip」 LightBoxといえば画面の中央に表示されて当たり前という感じですが、こちらはページのサイドにカッコよく表示され、LightBoxというよりこれは新しい、という印象を持ってもらえる画像・動画等の拡大スクリプトがStrip。 なかなかオシャレかつ使いやすいギャラリーが実装できます。 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 6KB以下の超軽量でフラットなLightBox実装jQueryプラグイン「Featherlight」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」
フルスクリーンのパノラマ画像サイトが作れる「leanorama」:phpspot開発日誌
leandigo/leanorama GitHub フルスクリーンのパノラマ画像サイトが作れる「leanorama」 空間を自動で回転させるサイトを作る際に使えそう。実装サイトはインパクトがなかなかあります 関連エントリ ページを複数枚重ねたようなフルスクリーンページが作れる「pagePiling.js」 画像をフルスクリーンに拡大できるギャラリー作成jQueryプラグイン「fullsizable」 レスポンシブなフルスクリーンでスクロールするページが作れる「brock scroll」 フルスクリーンで縦横無尽に広がるページを構築できる「fullContent.js」 フルスクリーンのスライドを簡単に作れるjQueryプラグイン「FSVS」
» 高さで文字数を制限するプラグイン[textCut.js]を作ってみる | isee ウェブに関するブログ
textCut.js まずは、仕様やオプションを考える 何文字以上を超えたら「…」にする。とういのはよく見かけるかと思います。 一番お手軽にやるとしたらCSSの「text-overflow: ellipsis;」と「white-space: nowrap;」を使うったやり方です。はみ出した文字を「…」にすることができますが、 一行の場合にしか対応できません。 今回のプラグインでは、厳密に何文字というよりも、指定した高さを超えた時に末尾を「…」に変換するように作ってみたいと思います。 高さを条件とするので、複数行の場合でも対応することができます。 オプション cutHei 制御する高さ afterText 末尾に追加する文字 data-textCut-link 要素にdata属性でリンク先を指定 blank リンクを別タブで開く true:false textCut.js /**文字カットプ
![» 高さで文字数を制限するプラグイン[textCut.js]を作ってみる | isee ウェブに関するブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/aec6314ec9473ded4223ca56ceddbbc62995532f/height=288;version=1;width=512/http%3A%2F%2Fisee-web.net%2Fwordpress%2Fwp-content%2Fthemes%2Fisee%2Fimages%2Ffacebook_isee.png)
背景画像を指定要素のサイズにフィットさせられる「jquery.background-fit」:phpspot開発日誌
thingsym/jquery.background-fit GitHub 背景画像を指定要素のサイズにフィットさせられる「jquery.background-fit」。 通常背景画像を設定すると要素サイズに関わらずリサイズすることは難しかったですが、こちらのプラグインを使えば簡単。 画面サイズを変更したとしても背景がフィットし、レスポンシブなデザインにも使えそうです 関連エントリ 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 オシャレでモダンな背景画像パターン集「The Pattern Library」 かっこいい黒のリアルなカーテンっぽい背景画像をSVG描画できる「waterpipe.js」
Unheap - A tidy Repository of jQuery Plugins & JavaScripts
Another great gem from Zurb. What if you wanted to make a user aware of a piece of content long before their mouse directly hovers over its element? Perhaps it was a piece of content that a user would have never otherwise hovered over (thus rendering all that CSS you styled on the :hover of your class forever invisible to your user). What is a designer/developer to do? Reactive Listener allows us
Velocity.js
Overview Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.veloci
クリッカブルマップもレスポンシブにするjQueryプラグイン「Responsive Image Maps」:phpspot開発日誌
クリッカブルマップもレスポンシブにするjQueryプラグイン「Responsive Image Maps」 2014年03月20日- esponsive Image Maps jQuery Plugin クリッカブルマップもレスポンシブにするjQueryプラグイン「Responsive Image Maps」 クリッカブルマップ、といえばHTML入門時には面白そうと思ったわりに設定が面倒なのであまり使わなくなったという方もいるかもしれませんが、あのクリッカブルマップをレスポンシブにするjQueryプラグインだそうです。 リサイズ時にクリッカブルマップのデータを再計算してマッピングしてくれるようです。 タッチ型デバイスでは意外と使えそうなこの機能。 この際に再度利用法を検討してみるのもよいかも。 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「Veno
1000ch.net
Posts2024.04.24 DX Criteria for Web Frontend の公開に寄せて2024.04.07 カスタム要素の状態を定義する CustomStateSet と参照する擬似クラス :state()2024.03.31 東京さくらマラソンで 10km を完走した2024.03.28 ダークモードの再実装と日本語のフレーズ改行2024.03.22 Web Share API を使った共有機能とフォールバック2024.03.11 工作室もくもくはりねずみで World ID の虹彩認証をした2024.02.21 オンライン英会話の学習時間が 30,000 分に到達した2024.02.17 アミノバイタル presents 荒川ハーフマラソンを完走した2024.01.14 Google のソフトウェアエンジニアリングを読んだ2023.12.31 2023年の振り返り20
jQueryMobile - DateBox Demo
jQuery-Mobile-DateBox DateBox is a small, android-esk date picker, using as many of the native jQueryMobile controls as possible. This is based in part on the work of Todd M. Horst, and his Android Like Date Picker 2 DateBox Features Auto-parses text entered into form element on open [any valid date string in your browsers locale, uses javascript:Date()] Input items on DateBox are directly editabl
ygoto3.com
現在開発担当している AbemaTV で、昨年末にパナソニックさんのスマートテレビ VIERA 向けにアプリケーションをリリースしました。AbemaTV リモコンボタンで AbemaTV にアクセスできます。今回このアプリケーションの UI を開発するにあたって、新しいデザインワークフローを導入しました。 本記事では、 Story-Assured Design というデザインワークフローを、現在プロダクト開発で直面しているデザインの課題とともに紹介します。 Story-Assured Design とは？ Story-Assured Design はその名前が示しているように、ユーザーストーリーを保証することを目的とした UI デザインのワークフローです。UI デザインを３つのステップに分けて行います。 ストーリーデザイン デザインの構造化 視覚情報デザイン 一番重要なユーザーストーリーの
How to Make a Digital Clock with jQuery and CSS3
It all started last week when I saw this pretty dribbble shot. I immediately felt the urge to convert it into a working clock and share it with Tutorialzine's readers. If you'd like to learn how I made it, read on! Update: The second part of this tutorial is now live! There we are adding support for setting alarms with HTML5 audio. Read it here. The Markup The clock doesn't need a lot of HTML. Thi
Ginpen.com | Powered by JavaScript and JapaneseSushi
JavaScript and Web by Ginpei
Smooth Diagonal Fade Gallery with CSS3 Transitions
In this tutorial we are going to create a gallery with a smooth diagonal fade effect, powered by css3 transitions. It will scan a folder with photos on the server and display them in a grid that spans the entire browser window. Adding new photos is as easy as copying two files (a regular image and a thumbnail, preferably 150x150 px) to the gallery folder. CSS3 capable browsers will show a smoothly
Sidr
SidrThe best jQuery plugin for creating side menus and the easiest way for doing your menu responsive You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too). It uses CSS3 transitions (and fallbacks to $.animate with older browsers) and it supports multiple source types. Get startedLike any other plugin, you must inc
フェードイン・フェードアウトを用いた気持ち良いページ変遷を実現する方法
ギャリーサイトで見つけた名古屋のデザイン会社さまのWebサイト。 鞍知 on 鞍知［クラッチ オン クラッチ］ デザインもクリーンで良い感じなのですが、特に良いと思ったのがページ変遷のときのアニメーション。リンクをクリックするとページがフェードアウトし、ローディング画像が表示、そしてリンク先のページがフェードインしてきます。これがとても気持ち良い。 ということで、このブログにも軽く実装してみたので、その方法をご紹介。 jQueryのanimate関数を使って実装します（てことでjQuery本体も読み込んでくださいね）。下記のコードをhead内にコピペでいけるかと思います。 // まずbodyを非表示に jQuery('head').append( '<style type="text/css">body{display:none;}</style>'); jQuery( function(
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tradestoneconfections.com
【ハピスタ】フォトスタジオ・家族写真・子供写真・七五三・入学・卒業・マタニティ
Loading...
html5-memo.com
