GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースのまとめ
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースを紹介します。 当ブログでもよく紹介しますが、見逃していたものがありました。 1年間分、52個もあるので、時間のあるときにチェックしてみてください。 The 52 most popular projects from the last year of Trending Projects by Iain Freestone 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私を注目をあつめたプロジェクトをキュレーションしており、人気があるWeb開発プロジェクト10個を紹介するニュースレターを毎週、配信しています。この記事では、ここ1年間に配信した各ニュースレターから最も多くクリックされたプロジェクトをリストアップしました。 ニュ
Animon
Animate elements entering the viewport Animon gets out of the way and allows you to describe animations using class names and data-attributes. Based on intersectionObserver, Animon weighs only 0.9kb, with zero dependencies. Learn how to use it. Usage Import the library and its styles from a CDN: <link rel="stylesheet" href="https://unpkg.com/animon@1.0.1/dist/animon.css"/> <script src="https://unp
CSS will-changeプロパティについて知っておくべきこと | POSTD
はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 : 森のコーディング
2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、 どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css → 768pxで切り替えたい → @media screen and (max-width: 768px) → ちゃんと768pxで切りかわる js → 768pxで切り替えたい → if($(window).innerWidth() < 768){ → 78
進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
JavaScriptで制御しているCSS3のtransitionを途中で中断させる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアチームのづやです。 CSS3のtransition便利ですよね。 JavaScriptから制御してると、jQueryでanimateをstopさせるときみたいに途中で動きを止めたいことがありました。そんな時どうすればいいかわからなかったので、調べてみました。 JavaScriptから制御しているCSS3のtransitionを途中で中断させる方法 動かしてるstyleを上書きしてしまう これが一番ベターっぽい。中断したいタイミングで対象となってるstyleを上書きすると止まってくれるようでした。 <!-- こんな要素があって --> <input type="button" name="start" id="start" value="開始"><br> <input type="button" name="stop" id="stop" value="停止"><br>
びよ〜んと弾むのが気持ちいい！タブレット・スマフォで使いたいナビゲーション -Bounce Menu
タップすると、びよ〜んと弾んでナビゲーションが表示されるタブレット・スマフォ向けに実装してみたいナビゲーションを紹介します。 Bounce Menu 左下をタップで動作します。 実装はこんな感じです。 HTML <div class="device"> <div class="screen"> <div class="menu"> <ul> <li class="lock"><a href="">Lock</a></li> <li class="share"><a href="">Share</a></li> <li class="download"><a href="">Download</a></li> </ul> </div> <div class="toggle"> <div class="x"></div> <div class="y"></div> </div> <div cl
一歩進んだHTML/CSS/JSを目指すために | 1000ch.net
2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
IE6〜8でCSS3セレクタ利用「Selectivizr」
CSS3セレクタを使う上で問題となるのはやはりIEです。HTML5 & CSS3 Supportで確認すると、IE6～8はほとんど対応できていないことが分かります。 そんなIEでもCSS3セレクタを使えるようにするのがSelectivizr.jsです。詳しく紹介されているサイトがあまりなかったのでご紹介。 Selectivizrの設置方法 ここで提供されているselectivizr.jsとJavaScriptライブラリを外部ファイルで読み込むだけで、CSS3セレクタがIE6～8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。 <script type="text/javascript" src="[JSライブラリ]"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascr
[CSS]大きい画像をブラウザのサイズに合わせて背景に表示するスタイルシート
CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。 Perfect Full Page Background Image 下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。 実装の要件 前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。 それを踏まえ、以下の条件をクリアさせます。 ページは画像でいっぱいに、余白は無しで 画像の大きさは自動調整 画像の比率は維持 画像はページ中央に 画像はスクロールさせない クロスブラウザ対応 一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。 二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要と
クロスブラウザで display:inline-block させる jQuery プラグインを作ってみた - Cyokodog :: Diary
更新履歴 2009-11-11 ご要望があったので jQuery.exInlineBlock.js の圧縮版をダウンロードできるようにしました。 CSS には display:inline-block というボックス要素を横並びに配置させる機能があります。 通常のボックス要素（diplay:block）は、横に伸び、縦に縮む性質があり以下のように段積みになります。 幅を指定してサイドに空間を設けても、ブロック要素なので段積みになります。 inline-block の場合は、横にも縦にも縮む性質があり、span や a の inline 要素のように要素を横並びにします。 inline 要素と同様、親（先祖）要素で text-align:center とすればセンタリングもされます。 画面のレイアウトやパーツを配置する上でとても便利な機能ですが、IE6/7 、 Firefox2 以下ではこの
web-conte.com | blue | Lightbox JS v2.0 と Flash
web-conte.comでも画像の拡大表示時に使っている「Lightbox JS v2.0」。これ、ページ内にFlashが同居していると厄介なのである。自分のサイト（ここ）だとそもそもFlashを置いていないから気づきにくい問題なのだが、先日あるサイトを作っていてこのことに気づいた。Flashオブジェクトは z-indexなどの指定を無視し、基本的にドキュメントの最前面にあるように表示されてしまうため、Flashだけは背景に追いやられず、Lightboxで拡大表示させた画像のさらに手前に出てきてしまう。 このことの解決策はひとまずあって、たとえば「小粋空間: Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す」などの解説が丁寧だ。要は、Flashを埋め込む際の記述のひとつに「背景を透過する」という命令にあたるものがあって、それを書き加えてやればいい。
jQuery Tutorials for Designers
This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don’t know about jQuery, it is a "write less, do more" Javascript library. It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I’m not going to get into the detai
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]@importを利用してクロスドメイン通信するスクリプト -CSSHttpRequest | コリス