[Wecode]HTML&CSSを使用した自己紹介ページ-2の作成

🎬 CSSのみで画像スライドを作成

参考になるブログ
ほとんどの画像スライドはJavaScriptで作成されていますが、今回はCSSとHTMLだけで画像スライドを作成してみたいと思います.Googleが検索したところ、多くの文章が発見され、その中で一番好きなブログの文章を参考に実現しました.

<div class="slider">
            <input type="radio" name="slide" id="slide1" checked>
            <input type="radio" name="slide" id="slide2">
            <input type="radio" name="slide" id="slide3">
            <input type="radio" name="slide" id="slide4">
            <input type="radio" name="slide" id="slide5">
            <input type="radio" name="slide" id="slide6">
            <input type="radio" name="slide" id="slide7">
            <input type="radio" name="slide" id="slide8">
            <input type="radio" name="slide" id="slide9">
            <ul id="imgholder" class="imgs">
                <li><img src="imgs/gallery/photo_1.jpg"></li>
                <li><img src="imgs/gallery/photo_2.jpg"></li>
                <li><img src="imgs/gallery/photo_3.jpg"></li>
                <li><img src="imgs/gallery/photo_4.jpg"></li>
                <li><img src="imgs/gallery/photo_5.jpg"></li>
                <li><img src="imgs/gallery/photo_6.jpg"></li>
                <li><img src="imgs/gallery/photo_7.jpg"></li>
                <li><img src="imgs/gallery/photo_8.jpg"></li>
                <li><img src="imgs/gallery/photo_9.jpg"></li>
            </ul>
            <div class="bullets">
                <label for="slide1">&nbsp;</label>
                <label for="slide2">&nbsp;</label>
                <label for="slide3">&nbsp;</label>
                <label for="slide4">&nbsp;</label>
                <label for="slide5">&nbsp;</label>
                <label for="slide6">&nbsp;</label>
                <label for="slide7">&nbsp;</label>
                <label for="slide8">&nbsp;</label>
                <label for="slide9">&nbsp;</label>
            </div>
        </div>

スライドのHTML構造.スライドの移動はInputタイプのラジオボックスをクリックすることによって実現され、実際のクリック移動実現は下部に弾丸というラベルラベルを作成してラジオボックスにバインドされる.つまり、底の弾丸をクリックすると、ラジオがクリックされて移動します.

.slider {
  width: 800px;
  height: 600px;
  position: relative;
  padding-top: 50px;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden; /* 현재 슬라이드 오른쪽에 위치한 나머지 슬라이드 들이 보이지 않도록 가림 */
  z-index: 0;
}

.slider input[type="radio"] {
  display: none;
}

これはスライドの基本的なCSS構造です.margin: 0 auto;にスライドを中央揃えし、overflow: hidden;のプロパティで現在のスライドの右側にある残りの画像を非表示にします.ラジオボックスに接続された弾丸をクリックすると、右側にある非表示の画像が左側に移動して表示されます.

