ScrollMagicを使ってふわっと要素を出す方法 スクロールと連動させて何かをしたいならScrollMagic一択かなと自分は思っています。 自分が忘れないための備忘録 scrollMagicの公式のデモサイトはこちら https://scrollmagic.io/ サクッとデモだけ見たい人 サクッと実装だけみたい人は下記より見てください CodePenのリンク https://codepen.io/xhisashix/pen/YzZLJqY ディレクトリの構成 . ├── css │ └── style.css ├── index.html └── js └── scrollMagic.js CDNの読み込み bodyの閉じたタグの上に記載 CDNのリンクに付いては上記のScrollMagicのデモサイトのページにも記載があります。 index.html <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> サンプルHTML htmlはこれだけ index.html <div class="section"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> CSS style.css .section { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 auto; max-width: 980px; width: 100%; } .section .box { margin-top: 20px; margin-left: 20px; width: 200px; height: 200px; background: #eee; opacity: 0; transition: 0.5s; transform: translateY(15%) rotate(-45deg); } .section .box:nth-child(odd) { transform: translateY(-15%) rotate(45deg); } .section .box.active { opacity: 1; transform: translateY(0); } js 特定のクラスがついてるものずべてにアニメーションを適応點せたかったので 今回は下記のような、実装を行いました。 scrollMagic.js class ScrollFadeIn { constructor() { let box = document.querySelectorAll('.box:not(.active)'); console.log(box); if (box.length === null) { return; } let controller = new ScrollMagic.Controller(); for (let i = 0; i < box.length; i++) { let scene = new ScrollMagic.Scene({ triggerElement: box[i], triggerHook: 'onEnter', reverse: false, offset: 150, }) .addIndicators() .addTo(controller); scene.on('enter', () => { box[i].classList.add('active'); }); } } } new ScrollFadeIn(); ちょっと説明 querySelectorAll 条件に該当する要素をすべて取得する let box document.querySelectorAll('.box:not(.active)'); console.log(box); // ログの結果 NodeList(３) [div.box, div.box, div.box] 上記を使ってあとはループを回すだけ for (let i = 0; i < box.length; i++) { let scene = new ScrollMagic.Scene({ triggerElement: box[i], triggerHook: 'onEnter', reverse: false, offset: 150, }) .addIndicators() .addTo(controller); scene.on('enter', () => { box[i].classList.add('active'); }); } イベント発火のタイミング triggerHook: 'onEnter', onEnter onCenter onLeave クラスの追加 triggerElementが特定の位置に来たときクラスを付与 このクラスをつけアニメーションはCSSで調整を行っている scene.on('enter', () => { box[i].classList.add('active'); }); 最後に vue-scrollmagicは使ったことがあり、なんとなく理解していたが、 scrollMagicを使うのが初めてだったため、忘れないための備忘録として書かせてもらいました。 誰かの参考になれば幸いです 最後まで読んでいただきありがとうございました。

meta要素 今まで意識せず使っていましたが、きちんと理解していないと今後自分が困ると思ってまとめました。 https://www.tohoho-web.com/html/meta.htm#name　 　↑　このサイトが一番わかりやすかったです 　 head <meta charset="utf-8"> エンコーディングは「データを一定の規則（バイト）に基づいて符号化すること」です。 特定のエンコーディング（UTF-8 など）を設定することで、バイトの並びがどのように解釈されるかを定めることができます。 　 head <meta http-equiv="X-UA-Compatible" content="IE=edge"> 【http-equiv="X-UA-Compatible"】指定した互換モードで表示させることができます。 Internet Explorerは各バージョン毎にレイアウトの癖やJavaScriptの挙動が異なるため、古いウェブページを最新から古いバージョンをエミュレート（模倣し、動作）して表示することができる。 【content=”IE=edge”】Internet Explorerの最新で表示。 【content=”IE=EmulateIE7”】と指定すれば、IE8を使用していたとしてもIE7の標準モードで表示する。【content=”IE=edge”】という指定はあまり良くない可能性のある指定です。（https://www.creativevillage.ne.jp/2819 より） 　 head <meta name="viewport" content="width=device-width, initial-scale=1"> 【Viewport】とは表示領域のことで、ブラウザにおける仮想のサイズをcontentで指定します。 幅360pxにしたいなら、content="width=360"と表記。 【content="width=device-width"】でViewportの幅は実際の解像度ではなく端末やブラウザに合わせた値を返します。 【initial-scale】で初期倍率を設定します。 width=device-widthとしてinitial-scaleを指定しない場合は、自動的にinitial-scale=1となります。 ※ Windows PhoneのInternet Explorerではinitial-scaleに対応していないので、initial-scaleとwidthを同時指定したほうがいい、という考え方もあります。（https://ferret-plus.com/6033 より） https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

