プログラミング学習

プログラミング学習

動かない!?anime.jsでsvgのテキストアニメーションの作り方【fillのサンプル】

anime jsの使い方覚書です。 前半はqiitaに寄稿しました。後半は主にsvgアニメーションの解説です。 anime jsはtimeline内loopできない!? タイムラインの最後でループさせようと思...
2022.06.07
プログラミング学習

ScrollMagicのサンプル(anime.jsやGSAPと併用/ScrollTrigger)

GSAPのScrollTriggerが有料だったためScrollMagicとanime.jsで実装したというお話ですが、主な内容は次のとおりです。 ScrollMagicでスクロールした際にnuxtでanime.jsを使ってアニメー...
2022.06.03
プログラミング学習

vueでBody Scroll Lockの使い方(モーダルウィンドウ時に背景固定でスクロールさせない)

モーダルウィンドウ時に背景固定でスクロールさせない方法を調べて実装しました。 モーダルウィンドウ時に背景固定でスクロールさせない よくモーダルウィンドウを開いた際に、背景固定でスクロールさせない方が良い場合があります。 ...
2022.04.28
プログラミング学習

【区切り線】cssの曲線で背景分割(ジェネレーターもあり)/hrの色・余白調整

区切り線の覚書です。 cssの曲線(円弧)で背景分割/区切り(レスポンシブ対応) アーチ状の曲線を描くコードです。 <div class="white-bg"><div class=...
2022.03.13
プログラミング学習

CSSで動画を画面いっぱい(埋め込みサイズ変更の方法/レスポンシブ対応)

全画面で動画が流れるようvideoタグ埋め込み方法覚書です. cssで動画を画面いっぱい(埋め込みサイズ変更の方法/レスポンシブ対応) vueを使っていますが、cssの部分は他でも変わらないはずです。 vue.js(nu...
プログラミング学習

Nuxt(Vue)のマスタッシュ構文やdataで改行されない(white-space: pre-wrap;)

vueの改行問題をまとめておきます。いろいろな解決方法があるようですが、CSSで解決する方法が簡単そうです。 Nuxt(Vue)のマスタッシュ構文で改行されない たとえば、複数のエラー文を表示する場合、\nはbrタグではなく、...
2022.06.25
プログラミング学習

vueでmdの読み込み5選(nuxt/contentの使い方)

nuxtでmdの読み込もうとしたら、いろいろでてきたため、めもしておきます。最終的に@nuxt/contentを採用しました。 nuxtでmdの読み込み比較 ぐぐったらいろいろとでてきました。 rontmatter-ma...
2022.05.24
プログラミング学習

macでelasticsearchのインストール(tar.gzではなくHomebrew)

elasticsearchとkibanaの覚書です。 macでelasticsearchのインストール(tar.gz) elasticsearch-7.16.0-darwin-x86_64.tar.gz.asckibana-7...
2022.01.01
プログラミング学習

質問サイトスタックオーバーフロー(Stack Overflow)の登録

日頃お世話になっているスタックオーバーフローに登録していなかったので登録しました。 質問サイトスタックオーバーフロー(Stack Overflow)の登録 Sign up > Sign up with Googlegoo...
プログラミング学習

【SpaのSEO対策】nuxt.jsでvue-metaの使い方

nuxt.jsのseo対策についてまとめていきます。とりあえずvue-metaを使うとよさそうです。必要に応じて加筆します。 nuxt.jsのvue-metaの使い方 vue-headやvue-metaというプラグインがありま...
2022.06.26
タイトルとURLをコピーしました