infinite auto scrolling gallery - HTML

레이아웃

header

• 우측상단(div.tog)
  -- span 2개로 버튼 표현
  -- 클릭시, 좌측하단에 link 메뉴 생성 (div.links)
  --- 메뉴 생성시, 인터랙션은? (하단으로 사라지고, 하단에서 올라오고)
• 좌측상단(span.wrap)
  -- 로고 h1

main

• 갤러리 더미 (img-section) 7개
  -- 이미지 (div.img)
  -- 이미지 설명 (div.proj-info-idx)
  -- 이미지와 이미지 설명은 나란히,

• 갤러리 더미 인터랙션
  -- 위치는 정렬x
  -- 기본 움직임은 아래로 이동, 클릭시 방향 반전
  -- 무한 스크롤

HTML

우측 상단 메뉴 버튼

-- div.menu-tog로 관리
-- 막대기 2개 (span 2개)

<div class="menu-tog">
    <span></span>
    <span></span>
</div>

좌측 하단 link들

우측 상단 메뉴를 누르면 아래에서 솟아오르는 인터랙션
각 링크들은 menu-wrap 클래스로 관리하고,
전체를 links 클래스로 한번 묶고,
전체를 menu 클래스로 한번 더 묶기.

<div class="menu">
    <div class="links">
      <ul>
        <li class="menu-wrap"><a href="#">Works/<span>01</span></a></li>
        <li class="menu-wrap"><a href="#">About/<span>02</span></a></li>
        <li class="menu-wrap"><a href="#">Blog/<span>03</span></a></li>
        <li class="menu-wrap"><a href="#">Contact/<span>04</span></a></li>
      </ul>
    </div>
</div>

좌측 상단 로고

로고와 갤러리 더미들은 wrap 클래스로 관리 (메뉴 클릭하면 main과 함께 로고도 사라져야 하므로 wrap으로 관리)
header 클래스로 한번 더 묶기

<div class="header">
    <span class="wrap">
      <h1>Studio</h1>
    </span>
</div>

main 갤러리 들어갈 공간

img-section 안에 img랑 proj-info 2개.
위치를 자유롭게 하기 위해 숫자로 표현
-- img-1, img-2, img-3
-- proj-info-1, proj-info-2, proj-info-3

갤러리 더미를 div.content로 묶고,
div.scrollable로 한번 더 묶기

<main>
    <div class="scrollable">
      <div class="content">
        <section class="img-section">
          <div class="wrap img-2">
            <div class="img"></div>
          </div>
          <div class="proj-info-2">
            <span class="wrap"><h1 class="info-text">01</h1></span>
            <span class="wrap"><h1 class="info-text">Dining / Lounge</h1></span>
            <span class="wrap"><h1 class="info-text">New York</h1></span>
            <span class="wrap"><h1 class="info-text">2022</h1></span>
          </div>
        </section>

        <section class="img-section">
          <div class="wrap img-1">
            <div class="img"></div>
          </div>
          <div class="proj-info-1">
            <span class="wrap"><h1 class="info-text">02</h1></span>
            <span class="wrap"><h1 class="info-text">Space</h1></span>
            <span class="wrap"><h1 class="info-text">Paris</h1></span>
            <span class="wrap"><h1 class="info-text">2022</h1></span>
          </div>
        </section>

        <section class="img-section">
          <div class="wrap img-3">
            <div class="img"></div>
          </div>
          <div class="proj-info-3">
            <span class="wrap"><h1 class="info-text">03</h1></span>
            <span class="wrap"><h1 class="info-text">Desk</h1></span>
            <span class="wrap"><h1 class="info-text">London</h1></span>
            <span class="wrap"><h1 class="info-text">2022</h1></span>
          </div>
        </section>

        <section class="img-section">
          <div class="wrap img-1">
            <div class="img"></div>
          </div>
          <div class="proj-info-1">
            <span class="wrap"><h1 class="info-text">04</h1></span>
            <span class="wrap"><h1 class="info-text">Detail</h1></span>
            <span class="wrap"><h1 class="info-text">Madrid</h1></span>
            <span class="wrap"><h1 class="info-text">2022</h1></span>
          </div>
        </section>

        <section class="img-section">
          <div class="wrap img-3">
            <div class="img"></div>
          </div>
          <div class="proj-info-3">
            <span class="wrap"><h1 class="info-text">05</h1></span>
            <span class="wrap"><h1 class="info-text">Modern</h1></span>
            <span class="wrap"><h1 class="info-text">Milan</h1></span>
            <span class="wrap"><h1 class="info-text">2022</h1></span>
          </div>
        </section>

        <section class="img-section">
          <div class="wrap img-2">
            <div class="img"></div>
          </div>
          <div class="proj-info-2">
            <span class="wrap"><h1 class="info-text">06</h1></span>
            <span class="wrap"><h1 class="info-text">Luxury</h1></span>
            <span class="wrap"><h1 class="info-text">Biarritz</h1></span>
            <span class="wrap"><h1 class="info-text">2022</h1></span>
          </div>
        </section>

        <section class="img-section">
          <div class="wrap img-1">
            <div class="img"></div>
          </div>
          <div class="proj-info-1">
            <span class="wrap"><h1 class="info-text">07</h1></span>
            <span class="wrap"><h1 class="info-text">Furniture</h1></span>
            <span class="wrap"><h1 class="info-text">Lisbon</h1></span>
            <span class="wrap"><h1 class="info-text">2022</h1></span>
          </div>
        </section>
      </div>
    </div>
  </main>

참고

Vanilla JavaScript Project: Infinite Auto Scrolling Gallery With Clean Menu