HTMLコーディングのときにとりあえずなにか入れておくためのもの。 動画 mp4 あんまり好きじゃないけどこれくらいしか見つからず。 もうちょっとかっこつけたフリーの動画はないものか。 YouTube 基本的に YouTube公式の動画を使えばいいけど、YouTuberの顔がどかーんと大きくサムネイルに使用されているものも多いのでこれが無難。 YouTube公式 - YouTube Music - YouTube がつくった、新しい音楽アプリ <iframe width="560" height="315" src="https://www.youtube.com/embed/IqKz0SfHaqI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> Spotify ザ・ビートルズ - Let It Be (Remastered) <iframe src="https://open.spotify.com/embed/track/7iN1s7xHE4ifF5povM6A48" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> 画像 <img src="https://via.placeholder.com/500"> もう少し具体的な画像 placeholder.com のベタ塗り画像を嫌がるデザイナーやクライアントの方もいるため。 全体的に薄暗くてぼやーっとしてるのがやや難。 風景 <img src="https://picsum.photos/id/1050/500/500"> 人物 <img src="https://picsum.photos/id/64/500/500"> テキスト 英文 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia, blanditiis? Natus, debitis possimus accusamus sed repellat optio! Laborum cupiditate iusto laboriosam totam consectetur? Quibusdam in sint cupiditate repellendus, blanditiis a. 日本語 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

Visual Studio Codeのコード整形用拡張機能「Beautify」を使っていて、保存時に自動整形する設定をしている。 とあるHTMLを編集していざ保存しようとすると、 〇〇〇.htmlを保存しています:'Beautify'フォーマッタ(構成)を実行しています。 とメッセージが出たままいつまでたっても整形が完了しない。（保存は完了する） さらに、このエラーが一度発生すると以降どのファイルを開いても同じ状況に陥り、VSCodeを再起動することでしか解消できない。 何かソースに問題あるのか調べたところ、metaタグの書き方がXHTML形式（>の前に/がある）だ と再現することが判明。 問題が発生する書き方 <meta name="Description" content="xxxxxxxxxx" /> 末尾のスラッシュを取ったところ、発生しなくなった。 末尾の/を取ると発生しなくなった。 <meta name="Description" content="xxxxxxxxxx"> metaタグの>前に、スラッシュを入れる事はHTML5の文法的には間違っていない（非推奨ではない）のに、なぜ整形エラーになるのかは謎。

どうも7noteです。疑似要素でテキストの横にアイコンを付けると微妙に位置がズレてしまう場合の対処法について解説 このように、テキストの前にアイコンを付けると微妙にズレてしまう場合に、いい感じに上下中央にもっていく方法を解説します。 「ちょっとズレてしまった例」 ソース index.html <p>テキスト</p> style.css p::before { content: ''; width: 16px; height: 16px; background: url(icon.png) no-repeat; margin-right: 10px; display: inline-block; transform: translateY(3px); /* 上下方向の位置を微調整する */ } 解説 上下方向でズレがおこるので、transform: translateY()を使い、上下の位置を調整します。 それだけですね、簡単です。 まとめ position指定で位置を相対位置に指定する方法もありますが、単純にテキストの前にアイコンを設置するだけであれば、beforeを使った今回の方法が一番簡単かなと思います。 imgにして画像で設置する方法もありますが、個人的には疑似要素を使ったこの手法がオススメです。htmlがスッキリするので。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