ul.imgs {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul.imgs li {
  position: absolute;
  left: 640px;
  transition-delay: 1s; /* 새 슬라이드가 이동해 오는 동안 이전 슬라이드 이미지가 배경이 보이도록 지연 */
  width: 800px !important;
  padding: 0;
  margin: 0;
}

スライド画像リストのcss構造.スライド領域サイズのほぼ右側に配置され、スライド移動時にバックグラウンドがWebページのバックグラウンドとして表示される問題を解決するために、1つのスライドの遷移を1秒遅らせるleft: 640px;が提供される.

.bullets {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  z-index: 2;
}

.bullets label {
  display: inline-block;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  width: 20px;
  height: 20px;
  cursor: pointer;
}
/* 현재 선택된 불릿 배경 흰색으로 구분 표시 */
.slider
  input[type="radio"]:nth-child(1):checked
  ~ .bullets
  > label:nth-child(1) {
  background-color: #fff;
}

(...)

弾丸のCSS構造.弾丸はラジオボックスと組み合わせた<label>のラベルで作られている.<label>タグをスライドの下の中央に配置し、選択した弾丸を白で区切った.

.slider input[type="radio"]:nth-child(1):checked ~ ul.imgs > li:nth-child(1) {
  left: 0;
  transition: 0.5s;
  z-index: 1;
}
.slider input[type="radio"]:nth-child(2):checked ~ ul.imgs > li:nth-child(2) {
  left: 0;
  transition: 0.5s;
  z-index: 1;
}
.slider input[type="radio"]:nth-child(3):checked ~ ul.imgs > li:nth-child(3) {
  left: 0;
  transition: 0.5s;
  z-index: 1;
}
.slider input[type="radio"]:nth-child(4):checked ~ ul.imgs > li:nth-child(4) {
  left: 0;
  transition: 0.5s;
  z-index: 1;
}

(...)

最も重要なスライドアニメーションCSS構造.弾丸をクリックすると、この順序のスライドはleft: 0に処理され、左に移動します.また、新しく入ったスライドは現在のスライドよりも高い位置に表示する必要があるため、z-indexを1に設定します.

スライドが完成した様子!

🔝 Arrow-upボタン&Transparent Navbarの作成

ページが最背面に下がると、クリックしたときに最上位レイアウトのタイトルに一度移動するボタンを実装します.

<button class="arrow-up">
	<i class="fa-solid fa-angles-up"></i>
	<br><p>Let's go up!</p>
</button>

矢印-upボタンのHTML構造.ボタンのデザインはfontawesomeから来ています.そしてボタンの機能を知るためにpタグで説明を書きました.

.arrow-up {
  position: fixed;
  bottom: 20px;
  width: 150px;
  height: 200px;
  right: 10px;
  font-size: 50px;
  color: var(--color-black);
  border-style: none;
  background: none;
  opacity: 0;
  transition: all var(--animation-duration) ease-in;
  pointer-events: none;
}

.arrow-up.visible {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.arrow-up.visible:hover {
  animation: up-down 0.5s infinite ease-in-out alternate;
}

矢印-upボタンのCSS構造.こちらです.これをvisibleに分割するのは、arrow-upボタンが現在のWebサイトがタイトルにあるときに表示されず、タイトルから離れたときにのみ表示されるためです.fixedでブラウザに配置し、opacityで表示と非表示を区別します.また、visible以外の場合、pointer-eventsをnoneに設定することで、何の機能も実行できません.
上下に移動するアニメーション効果を加えて、マウスを動かすときにボタンを押すことができます.

// Show "arrow up" button when scrolling down
const home = document.querySelector("#header");
const homeHeight = home.getBoundingClientRect().height;
const arrowUp = document.querySelector(".arrow-up");
document.addEventListener("scroll", () => {
  if (window.scrollY > homeHeight / 2) {
    arrowUp.classList.add("visible");
  } else {
    arrowUp.classList.remove("visible");
  }
});

// Handle click on the "arrow up" button
arrowUp.addEventListener("click", () => {
  scrollIntoView("#header");
});

arrow-upボタンのJavaScriptファイル.まず、headerのheightはhomeHeight変数window.scrollYに割り当てられ、すなわち、ユーザがheaderのheight/2に垂直にスクロールするとarrow-upボタンにvisible classListが追加される.つまり、タイトルの半分以上をスクロールすると、arrow-up.visibleになって画面に表示されます.ボタンをクリックすると、イベントハンドラが登録され、先に宣言したscrollInteView関数でタイトルのid値に移動します.

同様に透明なNavbarも実現した.

終了時🏻

実は、この間私も長い間勉強したと思います.「ああ、HTML、CSSで十分だ!」という思いで課題を始めました.しかし塞がれている部分も多く、これまでHTMLやCSSを勉強して覚えられなかった部分もたくさんあります.しかし、私が感じることができるのは、私が以前HTML、CSSを勉強したときに感じた楽しみ、私が創造したものが私の目の前に現れて、もっと良い機能を実現したいという欲望が、今でも私に残っていることです.ある意味では、フロントエンド開発者になることを決めた理由はこれらのようです.これから発展すると思っていた私の今回の最初の課題はここまで!