マウスホイールで拡大縮小。ブラウザより大きくなったらスワイプして移動できます。PCオンリーです。スマホには対応してません、マウスホイールが使えないので当然ですが。というかスマホには必要ないですけどね。

さて、拡大縮小する方法にはいくつかありまして、

• 1. 背景画像にしてbackground-size を使用。
• 2. imgタグを使用してwidth、height を％で拡大縮小
• 3. transform の scale を使用。
• 4. transform3D のtranslate Z軸を使用。近づくと大きく遠ざかると小さく見える遠近感を利用。

このサンプルでは3番目のtransform scale を使用しています。
ただし注意しないといけないのは、transform scale はその名の通り拡大するだけなので解像度は同じままなんですね。つまり最初の横幅が100px だとすると10倍に拡大しても100pxのまま拡大されます。
なので、デフォルトの時点でいったん最大まで拡大した画像を10％程度に縮小しています。
このサンプルも見た目は横幅700pxに見えても実は4000px位あるんですよ。バーチャルRetinaですね（笑）

本当は拡大縮小の原点もマウス座標でやりたいんですが、うまくいきません。
すよ。
CSSのtransform の場合、座標の原点が画像の左上にあり、マウス座標を取得しているブラウザの原点とずれている点と、拡大縮小するたびに座標も拡大縮小される2点が大きな原因なんですね。
拡大縮小のたびにずれが変化してズームのオリジナル座標がぶれまくるんですね。
なので現在研究中です。

freeScroll←サンプルです

Google検索順の改善： Googleの検索順位を測定するツールで毎日計測していますが、このデータを見るとPage Speed を改善した9月初旬にいきなり順位がアップしているのがわかると思います。
スペースがないので他のデータは掲載していませんが他の検索語でもほぼ同じ結果がでています。

問題のPage Speed を改善する方法ですが、同じGoogleのページに詳しく書いてあるのでよく読めばわかると思います。
PageSpeed Insights について
ただ、100点にするにはSNS系のCDNを削除したりしました。たとえばキャッシュポリシーは読み込み側では操作できないのでfacebook, twitter は一時的にコメントアウトしています。まあ、このサイトではあまり用途がなかったので(爆)、あとGoogleはなんとかなりました。
それらの手法は時間ができればこのページで手順を解説するかもしれません（汗
あ、そうそう一番のネックはサイトの表示が速くなったのはいいんですがCSSなどの読み込みを遅延させているので一瞬CSS無しの状態テキストの羅列で表示されてしまうんですね。ここが一番気になるところですね。

でもまあ、Page Speed Insightsで100点とるのが趣旨ではないんでまた、いろいろ戻したりするかもしれませんが、とりあえず目標がないことには改善されてるのかどうかわかりませんからね。
といいつつ本日（11/13）Page Speed Insightsのサイトを訪れたら・・・な、なんとレイアウトが変わっている！！
測定のアルゴリズムも変更されたみたいです。これまで100点でていたのが90代に下がりました汗。この新しいPage Speed Insightsに関してはそのうちこのページでいろいろ解説したいですね。

Page Speed Insightsとりあえず左記でこのサイトのTOPを測定できます。100点でませんが・・・。
正しい計測結果を知るには一度分析ボタンをチェックしてキャッシュさせてから時間を置いて再度計測します。
それで初めてキャッシュポリシーの効果をpagespeed insightsで計測できます。二回目以降が正しい測定値になります。

Swipe Slider と同じようですが、こっちは通常の慣性スクロールです。オブジェクトの横幅でぴたりとは止まりません。
デザインによっては横並びのオブジェクトの横幅が不ぞろいの時がありますが、そういう時に使えると思います。
あとマウスホイールでも左右スクロールできるところがSwipe Slider と違う点ですね。

機能の説明： 基本仕様は、下のSwipe Scroll と同じです。

実装サンプルはSwipe Scroll で左右スクロールもスムーズに

上下スクロールってプラグインが結構あるんじゃないかと探してみましたが、これが意外とありません。
すでにjQueryのバージョン外だったり。あってもけっこう設置が面倒くさかったり、スクロールアイテムの上下に勝手にdivとかでラッピングしたりとか、もっとシンプルなの無いのか！って感じですね。
ほしいのが無いんなら作ってしまおうということで作ってみました。

機能の説明： 基本仕様は、・窓の縦横のサイズ・比例は自由。・スクロールするアイテムの高さも自由。　動作としては指を離したときに少し慣性で進んでストップ。コンテンツが枠を通り過ぎたら戻る。
また、ドラッグでスクロールと同時にマウスホイールでもスクロールできるようにしました。
ドラッグだけだとかなり面倒くさいので。

ドラッグ→マウスホイール、ホイール→ドラッグの移行も結構スムーズにできたのではと思います。最初、座標がずれて手こずりましたが・・・。

実装サンプルはSwipe Scroll で上下スクロールをスムーズに

私はフロントエンドが専門なので、開発段階ではサーバーで出力するデータをJSで仮に表示しデザインを進めていきます。
今回はその過程で生まれた事案です。

機能の説明： ・投稿機能
・更新状態を維持
・編集機能で編集状態に移行
・入力無し投稿などへエラーメッセージ
・自分のコメントには「編集・削除」機能

技術仕様：◎自動伸縮するテキストボックス　は、HTML5の｢contenteditable｣という属性を使用しています。form要素を使わなくともテキストを入力可能にする機能です。

