http://2ndidea.com/svg/svg-path-drawing-animation-even-ie/
Media Queries（メディアクエリ）とJavaScriptの連携について - Qiita
レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。 そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。 まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。 NGパターン jQueryのwidthメソッドを使用して判定 OKパターン window.innerWidthプロパティを使用して判定 window.matchMediaメソッドを使用して判定 PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定 contentの値を使用して判定 font-familyの値を使用して判定 NGパターン まずはやって
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
CSSアニメーションを使いこなすために知っておきたい5つのこと - Qiita
はじめに keyframesを使ったCSSアニメーションは描画パフォーマンスが良く、ヌルヌルな動きが簡単に実装できます。 最近旧IEのサポートが切られたこともあり、今後は触る機会もより増えてくるかと思います。 そこでCSSアニメーションをガリガリ使っていく上で、これは覚えておきたい！と思ったことをまとめてみました。何かの参考にでもなれば幸いです。 基本的なプロパティや使い方などは省略します サンプルコードではprefixを省略しています 5つとは単に私が思いついた数なので、深い意味はありません 目次 はじめに 複雑なイージングはChrome Devtoolsで簡単に実装できる イージングはkeyframesの中で細かく再定義できる カンマ区切りでシーケンシャルに表現する コマ送りアニメーションにはsteps()が便利 アニメーションのcallback（イベント）を取得する 終わりに 複雑な
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 アニメーションを使う時に気をつけたい事アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユーザーの注意をひこうとす
SPAで動画を使って大ヤケドした話 - Qiita
tl;dr 気軽に removeChild するもんじゃない。 フレームワーク（Riot.js）は悪くない 概要 動画メインの小規模サイト（厳密にはSPAと言わないかも） スペック 動画は YouTube IFrame API と一部に video要素 を使用 フロントのフレームワークは Riot.js URL制御はRiot.jsのルータを使う バックエンドはSinatra（この記事には関係ない） YouTube IFrame APIで起こった問題 iframeをDOMツリーから切り離すとYouTubeのエラー頻発 <youtube> <iframe if={ page == 'hoge' } id="player" src="~" /> <script> routing (path) { this.page = path } riot.route(this.routing) onRead
JavaScriptで連番画像をコマアニメーション - みかづきブログ その3
JavaScriptをつかってパラパラ漫画のようなコマアニメーションを実装しようとした際、よく使われる3つの方法を比較してみました。 imgタグのソースを切り替える imageタグのsrcを差し替えてパラパラ漫画を実装してます。 ブラウザの仕様、サーバ側の仕様によるとは思うのですが、srcを切り替えるたびにリクエストがはしるというストリーミングのような挙動になってしまったことがあったので、最近はこの実装方法は敬遠しています。 DEMO HTML <img id="img" src="" /> JavaScript (function(win, doc) { "use strict"; var img = doc.getElementById("img"), srcList = [ "http://jsrun.it/assets/m/q/5/0/mq50U.png", "http://jsr
Electronの中華フォントを克服したかった | Airwalker's Blog
Electronでは楽にアプリを作れるのは良いのですが、日本語についてはいわゆる中華フォントが表示されてしまうという問題がありました。 これを解決する方法を見つけた、という記事を元々書こうとしていたんですが、つい最近リリースされたv0.36.0で内部のChromeのバージョンが47に上がったせいか、きちんと日本語フォントで表示されるようになっていました。(たぶんChrome 47と同じくMS P ゴシック) とはいえ、webViewの中身のフォントを外部から変えるといった用途には使えるので一応書き残しておきます。 ローカルのHTMLファイルをロードするようなElectronアプリの場合、通常通りCSSでfont-familyを指定してやればもちろんフォントを変更できます。一方、webViewタグを使って外部ページをロードする場合、当然ながら元のサイト側でフォントが指定されることになりま
JavaScriptでCSSのHSLカラーを使いこなそう - Qiita
JavaScript で CSS の HSL カラーを使いこなそう HSLカラーは色のモーションを作る上でとても便利な色彩設定方法です。何の色であるかは色相、鮮やかであるか色あせているかは彩度、明るか暗いかは明度、という3つのパラメーターで色を表現します。 ▲ HSL色空間 (Wikipediaより)。プログラムによってはHSLと呼ばず、HSVとかHSBとか呼びます。違いは明度を示すHSLの最後のワードを、「L = ルミナンス」「B = ブライトネス」「V = バリュー」といろんな呼び方をしているだけです。 色相(Hue = H)と彩度(Satuation = S)と明度(Luminance = L)という3つのパラメーターはそれぞれは数値で指定します。数値であればプログラムによって制御ができます。つまり、人間に直感的なパラメーターをプログラムで扱うことができるのです。 それでは、色の設定
SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文（for文）、条件分岐（if文）等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。
HTMLでブラウザの表示幅が狭い時にテーブルの右側が切れるのを防ぐ
B! 31 0 0 0 Octopressでブログを書く時に Markdown記法でテーブルを書くことが出来ますが、 そのままtableを使うと幅が大きい時に右側が切れてしまうことがあるので ちょっと調整。 テーブル調整 テーブル調整 やったことはtable要素をscroll: overflowのスタイルを持った div要素で囲っただけ。 ただし、Markdownからテーブルを作るに辺り、 再生時に要素を入れるのが難しいので 表示する時にJavaScriptで入れるようにしました。 Markdown記入時にテーブルの上下に<div>を書いてしまうと 今度はMarkdownとして認識されなくなってしまうので直接書くことは出来ません。 (勿論、テーブルをHTMLで書いてしまうことは可能ですが。) 既に書いてある所も書き換えるのは大変なので安易にJavaScriptで挿入、ということで。 Jav
【Javascript】【HTML5/CSS3】DeferredによるCSS・jQueryアニメーションの連続実行 | Wood-Roots:blog
修正： jQueryアニメーションのところ、わざわざreturn d.promise()でなくてもanimate()はpromise()を返すのでそのままreturnでよかったです。 CSSアニメーションやjQueryアニメーション、さらにそれ以外の様々な動作を順番に実行するような処理を実装したいと思い、Deferredによる実装方法を試してみました。 CSSアニメーションの完了を判断する方法 順番に動作させるためには「処理が完了した」ということを判定しないといけません。 CSSアニメーションは完了時にtransitionendというイベントが発火します。 ※keyframeアニメーションの場合はanimationendというイベントになります。 このイベントに対してresolve()をバインドさせれば、Deferredにより連鎖的な処理を実装できそうです。 ちなみにjQueryのみの場合
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
知らないと損するSassの組み込み関数徹底解剖 | Yuhiisk
Sassを使うにあたって、覚えておくと必ず幸せになれる組み込み関数というものがある。 自分で定義できる @function とは違い、Sassに最初から備わっているものだ。 Sass自体の機能だから、もちろんCompassなどのフレームワークを使用する際も使うことができる。 普段Sassを使っているひとでも、Sassの組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。
Apache Cordova(PhoneGap)開発におけるTips - Qiita
はじめに Cordova(PhoneGap)を使って、smartFX Virtual Tradeをネイティブアプリとしてリリースしました。 前回Cordova(PhoneGap)を使ったネイティブアプリ事例は概要でしたが、今回は実装のTipsを紹介します。 js、cssを動的に差し替える WebViewを使う利点として、バイナリを更新せずにアプリの動作を変更できるという点があります。 ただ、単にリンク先のjsの内容を書き換えても以前のファイルのcacheを参照する可能性があったり、逆に毎回最新のjsを取得するのはパフォーマンスが落ちるという問題があります。 これを回避するために、最新のJS、CSSのパスが記述されている小さなjsを毎回取得し、そこに記載されているjs,cssをロードするという方法を考えました。 //var JS_PATH="http://192.168.1.77:3000/
これ１つで驚くほどアクセス数が増えた！誰でも簡単にできる固定ソーシャルボタンの設置方法とは？ - サラリーマン休日副業で月10万円以上目指すページ
すでにお気づきの方も多いと思いますが、最近ブログのデザインを多少修正しています。 はてブやTwitter等のソーシャルボタンは各サービスごとにデザインが異なり、何となく統一感がありません。 今回のデザイン変更はソーシャルボタン周りのデザインを統一化し、よりユーザクリックを誘いやすいようボトム位置に固定化しました。 この効果はてきめん！ ブックマーク率は従来比で2倍以上に。 皆さんにも是非ご紹介したいと思いましたので、記事にしてみます。 設置方法 下記のソース群をあなたのブログに追加するだけです。 ソーシャルボタン画像はのらねこさんのページのものを使用させていただきました。 CSSソース あなたのブログのCSSに下記を追加してください。 .social-button { display:none; width:90%; max-width:900px; height:0; margin:0
パララックスサイトの基本的な作り方 1/2！
こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 準備をしよう！htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう！スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0
少しのコードで実装可能な20のWordPress小技集
少しのコードで実装可能な20のWordPress小技集CSSの小技やjQueryの小技、スマートフォン対応など、これまで様々な小技集を紹介してきました。そこで今回はWordPressの小技を紹介しようと思います！基本から応用まで、簡単なコードで設置可能なので、WordPress初心者さんでも大丈夫！みなさんのサイトに合わせてカスタマイズしてくださいね！ 1. カスタムメニューの設置カスタムメニューを使えるように設定しておくと、管理画面からドラッグ＆ドロップでメニューの追加や配置変更ができてとっても便利。私の場合必ず利用する機能のひとつです。 まずは functions.php に以下のコードを追加して、カスタムメニューを使えるようにします。functions.php がテーマフォルダ内にない場合は新規作成してください。 add_theme_support( 'menus' ); 続いて管理
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Riot+Gulp+Browserifyで時計サンプルを動かす - Qiita
emiac-works.com
