人気のあるUIサンプル

• CSS ボタンのホバーアニメ
• ボタンにマウスを合わせた時の斜めに色がつくアニメーションのサンプルです。 CSSのhoverやfocusで発動するボタンのエフェクトのサンプルを用意しました。 デザインで調整をすることが多いため、わかりやすくシンプルなCSSにしています。...
• 2021-01-01 23:05:09

• Threejs 基本的な描画とアニメ
• WebGLを簡単に扱えるJSのライブラリを実装してみました。 まず、Three.jsを読み込みます。 手っ取り早くCDNを利用する場合はこちら [[<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124...
• 2021-01-10 00:41:59

• JS 選択文字の抽出と連携
• 選択した文字の情報をJSで抽出したり、SNSボタンに連携するサンプルです。 ブラウザで文字を選択した状態になると、その値をJSで検知することができます。 選択した文字を抽出したり、その文字を使って他のAPIに情報を連携するサンプ...
• 2021-01-03 17:33:46

• jQuery セレクタでエスケープする文字
• jQueryを使っていて、HTMLのIDやクラスや属性を参照するときに記号がある時の注意です。 少しこんなのあったな、くらいに覚えておきたい内容です。 以下の...
• 2021-01-24 23:22:25

• jQuery ライブラリを使って音をコントロールする
• howlerJSというライブラリを使って、ボタンを押したら音がなるだけのシンプルなサンプルです。 ボタンをjQueryで実装し、音の再生部分をライブラリを利用して実装します。 以下のボタンを押すと、mp3の音が再生されます。 自転車ベル...
• 2021-01-31 19:15:44

• JavaScript 音とアニメーションの連携
• 音が出るボタンを設置し、音に合わせて動きをつけるサンプルです。 このサンプルはjQueryとhowlerJSを使って、音がでるボタンを作り、音から抽出した音の長さを使って、CSSでアニメーションを実装しました。 howerJSというオー...
• 2021-01-31 23:53:53

• CSS 背景が波打つボタン
• ボタンのエフェクトとして、文字の背景の色のついた部分が上下にアニメーションするサンプルです。 ボタンを押した時、何かがアクティブになる状態を表す一つの方法として、ちょっとしたアニメーションを使いたい時があります。 ボタンの背景にGifアニメを置...
• 2021-02-23 13:43:13

• CSS インプットスライダーの加工
• スライドして入力するインターフェースのデザインやデータの取得するサンプルです。 HTMLのinputタグのtypeをrangeにすると、ブラウザのデフォルトのスライドUIが使えます。 ブラウザに依存するUIなので、そのまま使う方何かと安全ではあります...
• 2021-02-23 17:34:49

• JavaScript 別ページのOG情報を取得
• JSでHTMLページのOG情報を取得して、ページ内に表示するサンプルです。通信するページへはアクセス許可があるページに限ります。 同じサイト内で、別のページのOG情報を取得する時のサンプルです。 OG情報とはページをSNSでシェアするときなどに読み込まれるページの概要をまとめた情報で...
• 2021-05-05 18:45:28

• PHP NewsAPIを取得する
• ニュースの情報を取得できるAPIを探していたところNewsAPIというサービスがあったのでPHPで取得してみた。 下記のサービス「NewsAPI」を使って最新のニュース情報を取得する手順の備忘録です。 NewsAPI なお、Node.jsやrubyやPythonでも取得が可能とのこと。...
• 2021-05-08 13:25:30