タグ

2015年7月18日のブックマーク (3件)

  • [JS]シンプルでかっこいいスクロールエフェクトを簡単に実装できるスクリプト -ScrollMe

    スクロールしてビューポートに要素が表示された時に、さまざまなアニメーションを適用するjQueryのプラグインを紹介します。 スクリプトは外部ファイルを加えるだけで、アニメーションはHTMLに記述する簡単実装です。アニメーション用に他のJSやCSSは必要ありません。 ScrollMe ScrollMe -GitHub ScrollMeのデモ ScrollMeの使い方 ScrollMeのデモ ページ全体がデモになっており、その半分ほどをアニメーションgifにしてみました。 要素がビューポートに入った時、全部が入った時、入っている間中などをトリガーにアニメーションが設定できます。 デモのアニメーション ヘッダと打ち出しはスクロールするとフェードしながらスライド、Aboutでは各サムネイルがさまざまなアニメーションで表示、Usageではパネルがフェードしながらスライドして表示されています。 Usa

  • 画像をCSSで斜めにマスクした時の知見 - kojika17

    サイト全体が斜めになったサイトで、画像をクリッピングする必要がありました。しかもレスポンシブWebデザインです。 その時の知見と、利用しませんでしたが、ちょっとしたテクニックを思いついたので、メモとして残しておきます。 画像を斜めクリップにする方法 画像を斜めクリップするイメージは、こんな感じです。 要素を斜めにする方法は、IE9以上から利用できます。 IE8もIEの独自フィルターを利用して頑張ればできるようですが、底が見えない感じだったので、IE8は斜めにせずに対応させていただきました。 要素を斜めにするCSSは、transformプロパティを利用します。 transformプロパティには、いくつかの関数が用意されており、主に「skewY()」を利用し、場合によっては「rotate()」も利用しました。 CSSの記述例 .foo { -webkit-transform: skewY(10

    画像をCSSで斜めにマスクした時の知見 - kojika17
    yuhiisk
    yuhiisk 2015/07/18
  • Jekyll Plugins | Find Plugins for Jekyll Blogs

    Top Contributors matthewowen - 2 cnunciato - 2 LawrenceWoodman - 2 tsmango - 2 stereobooster - 2 Most Forked jekyll_alias_generator - 32 jekyll-tagging - 30 jekyll-scholar - 18 jekyll-tweet-tag - 18 jekyll-asset_bundler - 18 Most Watched jekyll-author-plugin - 10 Simple-Jekyll-Search - 9 jekyll-press - 9 jekyll-scholar - 9 jekyll_alias_generator - 8 Most Starred Simple-Jekyll-Search - 244 jekyll-s

    yuhiisk
    yuhiisk 2015/07/18
    Jekyllのpluginサイト