夢の中の景色のようなDreamy blurエフェクトをCSSで実装する
Result 映画等でよく見かける演出で、夢の中にいて、ちょっとボヤけるような景色っぽい表現「Dreamy blur（参照：Youtube）」エフェクトをCSSで実装する、というもの。 具体的にはbackdrop-filterが採用されています。参考記事先でも最初はmix-blend-modeを使ったようで、個人的にも初見はそう思ったけど必要ないみたいです。 csspicture { position: relative; display: block; } picture::after { content: ''; position: absolute; inset: 0; backdrop-filter: blur(3px) opacity(.5) brightness(1.3); }brightnessは明るさの度合いを調整します。 html<picture> <img src="u
画面を斜めに分割して2つの動画を表示する
Result 画面を斜めに分割して動画を2つ同時に再生するサンプルです cssbody { background-color: black; overflow:hidden; } .parent { position: relative; height: 100vh; width: 100vw; } .video { position: absolute; top: -8px; left: -8px; width: 100%; height: 100vh; background-position: center; background-size: cover; overflow: hidden; } .clip-video { clip-path: polygon(99.9% 0, 0 99.9%, 0 0); } .clip-video-reverse { clip-path: poly
PNGファイルを軽量化する・「UPNG」
UPNGはPNGファイルを軽量化するためのツールです。アップロードすると即軽量化してくれる高速さが特徴で、軽量化後のクオリティも設定できます。画質のクオリティを下げれば（劣化させれば）より軽量化できます。プレビューも出してくれるので見ながら調整できる点も良いですね。 UPNG
リストを任意のカラム数に分ける
Result 普通のリストを任意のカラム数で分けます。現在は3カラムに分けられています。 var num_cols = 3,の数値を変更すれば設定したカラム数に分けられます。 マークアップには変更を加えず処理出来るので覚えておけば何かと重宝すると思います。 jQuery$(function($) { var num_cols = 3, //対象のリスト container = $('.split-list'), listItem = 'li', listClass = 'sub-list'; container.each(function() { var items_per_col = new Array(), //リストのチェックと分割 items = $(this).find(listItem), min_items_per_col = Math.floor(items.length
いろいろな切り抜き画像のみを配布する素材配布サイト・「StickPNG」
StickPNGはいろいろな切り抜き画像を配布するWebサイトです。動画作成者に提供する目的で作成したそう。内容なフルーツとか服飾、飲食物やデバイス、家具、スポーツなど様々ある他、ちょっとグレーと言うかブラックなもの（セレブの画像等）も含まれています。この辺りは著作権を保有している方が連絡してくれたら削除するそうです。それが良いかどうかは米国の著作権法を細かく知らないので判断しかねますが、一応危なそうなモノは使わないほうが無難そうですね。それはさておき、他のオブジェクトの切り抜き画像は便利と感じる方もいるんじゃないかなぁと思います。 StickPNG
サウンドインタラクションを追加する為のシンプルなJavaScriptライブラリ・「Loud links」
Loud linksはWebコンテンツにサウンドインタラクションを追加する為のシンプルなJSライブラリです。audio属性を使うみたい。非依存型で軽量なのは良いですね。音源を用意して特定のclassとカスタムデータ属性を追加すれば該当する要素にサウンドインタラクションを追加する事が出来る、との事。音を出すのはいささか抵抗がある方も少くはないと思いますが、レイアウトやUIだけで解決できない問題もサウンドインタラクションで解決出来るケースもあります例えばエラーを気づかせるのが困難なな複雑な送信フォームでも、小さなエラー音を出すだけでもユーザーにハッとさせる事も出来るかもしれません。使い所の問題ですね。個人的にも以前は音＝完全NGという先入観を持っていたのでもう少し柔らかい思考で臨みたいところです。 Loud links
CSSのみでYoutubeにオリジナルのフレームを加えてみる
実用性の無いネタ的な内容です。 JavaScript等を使わず、CSSだけ でYoutubeのフレームを作ってみ ます。CSSだけで作ったからどう、 という訳ではないですけど・・ 実用的な内容じゃないので適当に流してくだされば幸いです。 デモまずはデモから。Chrome以外では確認してないしフレームも適当ですのでその辺はスルーでお願いします。 再生できましたでしょうか。 方法は多分すぐに分かったと思いますけど、一応解説的なものを書いてみます。 Youtubeをz-indexに対応させるYoutubeは通常z-indexを指定しても一番上に来てしまいます。ナビゲーションなどをposition:fixed;しているサイトなどでスクロールするとYoutubeだけ一番上を通ってしまう光景を見たこともあるのではないでしょうか。 これを、ちゃんと下に通るようにする、z-indexに対応させるにはYou
Youtubeからgifアニメを作れる・「GIFFFFR」
GIFFFFRはYoutubeの動画をgifアニメ化し、ダウンロードできるツールです。URLを指定すると、動画が読み込まれ、動画の時間やサイズ等を指定すればいいだけ。ただ、サイズや動画の長さ次第ではかなり作成に時間がかかるので作成時にはお気をつけ頂いたほうが良さそうです。ただ、手軽は手軽ですね。 GIFFFFR
WordPressでページ毎にbodyタグのidを振る - かちびと.net
久々にWP関連の記事。bodyに、 ページ毎にユニークなidを振る というもの。body_classを使え ない状況、使いたくない理由が ある場合等の代替方法として、 またはidにしたい場合などに。 body_class()以外の代替案です。自分用メモ。 コード $body_id =""; if ( is_single() || is_page() ) { $body_id = ' id="'.$post->post_name.'" '; } else if ( is_category() ) { $category = get_the_category(); $body_id = ' id="category_'.$category[0]->category_nicename.'" '; } ページ名やカテゴリ名を取得します。で、 <body <?php echo $body_id; ?
要素を無限スクロールさせるjQueryプラグインいくつか - かちびと.net
必要になるかも知れないので、 今のうちにかき集める作業です。 よくみる無限スクロールサイトを 実装できるjQueryプラグインです。 あんまり使ったこと無いので 注意点なんかのメモ書きもして おきます。 というわけでいつもの自分用メモなので、これから触る用のまとめです＝オススメプラグインとかじゃないです。無限スクロールと言っても要素が無くなれば止まります。当たり前ですが。 Tumblrとかギャラリーとかでよく見かける無限スクロールを実装できるやついろいろ。WPデザインギャラリーでも実装していますが、これは5509氏のプラグインによるものです。便利っすー。 infinite scroll jQuery Masonryっていう、boxを段々にするやつと一緒に使ってるのを以前実装しました。結構よかった。WPプラグインもあるみたい。 infinite scroll Endless Scroll ち
カウントダウン終了後に任意のコードを実行できる軽量jQueryプラグイン・jquery-countdown - かちびと.net
カウントダウンタイマーの実装と 終了後に任意のイベントを発生 させられるjQueryのプラグイン、 jquery-countdownのご紹介です。 たまに見かけるやつですね。使用 頻度は高くは無さそうですけど。 ローンチ前のComing soonページなんかでたまに見かけるやつです。スクリプトも軽量です。 カウントダウンアニメーションを実装します。終了後にコードを実行させる事も出来ます。時計部分はCSSスプライトを利用した画像を使用しているようです。 動作サンプル サンプルです。再生ボタンで動作テスト出来ます。 日をまたぐようなカウントダウンならもう一工夫必要ですね。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <
画像をFacebookやTwitter等のソーシャルサービスに投稿できる様にするjQueryプラグイン・Slingpic - かちびと.net
画像のみをシェア出来るようにするjQueryのプラグイン、というかWebサービスのご紹介です。プラグインではあるんですけどCDNで提供している、みたいなやつ。 画像を様々なソーシャルサイトで共有出来る様にするためのjQueryのプラグインです。ファイルをDLするのではなく、CDNを使って導入するのでタイトルは語弊があるかもしれませんけど、語彙に欠けるせいか上手い言葉が見つかりませんでした。御免なさい。 上図を見ればどんなものかはおおよそ把握出来るかと思いますが、マウスホバーでシェアボタンが表示されるようにする、というスクリプトです。 Sample 動作サンプルです。 コード 上記のようにCDNをコピペさせるページがあるのでそのまま使います。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.
商用利用も可能の、フラットなデザインのアイコンを大量に配布するWebサイト・Icons DB
フラットでシンプルなデザインのアイコンを大量に配布しているIcons DBのご紹介。全て商用利用が可能で、帰属表示も不要との事です。サイズもかなりの種類で用意してくれているので、テイストが合うならいいかもですね。 フラットなデザインのアイコンを大量に配布してくれているサイト。著作権は以下のような感じらしいです。 All icons can be used freely in both personal and commercial projects with no attribution required, but always appreciated. 全てのアイコンは商用利用も可能で帰属表示も要らないそうですが、著作権を放棄したわけではないとの事なのでその辺だけご注意です。 使いやすそうなアイコンが沢山あります。カテゴリもかなり多い。 サイズも8種、フォーマットも4種揃っていて、色違い
サイドからパネルがスライドインする - かちびと.net
Result jQuery //クリックイベント $('.open').click(function() { //パネルをアニメーションでトグル出来るようにする $("#panel").animate({width: 'toggle'}, 300); }); css #panel { height: 600px; width: 200px; padding:20px; background: #eee; float: left; display: none; color: #666; font-size: xx-large; } .open { height: 20px; width: 70px; background: #666; padding:20px; float: left; margin-top: 200px; color:#fff; } html <div id='panel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
任意の要素をドラッグ移動出来るようにする軽量スクリプト・「dragmove.js」
ブラウザでSVGを編集、ダウンロード出来るWebサービス・「Vecteezy Editor」
複雑なアニメーションにも対応できる、パフォーマンス重視のJavaScriptアニメーションエンジン・「KUTE.js」
各ソーシャルサイトの共有ボタンを作成、コードをコピー出来るOSS・「Sharingbuttons.io」
CSSアニメーションのループ間にdelayを挿入してくれるWebツール・「WAIT! Animate」
Illustratorのデータをcanvasに変換する・「Ai to Canvas」 - かちびと.net