CSS 背景画像をマスクして左右に動かす 縦長の四角形の中に横長の画像を入れ、左右にアニメーションさせるサンプルです。 横幅を狭いエリアに、横長の画像を配置すると全体に小さくするしかありません。 そんな時、サイズは大きなまま画像の全体を表示するために、アニメーショ... 2021-05-28 13:55:39
JS JSONのサンプル 記事のリストのデータのJSONのサンプル [[ { "post": [ { "id": 1, "title": "enjoy&qu... 2021-05-21 00:04:52
PHP ライブラリを使ってQRコードを生成 QRコードを生成するPHPをライブラリを使って実装するサンプルです。 活用したQRコード生成のライブラリはこちら https://github.com/endroid/qr-code... 2021-05-16 21:23:42
PHP composer [[composer -v]] composerのバージョンを確認 [[composer self-update]] composer自体のアップデート [[composer self-update --rollback]] やっぱり... 2021-05-16 20:49:09
PHP NewsAPIを取得する ニュースの情報を取得できるAPIを探していたところNewsAPIというサービスがあったのでPHPで取得してみた。 下記のサービス「NewsAPI」を使って最新のニュース情報を取得する手順の備忘録です。 NewsAPI なお、Node.jsやrubyやPythonでも取得が可能とのこと。... 2021-05-08 13:25:30
JavaScript 別ページのOG情報を取得 JSでHTMLページのOG情報を取得して、ページ内に表示するサンプルです。通信するページへはアクセス許可があるページに限ります。 同じサイト内で、別のページのOG情報を取得する時のサンプルです。 OG情報とはページをSNSでシェアするときなどに読み込まれるページの概要をまとめた情報で... 2021-05-05 18:45:28
CSS インプットスライダーの加工 スライドして入力するインターフェースのデザインやデータの取得するサンプルです。 HTMLのinputタグのtypeをrangeにすると、ブラウザのデフォルトのスライドUIが使えます。 ブラウザに依存するUIなので、そのまま使う方何かと安全ではあります... 2021-02-23 17:34:49
CSS 背景が波打つボタン ボタンのエフェクトとして、文字の背景の色のついた部分が上下にアニメーションするサンプルです。 ボタンを押した時、何かがアクティブになる状態を表す一つの方法として、ちょっとしたアニメーションを使いたい時があります。 ボタンの背景にGifアニメを置... 2021-02-23 13:43:13
JavaScript 音とアニメーションの連携 音が出るボタンを設置し、音に合わせて動きをつけるサンプルです。 このサンプルはjQueryとhowlerJSを使って、音がでるボタンを作り、音から抽出した音の長さを使って、CSSでアニメーションを実装しました。 howerJSというオー... 2021-01-31 23:53:53
jQuery ライブラリを使って音をコントロールする howlerJSというライブラリを使って、ボタンを押したら音がなるだけのシンプルなサンプルです。 ボタンをjQueryで実装し、音の再生部分をライブラリを利用して実装します。 以下のボタンを押すと、mp3の音が再生されます。 自転車ベル... 2021-01-31 19:15:44