みかづきブログ・カスタム

基本的にはちょちょいのほいです。

shape-outsideをつかってテキストの表示領域を平行四辺形にする 📝

CSS

DEMO See the Pen shape-outside by kimmy (@kimmy) on CodePen. CSSシェイプをつかって、テキストを斜めに段組してみました。developer.mozilla.orgやっていることは単純で、テキストの左右に三角形を置いて、floatで配置しているだけです。縦位置をセンタ…

aframe-animation-mixerを改造してARオブジェクトのアニメーションを制御可能にする 🎥

アニメーションするARオブジェクトに対してシークバーを付けてみました。aframe-animation-mixerをほんのり改造して、ARで表示したオブジェクトのアニメーションをシークできるようにしてみました。 https://t.co/oFezei9dJu pic.twitter.com/GqaZrlg4IX— 君…

Next.jsでLoading時に使える関数コンポーネントを作る 🔨

Next.jsとThree.jsでウェブサイトをつくったのですが、3Dモデルが重すぎるのでローディングをつくりました。blog.kimizuka.org以前、Reactのクラスコンポーネント用に作ったものを関数コンポーネントで書き直し、CSSをstyled-componentsで管理するように変更…

Next.js + Three.jsでページのスクロールを管理して3Dモデルをアニメーションさせる 🎥

blog.kimizuka.org以前つくったスクロール管理の仕組みをつかって、ページをスクロールするとダンスを踊るサイトをつくりました。kimizuka.github.ioNext.js + Three.jsでページスクロールに連動してダンスを踊るサイトを作りました。 https://t.co/0kkwD8lq…

Next.jsでURLのルートを変更する 💻

ウェブサイトのルートが / じゃないときの設定方法です。 assetPrefixを、 module.exports = { assetPrefix: '/hoge' }; という形にすれば、/hoge/ がルートになります。nextjs.orgNuxt.jsでいうところの、 export default { router: { base: '/hoge/' } } …

Next.jsでexportするときにURLの最後にスラッシュが付くようにする 💻

Next.jsで/pages/about/index.tsx(もしくは /pages/about/index.js) をexportすると about.html になりますが、 /about/index.html にするためにはどうすればいいのかを探ってました。結論を先に書くと、next.config.jsのtrailingSlashをtrueにすればOKで…

Next.jsでページのスクロールを管理してクロールする 🏊‍♂️

blog.kimizuka.org以前つくったスクロール管理の仕組みをつかって、ページをスクロールするとクロールするサイトをつくりました。kimizuka.github.ioNext.jsを使ってページスクロールに連動してクロールするサイトを作りました。https://t.co/Mdth7el9XS pic…

Next.jsでページのスクロールを管理する 📄

スクロールに連動してアニメーションを動かすサイトや、パララックスを実装する際、 ページのスクロール量(一番上から何%スクロールしているか) スクロールの方向 を管理すると、非常に楽に実装することができます。 今回はNext.js(React.js)のHooks API…

Next.jsで使えるAnimationクラスをつくる 🎥

npmで探したら似たようなものがある気もしなくもないですが、すごくシンプルなものが欲しかったので自作しました。 process.browserを使っている点以外はNuxt.jsに依存しているところはないですが、Next.jsで使うことを前提に作ってます。 TypeScrtipt expor…

SCSSの@forをstyled-componentsで書き換える 🔁

Nuxt.js + styled-componentsで開発をしているのですが、SCSSのような感じで、 SCSS ol { @for $i from 0 through 10 { li:nth-child(#{$i + 1}) { &:before { content: '#{$i}'; } } } } こちらをstyled-componentsに書き換えてみると、 styled-components …

navigator.mediaDevices.getUserMediaで立ち上げるカメラを指定する際のポイント 🎥

MediaDevices.getUserMedia()の仕様を確認すると、 すべての constraint が数字とは限りません。例えば、次の例はリアカメラよりもフロントカメラを (利用できるなら) を選好します。 { audio: true, video: { facingMode: "user" } } リアカメラが必要であ…

text-transformを使ってCSSの力でテキストを大文字にしたり小文字にしたりする 📝

CSS

アルファベットのユーザー名をデータベースには小文字で収納しつつ、HTMLに表示する際は大文字で表示したい。 最近そんな感じのケースがありまして、ReactやVueを使って、 <p className="username">{ username.toUpperCase() }</p> <p class="username">{{ username.toUpperCase() }}</p> といった感じにバインデ…