タグ

jsに関するyayocanのブックマーク (5)

  • simpleParallax.js - a JavaScript library for parallax effects

    orientation-String-see exampleThis is the orientation (or direction) of the parallax effect. Choose up and when scrolling down, the image will translate from the bottom to the top (so the image will translate up). When scrolling up, the image will translate from the top to the bottom. Same logic apply for all others orientations (right, down, left, up left, up right, down left or down right). When

    simpleParallax.js - a JavaScript library for parallax effects
  • imgタグの画像読み込みを監視する - Qiita

    imgタグの画像読み込みを監視する この記事はjQueryの使用を前提に書いています。ご注意ください。 課題 JavaScriptでDOMのレイアウトを操作する場合、DOM内に画像があることで思わぬバグが発生することがあります。特にサイズ指定をする場合に上手くいかないことがよくあると思います。今回はこれを解決します 原因 「画像が読み込まれる前に処理を実行する」が原因です。 そのため、 サイズが取得できない サイズ0で操作している といった状況が発生します。 簡易な対応では問題がある 簡易な対応方法では、windowのloadがあります。 しかしこれでは以下のような問題を抱えています。 表示まで時間が掛かる JSエラーが起きると完了しない。 windowのload関数は、すべての要素が読み込まれてから実行されるため、要素が多いとかなり時間を要します。2番目はSNSボタンなどで発生しやすいの

    imgタグの画像読み込みを監視する - Qiita
    yayocan
    yayocan 2017/07/12
  • Moment.js | Parse, validate, manipulate, and display dates in javascript.

    Moment.js 2.30.1 Parse, validate, manipulate, and display dates and times in JavaScript. Install npm install moment --save # npm yarn add moment # Yarn Install-Package Moment.js # NuGet spm install moment --save # spm meteor add momentjs:moment # meteor bower install moment --save # bower (deprecated) Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format

    yayocan
    yayocan 2016/10/06
    時間や曜日を表示させる
  • CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js - かちびと.net

    久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのようなライブラリに依存しないのも素敵ですね。 地味にいいかも。CSSPrefixerみたいにプレフィックスを付けてくれるWebサービスはいくつか存在しますが、こういうのがあるのは多くの人が面倒だと思っているからですしね。これを、jsで付けようぜ、というのがcssFx.jsです。 何より、将来的にプレフィックスは不要になるので、そのときのメンテナンスもこれにしておけば、外すだけで済むので楽ですよね。 C

    CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js - かちびと.net
  • 最近のJS&CSSアニメーションライブラリまとめ - Qiita

    最近のHTML5アニメーションについてのまとめです。 まとめを紹介する前にCSS3アニメーション vs JSアニメーションのパフォーマンスについての有名な海外の記事を紹介します。 http://davidwalsh.name/css-js-animation 大雑把に内容を要約すると、以下のようなお話です。 - DOMを操作したJavaScript AnimationよりCSSの方が早い - ただしCSSにも色々欠点がある(GPU負荷が大きい、ブラウザの対応とか) 結論: JavaScriptでアニメーションを最適化できるライブラリを使いましょう! この記事で紹介されている最適化を施したJSライブラリはGSAPとVelocity.jsです。大規模なアニメーションでない場合はVelocity.jsがおすすめのようです。 もちろん上記の他にも色々ライブラリは存在し、使用用途により最適なライブラ

    最近のJS&CSSアニメーションライブラリまとめ - Qiita
  • 1