연말까지 매일 지속적으로 웹 사이트를 만드는 대학생~ 16일째 Ap●le 공식 사이트의 첫보기를 따라 해보세요~

입문

안녕하세요.
연말까지 매일 웹 사이트를 만드는 사람입니다.
오늘은 인터넷 제작에서 돈을 받기 위한 연습이기 때문에 원본 코드를 보지 않고 Ap●le의 첫보기를 흉내냈다.(폰트 소스만 봤어요)
처리 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 줄 수 있다면 좋겠다.
오늘이 16일째다.(2019/11/3)
잘 부탁드립니다.

사이트 URL

한 일

Ap●le의 첫 번째 보기를 모방해봤다.
우선 결과부터 (gif)↓

다음 순서에 따라 설명하다.

수동 메뉴의 표시 변경 방법

애니메이션 삽입 방법 및 주의사항

JavaScript 제작 요소를 사용합니다

1. 수동 메뉴 표시 방법 수정

마침 헤더의 메뉴 수는 767px와 768px로 바뀌었다.
그래서 우선 css의 미디어 조회에서 크기에 따라 스타일을 변경합니다.

/* ↓これでサイズごとにメニューの数を変更する */
@media screen and (max-width:767px) {
    #width767px {
        display: flex;
        justify-content: space-around;
        min-width: 320px;
        width: 100%;
    }
.headerItem1 {
/* ↓メニューの切り替えはこれで行う */
    display: none;
}
}
@media screen and (min-width:768px) {
    #width_1000px {
        display: flex;
        justify-content: space-around;
        min-width: 768px;
        max-width: 1000px;
        width: 100%;
    }
    .headerItem2 {
/* ↓メニューの切り替えはこれで行う */
        display: none;
    }
}

두 가지dom와 디자인을 미리 준비해서 디스플레이의 none에서 어떤 px 이상이면 이쪽을 끄고 다른 때는 이쪽을 끄도록 했습니다.

2. 애니메이션 삽입 방법 및 참고 사항

다음은 애니메이션의 삽입인데 이것은 기본적으로 html로 쓴 것이다.전체적으로 보여주고 싶은 등 작은 부분은 css의 등장입니다.
html ↓

     <video id="first_video" muted autoplay loop>
            <source src="sample1.mp4">
     </video>

#first_video {
/* ↓固定する */
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
/* ↓headerを隠さないようにz-indexを指定する */
    z-index: -100;
/* ↓画面全体に表示されるようにする */
    background-size: cover;
}

html 방면에 주의점이 하나 있다.속성에muted를 넣지 않으면 애니메이션이 자동으로 재생되지 않기 때문에 자동으로 재생하려면 반드시 넣어야 합니다.(참고로muted와는 전혀 상관없지만source 라벨을 사용하지 않고 비디오 라벨에 src 속성을 쓰고 싶어서 30분 정도 분투했습니다. src를 비디오에 직접 쓰면 안 되는데...)

3. JavaScript 제작 요소 사용

이것은 경품이라고 할 수 있다. 꼭 해야 하는 것은 아니지만, 장래를 예견하고 스크립트에서 DOM을 만지작거리는 연습을 했다.

window.onload = function () {

    let width_1000px = document.getElementById('width_1000px');
    let width767px = document.getElementById('width767px');
    let text = ['#ロゴ',
        'Mac',
        'iPad',
        'iPhone',
        'Watch',
        'TV',
        'Music',
        'サポート',
        '#検索',
        '#バッグ'
    ];
    let text2 = ['#メニュ', '#ロゴ', 'バッグ'];


    for (var i = 0; 10 > i; i++) {
        var headerItem = document.createElement('div');
        var headerItemText = document.createTextNode(text[i]);
        console.log(headerItemText);
        headerItem.appendChild(headerItemText);
        headerItem.setAttribute('class', 'headerItem headerItem1');
        width_1000px.appendChild(headerItem);
    }

    for (var i = 0; 3 > i; i++) {
        var headerItem = document.createElement('div');
        var headerItemText = document.createTextNode(text2[i]);
        headerItem.appendChild(headerItemText);
        headerItem.setAttribute('class', 'headerItem headerItem2');
        width767px.appendChild(headerItem);
    }
}

사이즈마다 두 개의 도안 요소를 써야 한다.
길어서 더 쉽게 쓸 수 있을 것 같아요.(혹은 다른 방법이 있을 것 같다)

감상

오늘은 겉모습만 흉내낼 뿐 동작도 설치하지 않았다.그래서 사이즈가 작아질 때 햄버거 메뉴를 눌러도 메뉴가 나오지 않는다.사이트를 만드는 게 힘들겠지만 실제로 보는 형식이 된다면 즐겁다.
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

참고 자료

Free Stock Video Footage HD Royalty-Free Videos Download ( https://mazwai.com/#/grid )

동영상 썼어요.정말 감사합니다.