ようやく描きあげた…
のだけど、特に P90のコレジャナイ感
グリップまわりがウソだらけだ

イラレのバグがふたつ、発覚した
両方ともpdfに書き出したもの。
ひとつは、書き出したpdfの最初のページだけどうやっても印刷できないと言われた。
自分のmacのプレビューからは普通に印刷できる。
ふたつめは、イラレで青の部分が全部緑になってた。
どうやっても緑になってしまい、しょうがないからjpgに書き出した。

こんなバグ今までなかったのに、突然出てきた。

環境は、High SierraのCS6。
pdfじゃないと細かい文字が読めないことが多いし、それがお客さんに渡すデータとなると困る。
CS6はとっくにサポート切れてるし、どうしたもんか。

ずっとやろうとしてて放置してたコレ。

ようやくやってみた。
一応htmlはクリーンな感じ。

See the Pen YdyBOR by Y38design (@y38) on CodePen.

あ、Chorome / Safari / Mobile Safariでしか確認してないので注意

動きの設定はまだ甘いけど、まあとりあえずは良しとして、それよりMobile Safariで見るとぬるぬる動くのにmacで見るとぎこちない動きをする
スタイルで動く要素にwill-change:transformとすれば描画前に読み込んでくれて描画遅れを防ぐ、とあったんだけど変わらないのよなあ
ガクガク動くのはカッコ悪いからなんとかしたい

wordpressからのsns投稿、全文じゃなくて抜粋するにはディスクリプションに一部をコピペなりしないといけないのか…
なんとかデフォルトとして設定できないものか

fromとtoに書く、top-middleとかの意味がよくわからず、書き直してリロードしてを繰り返してたんだけど、ようやく解説してあるサイトを見つけた

https://tr.you84815.space/basicscroll/data.html

middle- bottomと書くと、要素の中央（middle）がビューポートの下部（ bottom）に達した時にアニメーションが始まる、ということらしい。

これで少しは制御しやすくなったかも。

あとはpropsの中身がよくわからない。透明度は.01から.99だからわかりやすいのだけど、ここの

https://codepen.io/electerious/pen/QGNxxx

0から100pxがわかりにくい

position:relativeのことだと思うんだけど、アニメーションしてズレて動くから値が掴みにくい

このへんはもっといじってみないとわかんないな

てか素直にjqueryのを探した方が使いやすいかもしれないけど、他のjsに非依存というのは利点だと思うから、なんとかモノにしたい

なんとか導入してみたけれどまだコピペの域を出ない

内容を把握した上で弄れば多彩な表現ができるのだけど、jsなのかbasicscroll独自のものなのかわからないけど、何をどう書いたらいいのかがわからない

でもひとまずは置くことができたので少しずつ触っていこう

試しててうまく動かないからここの見た目がアレなことになってる。

デモ通りに、そのままコピペすると動く。でもその中から自分の使いたいものだけ残すと動かない…

jsを弄ればいいんだろうけどまだ仕組みがよくわかってないから難しい。

パララックスというたいして実用的ではないものにこんなに時間を割いていいものか。

あ、動いた。

試しにwordpressから、さっきの静的ページのjsを読み込んでみたら動いた。
js内の記述がおかしかったかも。

まだ試しているbasicscroll。

どうやっても動かない。何かがおかしいと思ってこことは別にページを作ってみた。

https://y38.org/scrolltest/

ここではちゃんと動く。

jsの呼び出しをbody末尾に記述するんだけど、もしかしたらwordpressが吐き出してるもろもろが悪さしてるのか？

パララックス試してみたいだけで他のなんでもいいのかとしれないけど、せっかくなら新しいの試したかったのに、もしwordpressが悪さしてるのだったら使えない…困った。