タグ

JavaScriptに関するmasamitsu_sのブックマーク (3)

  • [JS]このホバーエフェクト楽しい!シールのようにぺらっとめくるスクリプト -Sticker.js

    写真画像やアイコンなどを配置したベタ塗りのボタンなどをサークル状にし、ホバーするとシールのようにぺらっとめくれるようにするスクリプトを紹介します。 実装は非常に簡単で、jQueryなどの他のスクリプトは必要ありません。 Sticker.js Sticker.js -GitHub Sticker.jsのデモ Sticker.jsの使い方 Sticker.jsのデモ デモはChrome, Safari, Firefox, Opera, IE10+でご覧ください。 上記のアニメーションは左からのぺらっですが、上下左右の全ての方向からぺらっができます。右のベタ塗りはめくるとシャドウが半透明で適用されます。 Sticker.jsのフッタ 最初のデモは写真画像なのでカーソルはアローですが、フッタのはリンクなのでポインターになっています。 Sticker.jsの使い方 Step 1: 外部ファイル 当ス

  • サービス終了のお知らせ - NAVER まとめ

    サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

    サービス終了のお知らせ - NAVER まとめ
  • まるで本物!雨粒が窓に落ちる様子をリアルに再現·rainyday.js MOONGIFT

    rainyday.jsはJavaScript製、GPLのオープンソース・ソフトウェアです。 コンピュータ上で自然現象を再現するのはとても面白い試みです。例えば物理エンジン、ライフゲームもその一つです。今回はWebブラウザ上で雨が窓にあたる様子を再現するrainyday.jsを紹介します。 背景はぼやけ、曇ったガラスに雨があたっていく感じが再現されています。 中央の枠はYouTube動画の再生ができます。 時間が経つと雨粒が増えていきます。 雨で窓が曇っている感じがうまく再現されています。 雨は垂直だけでなく、斜めに降らせることもできます。 rainyday.jsは背景を曇らせるのはもちろん、雨粒が落ちるところは曇りがとれて向こう側が見えるようになるなど細かい所にもこだわって作られています。さらに雨粒自体も背景の写真を透かしていて物そっくりです。 コンピュータと異なり、自然現象はランダムな

    まるで本物!雨粒が窓に落ちる様子をリアルに再現·rainyday.js MOONGIFT
  • 1