hachi09のブックマーク - はてなブックマーク

スマホに適したlightbox系javascriptプラグイン「PhotoSwipe」 | スターフィールド株式会社

var initPhotoSwipeFromDOM = function(gallerySelector) { var parseThumbnailElements = function(el) { var thumbElements = el.childNodes, numNodes = thumbElements.length, it ems = [], figureEl, linkEl, size, it em; for(var i = 0; i < numNodes; i++) { figureEl = thumbElements[i]; // <figure> element // include only element nodes if(figureEl.nodeType !== 1) { continue; } linkEl = figureEl.children[0]; //

hachi09 2016/02/08

リンク

【jQuery】CSS3のTransform3DでGPUによる滑らかなアニメーションを実装しよう【CSS3】 | スターフィールド株式会社

スターフィールド株式会社 > Blog > 制作 > css3 > 【jQuery】CSS3のTransf orm3DでGPUによる滑らかなアニメーションを実装しよう【CSS3】 jQueryを使うと、手軽にアニメーションを実装することができて、とても便利です。しかし、jQueryによるアニメーションは処理がどうしても重くなります。特にスマホなどでは、元々アニメーションがネイティブアプリのUIに多く使われているため、 jQueryによるアニメーションがもっさりとした動きに感じることが多いのではないでしょうか。 jQueryのアニメーションは、通常CPU(コンピュータの総合的な演算装置)により処理されています。 CPUは元々画像処理だけに最適化されたものではない上に、アニメーションだけでなくコンピュータ全体の演算を担っているため、 CPUでアニメーション処理を行うとどうしても処理が遅くなっ

hachi09 2015/05/27

リンク

初心者は意外と使っていないかもしれないCSSの指定の仕方 | スターフィールド株式会社

前回cssの優先順位の記事を書きましたが、今回はcssの指定の仕方です。本当はこっちを先に書くべきでしたね笑まずは説明するために必要な用語の説明をさせていただきます。要素と属性 cssを適用させたいhtmlを説明するうえで「要素」と「属性」を理解する必要があります。下記の図になります。 htmlのタグで囲んだものが「要素」そのタグに、href,title,target,id,class等の付属されたものが「属性」となります。セレクタ cssファイルで記述する場合、「要素」を指定する際に用いるのが、セレクタです。下記の赤い箇所がセレクタになります。この3つの言葉を元に説明していきたいと思います。 (この言葉が正しいものかどうかは保証できません・・・) cssの指定方法本当に基礎的なものは、タイトルに習い省かせて頂きます。 1.連続のセレクタ指定【css】

hachi09 2015/02/26

リンク

SVGとCSS3でできる筆記体のアニメーションをやってみる | スターフィールド株式会社

SVGとCSS3を使った線画によるテキストのアニメーションの方法が紹介されていました。想像していたよりも、ずっと簡単にできることがわかりました。こちらの方法を少し応用して筆記体のアニメーションをやってみましたので、ご紹介いたします。 ↓参考にさせていただいたサイト SVG線画が美しいリッチアニメーションの作り方 ↓作ってみたもの DEMO 方法基本的な方法・手順は参考サイトと一緒です。 1. Illustratorを使い、筆記体のフォントを、ペンツールを使って一筆書きのパスとしてトレースする Illustratorでモデルとなる筆記体のフォントでテキストを配置し、ペンツールでトレースします。このとき、パスは途中で切らずに、一筆書きの状態になるよう、1つのパスでトレースします。ただ、実際の筆記体のように、t, fの横線は別のパスとして作成し、 iの点の部分は星形のパスとして作成し

hachi09 2015/01/20

リンク

よく使用している汎用的で簡単なjQueryのコード | スターフィールド株式会社

僕がよく使用しているjQueryで汎用的なコードを紹介します。 jQueryで簡単に実装できるので、プラグインなんかを使用するよりは、自分で書いた方が、ごちゃごちゃせずに済んで良いと思います。・ドロップダウンメニュー・アコーディオンコンテンツ・ページ内スクロール全部実装したサイトがサンプルでありますので、そちらもご覧ください。 DEMO まずは、ドロップダウンメニューシンプルに、メニューにホバーすると、その下のメニューがアニメーションして出てくるというものです。サンプルサイトでは、[about][service][product]の部分になります。 jquery //グローバルナビをドロップダウンで表示 $(function(){ $("#globalnavi li").hover( function(){ $(this).children("ul").slideTogg