wordpressでふつーにサイト作った

最近ずっとReact案件だったのでその時のメッも

スクロールトランジション系

gsapのプラグインが増えてた。便利。 【2020年最新】GSAPの「ScrollTrigger」を使って爆速でスクロールアニメを実装する – to-R Media 

フロントエンドから始めるアニメーション 最強のライブラリGSAP3を手に入れよう – ICS MEDIA  
https://ics.media/entry/200805/

### 夢の膨らむ公式demo
ScrollTrigger Demos  
https://greensock.com/st-demos/ 

classの管理もお手の物。

Fixed header animation at top of page  
https://codepen.io/GreenSock/pen/mdVyPvK 

### cssそろそろいろいろと使いたい

clip-path – CSS: カスケーディングスタイルシート | MDN  
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path   

【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー | WEBDESIGNDAY  
https://webdesignday.jp/inspiration/technique/css/7976/#i-4 

前の案件ではie11使えへんやんけ！とキレたcss変数もそろそろ使おうかな  
（XDの吐き出す大量のソースは混乱するから今回は使っていない） あと調べると以外にまだｊQuery使って 解説記事投稿してる人多くてべっくりした。別にいいやんな。って思った。

### ええかげんthreeとか触っとくかな（需要が一部だけだけど

前にpixiで紙吹雪振らせてから特にそれ系はやってないな。  
選出のgsapのプラグインと組み合わせると面白いのん作れそう     WebGL入門 – サンプルで理解する3D表現の迫力 – ICS MEDIA  
https://ics.media/entry/2328/ Time Remap Demo – ICS  
https://ics-creative.github.io/150810_threejs_mosaic/DemoCubes.html

### 操作方法

使うツールが多様化するとショートカットをすぐ忘れます。  
Illustratorで複雑な図形の作り方（パスファインダー） | DTPサポートサービス  
http://dtp.screen-cre.co.jp/dtpai0002/ 

xdの距離はoption を押しながら選択
Adobe XDをもっと使いこなすヒント！ 第2回 オブジェクトからの距離を計測 | Adobe Blog  
https://blogs.adobe.com/japan/web-xd-protips-2-measure-distance/ 

SVGの記述方法 – Qiita  
https://qiita.com/takeshisakuma/items/777e3cb0a54ea7b1dbe7  
マスクを作るのに。パラメータすぐ忘れる。

video制御  
（Javascript）Video要素をJavascriptで制御する – フロントサイドエンジニアという選択肢  
http://jmqys.hatenablog.com/entry/2015/10/08/163843 

動画ファイルサイズも聞かれるたびに調べる。  
今回支給は80MBあったので流石に・・・と思ったけど。5MBか〜。 自社のWebサイトトップに動画を埋め込むときのサイズなどの注意事項 | Sokoage Magazine  
https://sokoage.com/magazine/movie_in_web/#:~:text=%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80%E5%A0%B4%E5%90%88%E3%81%A7%E3%81%99%E3%80%82-,%E5%8B%95%E7%94%BB%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AF%E6%9C%80%E5%A4%A710MB,10MB%E4%BB%A5%E5%86%85%E3%81%AB%E3%81%97%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82