タグ

JavaScriptとtipsに関するHOSOIToshiyaのブックマーク (4)

  • 角丸javascriptライブラリ『curvyCorners』を使ってみる

    角丸javascriptライブラリ『curvyCorners』を使ってみる 角丸javascriptライブラリ『curvyCorners』を使ってみました。 配布サイトからダウンロードしてきてrounded_corners_lite.inc.jsファイルをheadで読み込んでください。 <script type="text/javascript" src="rounded_corners_lite.inc.js"></script> 次にbodyに角丸にしたいblock要素をclass属性を付けて配置します。 <div class="myBox"> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> </div> これで準備はO

    角丸javascriptライブラリ『curvyCorners』を使ってみる
  • ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js

    ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js Dynamiclayout.jsはウィンドウサイズに合わせて読み込むCSSファイルを変更できるJavaScriptライブラリになります。 dを使用することにより、リキッドイアウトの幅を広げることが可能です。 設置方法 ダウンロードしたdynamiclayout.jsをhead要素などで読み込みます。 <script src="./dynamiclayout.js" type="text/javascript"></script> ウィンドウ幅に合わせたCSSファイルを用意します。 それぞれのCSSファイルを読み込む際にはtitle属性に ウィンドウ幅が750pxまでの場合の『thin』 ウィンドウ幅が950pxまでの場合の『wide』 ウィンドウ幅が950pxより大きい場合の『wider』 を付けて読み込みます。

    ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js
  • シンプルなスクロール機能

    It's quite often, when navigating through a long document, confusing or disorienting for users to click a link which immediately jumps them to somewhere else in that document. Are they on the same page, on a different page, should they scroll more from here, what's going on? Smooth link scrolling alleviates this a little, by scrolling the page to the new link rather than jumping there directly. Tr

  • 画像に鏡面効果を与えるreflection.js[to-R]

    画像に鏡面効果を与えるreflection.js reulection.jsは画像に鏡面効果を与えるjsライブラリになります。 このライブラリを使用すれば、画像を加工することなく画像の下に鏡に反射したようなエフェクトが追加されます。 設置方法 ダウンロードしたreulection.jsをhead要素などで読み込みます。 <script tyle="text/javascript" src="./reflection.js"><script> エフェクトを追加したい画像のclass名にreflectを設置します。 <img src="[画像]" alt="" class="reflect" /> これだけで鏡面効果が与えられます。 サンプル 初期段階で画像が作るのが困難な場合や、背景が設定されている場合はこのライブラリを使えば効率的に作業ができるでしょう。 rheight20~80のクラス名

    画像に鏡面効果を与えるreflection.js[to-R]
  • 1