星と波
![](https://utatane.works/wp-content/uploads/2024/05/uta-renewal.jpg.pagespeed.ce.IWT_c9yhuJ.jpg)
![](https://utatane.works/wp-content/uploads/2024/05/nami-sp.jpg)
トップページだけリニューアルしました
よかったらみてね
当初、すっっごくシンプルだったのですが
![](https://utatane.works/wp-content/uploads/2023/11/utatane-list.jpg)
↓
↓
へんし〜ん!
↓
↓
![](https://utatane.works/wp-content/uploads/2024/05/utata-scaled.webp)
長〜い!
無駄にスクロールさせてごめんなさい🙇♀️
レイアウトや機能はそのままに、ちょこっとお色直ししました。
発端は、PC画面
横幅いっぱいのメインビジュアルで
![](https://utatane.works/wp-content/uploads/2023/11/uta-tp.jpg)
フィルムで撮った写真を使っていたので、
大きなディスプレイで見たときに画質が荒くなっちゃって😭
ずっと、直したいと思っていました
重たい腰を上げとりかかったのが、コチラです 👀
![](https://utatane.works/wp-content/uploads/2024/05/thumb-utata.jpg)
画像を固定幅にして、スペースを設けました
余白があると落書きするのは、人間の性
星(ただのドット)と波(ただの波線)を
いつも、サイトを夜な夜なつくっているので
夜っぽいものを散りばめます。
折角なので
- スライドする画像がじんわりと拡大するアニメーション
- トップページだけページがめくれるようなエフェクト
- 右側のメニューやポップアップテキストが横から滑り込んでくるなど
を施してみたりで、
こうなりました
![](https://utatane.works/wp-content/uploads/2024/05/utata-mv.gif)
ほかにも万年筆で描いたごにょごにょ、
![](https://utatane.works/wp-content/uploads/2024/05/penchan.png)
ぐるぐる謎のバネ
![](https://utatane.works/wp-content/uploads/2024/05/spring.png)
流れ星
![](https://utatane.works/wp-content/uploads/2024/05/star-1.png)
動いたら可愛いなと思って、cssで動かしました。
cssが描画するアニメーションは、ロードしたときの一回限り
頑張って動け!働け!と、
何度も動くよう javascript で小細工しています
見逃された方、もう一度見たい方はスクロールして戻ってきてね
あれもこれもやり出したら止まらなくなり、脇役の存在たちに大層な時間をかけてしまいました
背景も怒ってうねうねしています
荒ぶる波です
様々なアニメーションと格闘中に、
未完の画面を友人が見ていました
声をかけてくださり
4年ぶりの再会を果たしてきました
会えて嬉しかった😭
ありがとう、ありがとう😭
サイトごにょごにょしてよかった〜
友もまたリモートでフロントエンドエンジニアをしており
朝の3時間はどこか外で作業して、
午後から家で作業をすると
早退したみたいな、得した気分になれるよ
と、目から鱗のリモートハックを教えていただきました。
ずーっとおうちで仕事していると、オンオフの切り替えも難しくなるし
座りっぱなしは腰にとって拷問です
早速試してみよう〜!
と、いうわけで
なにかつくったものを発表すると、それを見ていてくれる人がいて、お互い近況を話すきっかけになったり、嬉しいハプニングが起きることもあります
おともだちっていいね、つくるってたのしいね
というお話しでした、おやすみなさい!