html、css、jsで作ったシンプルなお知らせリストです。data-show=”3″の値を変更すれば初期表示のリスト数を制御できます。MOREを押した時の動きはgsapで行なっています。 初期表示リスト数を制御する ブ…

GWに何か面白いものを作れないかと思って、スマホの傾き角度によって画像を動かすデモを作成しました。用途は限られてきそうですが、ティザーサイトやLPなどの表現で使えるかも。実装はHTML、SCSS、TypeScript。ビ…

PhotoshopやXDのデザインデータでコーディングする時、例えばテキストボックスを選択して、そのテキストボックスと下のコンテンツのマージンを参照すると、行送りを抜いたサイズを参照するので、参照した余白通りに指定しても…

json-serverでモックサーバーを作っていきます。フロントエンドの開発中にAPIがまだ整備されていなかったりする時とかにサクッと作れて便利です。 まずはlocal環境づくり 今回はwebpackで作成していきます。…

OPPOのスマートウォッチをずっと使っていたのですが最近それが壊れてしまったので、発売以来ずっと欲しかったGoogle製のスマートウォッチ「Google Pixel Watch」を購入しました。購入モデルはGoogle …

何枚か合体しているPDFファイルをスライドショーで表示させるデモです。PDFをcanvasに表示させるためにPDF.jsを、スライドショーはSwiperを使用しています。 PDFをcanvasに書き出す PDF.jsをi…

以前のエントリ「現在位置を取得し、近くのランドマークを探す」のwordpress版です。カスタム投稿（landmark）を作成し、その情報をもとにWP REST APIで取得し描画していきます。今回はプラグインのAdva…

現在位置とjsonデータのランドマーク位置の距離を比較して、50,000m以下のものを結果に表示させます。現在位置が近すぎたり、遠すぎたりする場合は、src/assets/ts/GetNearPlace.tsxの11行目…