今回は画面をスクロールして指定の場所が表示される時に
テキストをフェードインで表示する方法を記事にしてみました。
レスポンシブも簡単に行ってます。
フォントは自作のフォントサイズ自動変更の値を使用してます。
各セクションや画像はサンプル用で高さ固定で設定。
各デザイン等の設定はお好みでカスタマイズしてください。
さらに、この記事では エックスサーバー についても簡単に紹介しています。
実践的なコードを試す環境として、信頼できるレンタルサーバーをお探しの方は
ぜひチェックしてみてください！
HTML・CSS・JavaScriptにて作成してます。
今回のポイント
- スクロール位置に合わせてテキストがフェードイン
- レスポンシブ対応済み
- 自作のフォントサイズ自動変更スクリプトを使用
- 各セクションや画像はサンプル用で高さ固定
- HTML・CSS・JavaScriptで実装
今回実際に書いたコード
実際に書いたコードHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="space container"> スペース </section> <section> <div class="container"> <div id="about" class="about-inner"> <div class="about-image"> <img src="./img/about-1.jpg" alt="inoue画像"> </div> <div class="about-content"> <p class="about-text js-mission"> サンプルテキストサンプルテキストサンプルテキストサンプルテキスト <br> サンプルテキストサンプルテキストサンプルテキスト </p> <p class="about-text js-mission"> サンプルテキストサンプルテキストサンプルテキスト<br> サンプルテキストサンプルテキストサンプルテキスト<br> サンプルテキストサンプルテキスト </p> <p class="about-text js-mission"> サンプルテキストサンプルテキストサンプルテキスト<br> サンプルテキストサンプルテキスト </p> <p class="about-text js-mission"> サンプルテキストサンプルテキストサンプルテキスト<br> サンプルテキストサンプル </p> </div><!-- /.about-text --> </div><!-- /.about-inner --> </div><!-- /.container --> </section><!-- /.about --> <section class="space container"> スペース </section> <section class="space container"> スペース </section> <section class="space container"> スペース </section> <section class="space container"> スペース </section> <section class="space container"> スペース </section> <script src="main.js"></script> </body> </html> |
実際に書いたコードCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
@charset "utf-8"; /* ==================== about =================== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: rgb(190, 243, 243); } section{ padding: 100px 0 0 0; } .container{ width: calc(100% - 100px); max-width: 1500px; margin: 0 auto; } .space { height: 500px; } .about-inner { position: relative; display: flex; justify-content: space-between; flex-direction: row-reverse; height: 380px; } .about-image { width: 33%; height: auto; } .about-image img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; vertical-align: bottom; box-shadow: 7px 0px 15px -5px #777777; } .about-content { width: 54%; padding: clamp(20px, 4.0000vw + -20.00px, 40px); background-color: rgb(255, 255, 255); border-radius: 20px; position: absolute; top: 0; left: 0; z-index: 1; } .about-content::before { content: ""; width: 100%; height: 100%; border-radius: 20px; background-color: rgba(255, 255, 255, 0.4); position: absolute; top: -5%; left: 3%; z-index: -1; } .about-text { font-size: clamp(14px, 0.4000vw + 10.00px, 16px); line-height: 1.7; margin-bottom: 25px; opacity: 0; transition: opacity 7s ease; position: relative; z-index: 5; } .slidin.about-text { opacity: 1; } /* =========================== レスポンシブ about ============================ */ @media screen and (max-width:1190px) { .about-image { width: 38%; } } @media screen and (max-width:860px) { .about-inner { display: block; position: static; } .about-image { display: none; } .about-content { width: 100%; position: static; } .about-content::before { display: none; } } @media screen and (max-width:767px) { .container{ width: calc(100% - 60px); } .about-content { padding: 2.5rem; } } |
実際に書いたコードJavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/* =========================== misssionのスライドイン ============================ */ document.addEventListener("DOMContentLoaded", function() { function checkVisibility() { const windowWidth = window.innerWidth; const jsMissionElements = document.querySelectorAll('.js-mission'); jsMissionElements.forEach(element => { const elementTop = element.getBoundingClientRect().top + window.scrollY; const elementBottom = elementTop + element.offsetHeight; const viewportTop = window.scrollY; const viewportBottom = viewportTop + window.innerHeight; // 要素がビューポートに入った場合 if (elementTop < viewportBottom && elementBottom > viewportTop) { element.classList.add('slidin'); } else { element.classList.remove('slidin'); } }); } window.addEventListener('scroll', checkVisibility); window.addEventListener('resize', checkVisibility); checkVisibility(); // 初期チェック }); |
コードを試すならエックスサーバーがおすすめ！
Web制作を学ぶなら、実際のサーバーで動作確認するのが大切です。
私も利用している エックスサーバー は、表示速度や安定性に優れ、初心者の方でも安心して利用できます。
以下のリンクから簡単にエックスサーバーを開設できますので、よければ覗いてみてくださいね！
👉 エックスサーバーの公式ページを見る
今回は スクロール時にテキストをフェードインで表示する 実装例を紹介しました。
実際にコードを動かしながら、デザイン調整なども楽しんでみてください！
疑問や「こうしたい！」というリクエストがあれば、お気軽にコメントしてくださいね😊
YouTube動画
おすすめレンタルサーバー Xserver
高速・多機能・高安定レンタルサーバー『エックスサーバー』
私も使ってるレンタルサーバーになります
独自ドメインが永久無料 ・マルチドメイン、メールアドレス無制限！
コメント