2023-04

コーディング知識

z-indexについて

.sectionの背景を設定して.section__itemにグラデーションの影.shadowを設定したい。 なにも設定しないと.shadowが一番上に来てしまう。 .section__itemにbox-shadowをつければ出来るかと思ったがグラデーションの仕方が分からなかったので断念。 shadowにz-index:-1をつけてみたが.sectionの背景の下に来てしまうのでうまくいかない。 そこでchatGPT先生にやり方を聞いて解決しましたので備忘のため残します。
コーディング知識

ふわっと表示

初期の画面表示のときやスクロールに合わせてふわっと浮き出るような画面表示の方法についてこれまで使用したものを備忘のため残します。
部品

テキストアニメーション(MOVING LETTERS)

javaScriptを使った様々なテキストエフェクトを紹介してくれている「MOVING LETTERS」というサイトを紹介します。 好みのエフェクトを見つけたらコピペして使うだけで実装が出来てしまいます。是非一度お試しください。
JavaScript

パララックス(Rellax.js)

パララックスを実装するためrellax.jsを適用させる方法を備忘のため残します。
JavaScript

テキストアニメーション(textillate.js)

textillate.jsとは textillate.jsは、文字をアニメーション化するためのJavaScriptライブラリです。このライブラリを使用すると、文字をフェードイン、フェードアウト、スライド、バウンス、ローテートなどのエフェクト...
部品

おしゃれなボタンデザイン&エフェクト(もぐでざ)

ボタンのデザインを探していた時に見つけて、かなり実用的なものがそろっていたので備忘のために残しておきます。
ギャラリー鑑賞

ギャラリー鑑賞(SANKOU!)

ギャリー鑑賞を行いその日のベストサイトとその理由を残していきます。 見て気持ちいい使って気持ちいいサイトをたくさん見てデザインセンスを磨いていきます。
部品

【部品】hambuger button

hamberger buttonのHTML/CSS。ボタンを押すとボタンの形が×になりメニューが表示される。メニューの外側をクリックするとメニューが閉じる。