もうひとつの◎ユーザー個別のページ状態を保存する　は、同じくHTML5のWeb Storage という技術を使ってます。ブラウザにデータを保存する方法です。クッキーのような技術ですね。
ただ今回作成したツールは、個人のブラウザだけにデータを保存するのでコミュニケーションツールとしては実用的ではないです。あくまで開発のためのツールですね。
もちろんそのデータをサーバーに保存すればWEBアプリとして機能しますがそういうのはすでにあるので。

詳細はMDNの「contenteditable」MDNの「JSON」MDNの「Storage」をご覧ください。

実装サンプルはlocalStorageと自動伸縮テキストボックスによるコメントツール

機能の説明：・画像の縦横比はフリーです。どのような比率でもサイズでも実装できます。
・スワイプでスクロールできます。
・シンプルにしたかったので左右の矢印ボタン以外は実装してません。
・面倒だったのでプラグイン化もしてません。（汗）
・一応初期設定でオートプレイも設定できます。

しくみは、touchmove,mousemoveでリアルタイムに座標を取得しCSSのtransreteでその座標へ移動させ（この移動はアニメーションは未使用）、touchend,mouseupで画像幅ごとの座標へtransitionでアニメーションさせています。JSだとpositon値を使用しますがCSS3なので(MDNによると)デカルト座標とやらを使用するそうです。そのため慣れないと、両者がごっちゃになります。特に難しいことはしてませんのでコードもシンプルです。

詳細はMDNの「transform を定義する関数」をご覧ください。

SwipeSliderの実装サンプルはCSSアニメーションでスワイプ式スライダー　Swipe Slider。をご覧ください。

機能の説明：左上のカードをクリックするたびにカードが開き所定の位置へ移動します。展開するスプレッドは一番有名なケルト十字法で、占法はタロット・グランド・マスターのレイチェル・ポラックに従いました。
開く順に

1.Cover
2.Cross [Top is left side.]
3.Basis
4.Recent Past
5.Possible Outcome
6.Near Future
7.Self
8.Environment
9.Hopes and Fears
10.Outcome
となってます。
ちなみにタロット初心者のリーディング練習用にいいかもしれませんね。ｗ

WEBでタロット占い

機能の説明：カードをクリック・タップするとカードが裏返ります。ポイントはカードを上下に2列に並べた時センターがバニシングポイントになるので、回転する時カードの上と下のパースの角度が違うところです。縦3列にするとまたそれに合わせてパースが変化します。

また、毎回同じ絵だとつまらないのでシャッフル機能も付けました。トランプ占いなんかに使えそうです。

もうひとつ、カードの裏？実は表？の水玉っぽい模様。これもCSS3の背景画像へのグラデーションで制作しました。CSS3だと背景画像を複数設定できるので基本色+透明から設定色を重ねることで模様を作っています。
ちなみに裏面の絵は大昔に描いたイラストです。最近はWEB案件ばかりなので忘れないようにたまには作品をつくらないといけませんねエ。

パース設定の詳細はソースをみてください。perspective仕様の基本はMDNの「perspective」をご覧ください。

CSS3でカードめくり

機能の説明：上部の15個のサムネイル画像をクリックすると、該当のブロックまでスクロール、右下の上矢印ボタンをクリックで元に戻る。というもの。よくある機能です。 css3のアニメーションだと動作が滑らかになります。が、いくつかの問題がありました。

ひとつは 'transform': 'translateY で高さを設定すると座標値が scrollTop に反映されない。
具体的には右サイドのスクロールバーがウインドウに同期しないで単純に長くなってしまう。下へスクロールすると上に戻せなくなってしまいます。その不具合に対応するためアニメーションが終了した直後に'transform': 'translateY の値を元に戻し（そうするとウィンドウが元に戻ってしまうので、位置をそのままにするために）再度scrollTopの値を変更するようにしています。
そうすることで、瞬時に座標を入れ替えて見た目は変化せず、長くなったスクロールバーの長を元に戻すようにしています。

もうひとつはCSSの問題ではないですが、スクロールの所要時間。スクロール時間もスクロール量に合わせて変化させないと、短いときは戻りが遅くイライラさせられ、長いときは瞬時に戻って自分がどこにいるのかわからなくなってしまいます。短いときはすばやく、長いときはそれなりに、スクロールするように設定しました。

スクロールのアニメーションがもたもたするときはブラウザのキャッシュを多め（推奨250MB以上）にしてみてください。

CSS3でページスクロール

当時はPCのクロックも100khz前後。メモリも100MB前後。まだフロッピーディスクでした(汗)。でもさくさく動いてました。
斬新なビジュアルをいっぱい作ったものです。それなのに操作が独特だったためか一般受けはしなくて自然と消えてしまいました。(悲)

しかしこのソフトじゃないと創れないビジュアルってあるんですよね。
ずうっと使い続けたいんですが、今ではWindows7ですらインストールできません。苦肉の策でXPにインストールしたものをそのままWin7へコピーしてなんとか使ってます。
というかフォトショップのバージョンもCC2018は言わずもがな、フォトショップCS（2003年リリース）でなんとか起動できるという・・・。

このロゴはそのKPT6の中に含まれているGELっていう機能で作りました。タブレットで描いたラインがもこもことリアルな立体になって行きます。Zブラッシュみたいなものですが、あそこまでパラメータの調整とか面倒ではないです。2Dですし。いやあ、やっぱりすごいです、このソフト！
KPTにはGER以外にも面白いユニークな機能がたくさんあります。

スタジオ･ハッピィバリーでは通常のソフト以外にもこれらの独創的なツールも使い他にはないユニークで斬新なビジュアルを多数ご提案します。