これは何 フリーグラデーションっぽいグラフィックが使われる機会が増えているので、CSSだけでそれっぽい背景を作る方法をまとめました なお、あくまで「それっぽい」です よりリッチな表現を求めたい場合は素直にグラフィック制作ソフトで作った方が良いと思います また、記事投稿イベント「3000文字Tips - 知ると便利なTipsをみんなへ届けよう」への投稿記事でもあります 完成品 リポジトリとGitHub Pages この記事を書くために書いたコードは全て公開しています。 実際の見た目はGitHub Pagesからどうぞ。 作り方 まずは用意したい色の数だけdivでも用意します。 <body> <div class="gradient-container"> <div class="color1"></div> <div class="color2"></div> <div class="color3"></div> <div class="color4"></div> <div class="color5"></div> <div class="color6"></div> <div class="color7"></div> </div> </body> そして用意したdivに色を指定し、positionで良い感じに配置します。 .gradient-container { height: 100vh; overflow: hidden; position: relative; width: 100%; } .color1 { background-color: #6d83f3; height: 200vmax; left: 45vmax; position: absolute; top: -4vmax; width: 64vmax; } .color2 { background-color: #4d38ce; border-radius: 50%; height: 38vmax; left: 84vmax; position: absolute; top: -28vmax; width: 38vmax; } .color3 { background-color: #ee5555; border-radius: 50%; left: 45vmax; height: 100vmax; position: absolute; top: 19vmax; width: 67vmax; } .color4 { background-color: #ffbe82; height: 100vmax; left: -13vmax; position: absolute; top: 20vmax; width: 83vmax; } .color5 { background-color: #cdfcff; border-radius: 50%; height: 83vmax; left: -20vmax; position: absolute; top: -30vmax; width: 83vmax; } .color6 { background-color: #69c0ff; height: 64vmax; left: -16vmax; position: absolute; top: -6vmax; transform: rotate(-8deg); width: 30vmax; } .color7 { background: linear-gradient(to top, #febcff 20%, rgba(254, 202, 255, 0) 100%); top: 8vmax; filter: blur(8vmax); height: 50vmax; left: -12vmax; position: absolute; transform: rotate(-30deg); width: 100vmax; } 現時点ではこんな感じ。 ポイントは以下かなと思っています。 CSSだけで作る以上表情が単調になりがちなので、少しでも要素が複雑に見えるような工夫です。 円と四角を両方使う いくつかの要素は斜めで配置する 全部ベタ塗りではなく、透明にグラデーションするような塗りのものも用意する 更に、それぞれの要素にfilter: blur()をかけます。 .color1 { background-color: #6d83f3; height: 200vmax; + filter: blur(3vmax); left: 45vmax; position: absolute; top: -4vmax; width: 64vmax; } .color2 { background-color: #4d38ce; border-radius: 50%; + filter: blur(5vmax); height: 38vmax; left: 84vmax; position: absolute; top: -28vmax; width: 38vmax; } .color3 { background-color: #ee5555; border-radius: 50%; + filter: blur(3vmax); left: 45vmax; height: 100vmax; position: absolute; top: 19vmax; width: 67vmax; } .color4 { background-color: #ffbe82; + filter: blur(12vmax); height: 100vmax; left: -13vmax; position: absolute; top: 20vmax; width: 83vmax; } .color5 { background-color: #cdfcff; border-radius: 50%; + filter: blur(3vmax); height: 83vmax; left: -20vmax; position: absolute; top: -30vmax; width: 83vmax; } .color6 { background-color: #69c0ff; + filter: blur(12vmax); height: 64vmax; left: -16vmax; position: absolute; top: -6vmax; transform: rotate(-8deg); width: 30vmax; } .color7 { background: linear-gradient(to top, #febcff 20%, rgba(254, 202, 255, 0) 100%); top: 8vmax; + filter: blur(8vmax); height: 50vmax; left: -12vmax; position: absolute; transform: rotate(-30deg); width: 100vmax; } 一律でblur()をかけるとこれまた表情が単調になるので、要素によって値の大小を変えます。 あとは文字でも置いてあげれば、最初に貼った画像と同じ見た目が出来上がりです。