レスポンシブ用に画像の表示幅・高さを変更する際に、その画像の主題にフォーカスエリアを設定し、そのエリアを中心に画像を表示できるスクリプトを紹介します。 フォーカスエリアは、それぞれの画像ごとに異なる指定が可能です。
![[JS]一歩進んだレスポンシブ用の画像配置！見せたいエリアを中心に配置を美調整するスクリプト -ResponsifyJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/a809e86259b72db3d0f0346bf48e65e038b82a7d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015113001.png)
[JS]一歩進んだレスポンシブ用の画像配置！見せたいエリアを中心に配置を美調整するスクリプト -ResponsifyJS
レスポンシブ用に画像の表示幅・高さを変更する際に、その画像の主題にフォーカスエリアを設定し、そのエリアを中心に画像を表示できるスクリプトを紹介します。 フォーカスエリアは、それぞれの画像ごとに異なる指定が可能です。
[JS]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js
スマホアプリやWebアプリのプロトタイプやデモの操作を見せる時などに、スマホでのタップやデスクトップでのクリックを表現する波紋のアニメーションを簡単に実装できるスクリプトを紹介します。 ランディングページや使い方ページでこういうのよく見かけますね。 TouchPoint.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="touchpoint.min.js"></script> </body> Step 2: JavaScript タッチポイントの対象にしたいDOM要素を指定して、スクリプトを実行します。 プロトタイプであれば、「window」でいいでしょう。 <script> TouchPoint.init(window); </script> エレメントを指定したり、波紋のカラーや
![[JS]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/46be404c8d2f64ff7f9750d80ed6af78be5437ce/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080501.gif)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
