RX100で撮り歩くブログ

RX100やRollei B35で写真を撮ったり何やかんやするブログ

スライダープラグインのswiperをnpm installで使う

CDN経由やダウンロードして使う方法ではなく、npmからswiperをインストールして使う方法です。最近のweb制作ではこの方法が普通じゃないでしょうか。 公式のドキュメント見て書いてるので、分かるよって人は公式のドキュメントから。この記事では覚書程度に…

シェーダーに入門して画像をかっこよく切り替える

three.jsで表現の幅を広げるにはシェーダーは避けて通れなさそうなので、入門してみました。 とりあえず以下の記事を読んでみました。年数的には古い記事ですが、大きく変わっていないとは思うので、そのまま参考にしました。 qiita.com qiita.com あとはこ…

GSAPでスクロールするとテキストが紙芝居みたいに切り替わる動き

GSAPでスクロールで要素がビューポートに入ったときに動かすというのは以前やりました。 blog.mismith.me 今回は要素が見えたときという条件ではなく、スクロール量に応じてアニメーションするといったものを試しました。応用するとパララックス表現とかに使…

Three.jsとGSAPを組み合わせてボックスを回転させるだけ

GSAPとThree.jsを組み合わせられると聞いてどういうことかを確かめるために基礎的なことをやってみました。 GSAPとThree.jsを組み合わせる場合、Three.jsでオブジェクトを配置したりして、それをGSAPのタイムラインなどを使って動かせるようです。GSAPを使う…

ウェザーニュースきっかけで防災グッズ(緊急用リュック)を揃えてみた

最近ウェザーニュースにハマっていて、よく視聴しています。 YouTubeやニコ生、ミルダムなどの媒体で天気の情報を放送しているチャンネルです。主に天気の情報ですが、天気に関わる生活の豆知識や、災害情報なども詳しく解説されていて、とてもためになりま…

GSAPでscroll inview アニメーションなどいろいろやってみる

有名なアニメーションライブラリのGSAPでいろいろやってみました。 greensock.com ちょっと触ったことはありましたが、複雑なアニメーションでない限りはCSSとJSで自分で実装できるなと思い、使う機会はほとんどありませんでした。 しかし、2020年の6月にScr…

gatsby-remark-autolink-headersでマークダウンの見出しに自動でidを割り当てる

Gatsbyで gatsby-transformer-remark を使ってマークダウンを使えるようにし、見出しにidを付けたくなった場合は gatsby-remark-autolink-headers という gatsby-transformer-remark のプラグインを追加する yarn add gatsby-remark-autolink-headers gatsby…

ReactのuseEffectでcleanupするように言われた時~To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function

Reactで開発していてコンポーネントのアンマウント時に以下のようなエラーが出る場合があります。 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix,…

Netlifyのビルド時にNodeのバージョンでエラーがでる~ The engine "node" is incompatible with this module. Expected version ">=12.13.0". Got "10.24.1"

GatsbyのサイトをアプデしてNetlifyにデプロイしようとするとビルド時に以下のようなエラーがログにでました。 Gatsbyのv3.7.1ではnodeのバージョンを12.13.0以上にしてねってことだと思うんですが、どうやって指定したらいいのかを調べました。 gatsby@3.7.…

タスクランナーにgulpではなくnpm scriptsを使う

たまにweb制作をやるときには特に何も考えずgulpを使っていましたが、npm scriptsで充分という声も聞くのでどんなものか試してみました。 やってみること 最低限で以下をやってみます。 htmlをdistへコピー(ejsやpugは使わないです) SassをCSSへコンパイル…