SpaceX 소개 페이지 클론(일반 Html, CSS 및 Javascript 포함)

이 블로그에서는 SpaceX 웹 사이트와 같은 로그인 페이지를 만드는 방법을 학습합니다.

데모

현장 프레젠테이션
here 에서 라이브 데모를 볼 수 있습니다.

소스 코드
here에서 모든 소스 코드와 미디어 파일을 찾을 수 있습니다.

당신은 다음과 같은 것을 배울 수 있습니다.

Javascript 교차점 관찰자 추가 효과

DOM 운영

은 요소를 css 위치와 정렬합니다.

응답 웹 사이트를 만드는 방법

요구 사항:

기본 Html

기본 Css

기본 Javascript

나는 이미 동영상 강좌를 하나 만들었다.나는 이미 영어로 모든 것을 설명했다
영상의 디테일.
좋아하고 공유하고 구독하는 것을 잊지 마세요.
본 블로그에서 나는 교차점 관찰자와 머리 애니메이션에 관한 자바스크립트 코드만 설명할 것이다.그것은 매우 길기 때문에, 너는 좋아하지 않을 것이다.대신 HTML과 css를 간략하게 소개하겠습니다.걱정하지 마, 이해할 거야.만약 당신이 아무것도 모른다면 동영상을 보고 언제든지 나에게 질문을 하세요.

그럼 시작합시다.
이동 우선 방법을 사용하여 페이지를 만들 것입니다.

바닥글

<footer class="footer">
    <div class="footer__text">SPACEX © 2021</div>

    <ul class="footer__list">
        <li><a class="footer__list__link" href="#">Twitter</a></li>
        <li><a class="footer__list__link" href="#">youtube</a></li>
        <li><a class="footer__list__link" href="#">instagram</a></li>
        <li><a class="footer__list__link" href="#">flickr</a></li>
        <li><a class="footer__list__link" href="#">Linkedin</a></li>
        <li><a class="footer__list__link" href="#">Privacy Policy</a></li>
    </ul>
</footer>

.footer {
    position: relative;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 400;
    padding: 1.5rem 0;
}

.footer__text {
    color: #979797;
}

.footer__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 1rem;
    padding-top: 1rem;
    margin: 0 auto;
}

.footer__list li {
    margin: 0 10px 10px 0;
}

.footer__list__link {
    font-weight: 600;
    transition: color 1s cubic-bezier(0.25, 1, 0.25, 1);
}

.footer__list__link:hover {
    color: #8b939b;
}

임무 부서

<section class="mission__container">
    <div class="background one"></div>

    <div class="bottom__content">
        <h4 class="bottom__content__subheader">RECENT LAUNCH</h4>

        <h1 class="bottom__content__header">
            Double Asteroid Redirection Test (DART) Mission
        </h1>

        <a class="content__button" href="#">
            <span class="text">RE-WATCH</span>
            <div class="hover"></div>
        </a>
    </div>
</section>

<section class="mission__container">
    <div class="background two"></div>

    <div class="bottom__content">
        <h4 class="bottom__content__subheader">RECENT LAUNCH</h4>

        <h1 class="bottom__content__header">
            Double Asteroid Redirection Test (DART) Mission
        </h1>

        <a class="content__button" href="#">
            <span class="text">RE-WATCH</span>
            <div class="hover"></div>
        </a>
    </div>
</section>

<section class="mission__container">
    <div class="background three"></div>

    <div class="bottom__content">
        <h4 class="bottom__content__subheader">RECENT LAUNCH</h4>

        <h1 class="bottom__content__header">
            Double Asteroid Redirection Test (DART) Mission
        </h1>

        <a class="content__button" href="#">
            <span class="text">RE-WATCH</span>
            <div class="hover"></div>
        </a>
    </div>
</section>

<section class="mission__container">
    <div class="background four"></div>

    <div class="bottom__content">
        <h4 class="bottom__content__subheader">RECENT LAUNCH</h4>

        <h1 class="bottom__content__header">
            Double Asteroid Redirection Test (DART) Mission
        </h1>

        <a class="content__button" href="#">
            <span class="text">RE-WATCH</span>
            <div class="hover"></div>
        </a>
    </div>
</section>

<section class="mission__container">
    <div class="background five"></div>

    <div class="bottom__content">
        <h4 class="bottom__content__subheader">RECENT LAUNCH</h4>

        <h1 class="bottom__content__header">
            Double Asteroid Redirection Test (DART) Mission
        </h1>

        <a class="content__button" href="#">
            <span class="text">RE-WATCH</span>
            <div class="hover"></div>
        </a>
    </div>
</section>

.mission__container {
    height: 100vh;
    position: relative;
}

.mission__container .background {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.mission__container .background:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}

.mission__container .background.one {
    background-image: url(../media/1.webp);
}

.mission__container .background.two {
    background-image: url(../media/2.webp);
}

.mission__container .background.three {
    background-image: url(../media/3.webp);
}

.mission__container .background.four {
    background-image: url(../media/4.webp);
}

.mission__container .background.five {
    background-image: url(../media/5.webp);
    background-position: 65% center;
}

.mission__container .bottom__content {
    position: absolute;
    bottom: 10%;
    left: 1.5rem;
    width: 90%;
    max-width: 500px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 1s, transform 1s;
}

.mission__container .bottom__content .bottom__content__header {
    font-size: 2rem;
    text-align: left;
    margin: 0 0 1rem auto;
    font-weight: 600;
}

.mission__container .bottom__content .bottom__content__subheader {
    font-size: 1rem;
}

.mission__container .bottom__content .content__button {
    border: 2px solid white;
    display: inline-block;
    position: relative;
    z-index: 2;
    margin-top: 1rem;
}

.mission__container .bottom__content .content__button .text {
    font-weight: bold;
    font-size: 0.8rem;
    display: inline-block;
    text-transform: uppercase;
    padding: 1.2rem 2.5rem;
    transition: color 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.mission__container .bottom__content .content__button .hover {
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    height: 100%;
    width: 100%;
    z-index: -1;
    transform: scale3d(1, 0, 1);
    transform-origin: top center;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.mission__container .bottom__content .content__button:hover .hover {
    transform: scale3d(1, 1, 1);
    transform-origin: bottom center;
}

.mission__container .bottom__content .content__button:hover .text {
    color: black;
}

.mission__container.on__screen .bottom__content {
    opacity: 1;
    transform: translateY(0);
}

const missons = document.querySelectorAll('.mission__container')

const missionObserver = new IntersectionObserver(
    entries => {
        const ON_SCREEN = 'on__screen'
        entries.forEach(entry => {
            const { isIntersecting, target } = entry

            if (isIntersecting) {
                target.classList.add(ON_SCREEN)
                return true
            }

            target.classList.remove(ON_SCREEN)
        })
    },
    {
        threshold: 0.5,
    }
)

missons.forEach(misson => {
    missionObserver.observe(misson)
})

설명:

우선, 우리는 모든 임무 컨테이너를 선택했다.

그리고 우리는 IntersectionObserver의 새로운 실례를 만들었다.저희가

을 통과했습니다.

그리고 우리는 IntersectionObserver의 새로운 실례를 만들었다.우리는 원소가 보기에 들어갈 때마다 함수를 전달했다.

우리는 모든 임무 단원에서 순환하고 missionObserver으로 그것들을 관찰한다.

모든 항목 (대상 그룹) 을 매개 변수로 합니다.항목마다 두 개의 속성이 있다.

isIntersecting: 요소가 뷰에 있는지 여부는 부울 값입니다.

목표: 현재 요소.

만약 isIntersecting이 사실이라면 우리는 on__screen류를 이 원소에 추가할 것이다.그렇지 않으면 우리는 이 과정을 취소할 것이다.

on__screen학급이 bottom__content을 전시한다.

참고로 이 블로그는 최초로 cules coding website.에 발표되었다.만약 네가 한번 참관할 수 있다면 나는 매우 기쁠 것이다.


타이틀

<header class="header show">
    <div class="background"></div>

    <div class="header__inner">
        <div class="header__logo">
            <a href="#">
                <img src="./media/logos//spacex-logo.png" alt="SpaceX" />
            </a>
        </div>

        <nav class="header__navigation">
            <ul>
                <li>
                    <a class="nav__link" href="#">Falcon 9</a>
                </li>
                <li>
                    <a class="nav__link" href="#">Falcon Heavy</a>
                </li>
                <li>
                    <a class="nav__link" href="#">Dragon</a>
                </li>
                <li>
                    <a class="nav__link" href="#">STARSHIP</a>
                </li>
                <li>
                    <a class="nav__link" href="#">human space flight</a>
                </li>
                <li>
                    <a class="nav__link" href="#">rideshare</a>
                </li>
            </ul>

            <div class="shop__container">
                <a class="nav__link" href="#">shop</a>
            </div>
        </nav>

        <button class="hamburger hamburger--emphatic" type="button">
            <span class="hamburger-box">
                <span class="hamburger-inner"></span>
            </span>
        </button>
    </div>
</header>

.header {
    height: 5rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    transform: translateY(-100%);
    transition: transform 0s 0s;
}

header#hiding .header__inner {
    transition-delay: 0s;
}

header#hiding .background {
    transition-delay: 0.3s;
}

header#hiding {
    transition-delay: 0.9s;
}

.header.show {
    transform: translateY(0);
}

.header.show .header__inner {
    opacity: 1;
}

.header .background {
    background: black;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
}

.header.show.with__background .background {
    transform: translateY(0);
}

.header .header__inner {
    height: 100%;
    width: 100%;
    display: flex;
    opacity: 0;
    transition: opacity 0.2s 0.6s;
}

.header__logo {
    flex-grow: 1;
    overflow: hidden;
    margin: auto 0;
}

.header__logo a {
    display: block;
    width: 10rem;
    margin: 0 auto;
}

.header__logo a img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.header__navigation {
    flex-grow: 2;
    display: none;
    justify-content: space-between;
    align-items: center;
}

.header__navigation ul li {
    margin: 0 0.7rem;
    display: inline-block;
}

.header__navigation .nav__link {
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    position: relative;
}

.header__navigation .shop__container {
    flex-basis: 5rem;
    text-align: center;
}

.header__navigation .nav__link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: white;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.header__navigation .nav__link:hover:after {
    transform: scaleX(1);
    transform-origin: left center;
}

const header = document.querySelector('.header')

const IS_ACTIVE = 'is-active'
const SHOW = 'show'
const WITH_BACKGROUND = 'with__background'

let prevScrollPos = window.pageYOffset

window.onscroll = () => {
    const currentScrollPos = window.pageYOffset
    const halfScreenHeight = Math.floor(window.innerHeight / 2)

    if (currentScrollPos > halfScreenHeight) {
        header.classList.add(WITH_BACKGROUND)
    } else {
        header.classList.remove(WITH_BACKGROUND)
    }

    const HIDING = 'hiding'

    if (currentScrollPos > prevScrollPos) {
        header.classList.remove(SHOW)
        header.setAttribute('id', HIDING)

        setTimeout(() => {
            header.removeAttribute('id', HIDING)
        }, 900)
    } else {
        header.classList.add(SHOW)
    }

    prevScrollPos = currentScrollPos
}

제목 애니메이션을 설명해 드릴게요.

은 header이 show 클래스를 가지고 있을 때만 제목을 표시합니다.기본적으로 그것은 거기에 있을 것이다.만약 우리가 아래로 스크롤한다면, show 클래스는 삭제될 것입니다.아래로 스크롤하면 추가됩니다.이 종류를 삭제할 때, 우리는 hiding id를 추가할 것입니다. 0.9s 이후에, 우리는 이 id를 삭제할 것입니다.

은 제목이 with__background 클래스인 경우에만 배경을 표시합니다.하면, 만약, 만약...

은 제목이 with__background 클래스인 경우에만 배경을 표시합니다.페이지의 상단에 스크롤 위치가 있으면 with__background 클래스가 삭제됩니다.
두 가지 유형의 애니메이션이 있습니다.

아래로 스크롤:

수확대 내부 부품이 뜯겨진다.

그런 다음 배경이 삭제됩니다.

마지막으로 수확대는 제거됩니다.

위로 스크롤:

머리글이 표시됩니다.

배경이 표시됩니다.

수확대 내부 부품이 표시됩니다.

네가 관심을 가져야 할 것은 애니메이션의 지속 시간과 지연이다.

위로 스크롤:

제목은 지연 없이 즉시 표시됩니다.

배경 화면 표시 시간은 0.5초, 지연 시간은 0.1초입니다.

수확대 내부는 0.2초 안에 표시됩니다.하지만

년 이후

수확대 내부는 0.2초 안에 표시됩니다.그러나 이는 배경 애니메이션 이후 0.5 + 0.1 = 0.6초가 걸릴 것이다.그래서 이것은 우리의 지연이 될 것이다.

아래로 스크롤:
이제 지연을 변경하기만 하면 됩니다.

수확대 내부는 즉시 사라집니다.

배경은 수확대 내부에서 제거됩니다.제목 내부 애니메이션은 0.2초 정도 걸립니다.그래서 배경이 0.3초로 늦어졌다.

제목은 배경 뒤에 삭제됩니다.배경 애니메이션은 0.5 + 0.3초가 소요됩니다.이에 따라 지연 시간은 0.9초다.

오른쪽 탐색

<nav class="navigation__menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Launch</a></li>
        <li><a href="#">mission</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Press</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

.navigation__menu {
    position: fixed;
    top: 0;
    right: 0;
    background: black;
    z-index: 5;
    width: 80%;
    max-width: 20rem;
    height: 100%;
    transform: translateX(100%);
    transition: all 0.5s ease-in-out;
}

.navigation__menu ul {
    width: 80%;
    margin: 0 auto;
    margin-top: 8rem;
    text-align: right;
}

.navigation__menu ul li {
    transform: translateY(100%);
    transition: all 1s 0.6s;
    opacity: 0;
}

.navigation__menu ul li a {
    display: block;
    font-size: 1rem;
    line-height: 40px;
    font-weight: 500;
    text-transform: uppercase;
    border-bottom: 1pt solid #252525;
    transition: color 0.4s cubic-bezier(0.25, 1, 0.25, 1);
}

.navigation__menu ul li a:hover {
    color: #8b939b;
}

.navigation__menu.open {
    transform: translateX(0);
}

.navigation__menu.open ul li {
    opacity: 1;
    transform: translateY(0);
}

const hamburger = document.querySelector('.hamburger')
const navigation = document.querySelector('.navigation__menu')

const IS_ACTIVE = 'is-active'

hamburger.addEventListener('click', () => {
    hamburger.classList.toggle(IS_ACTIVE)
    navigation.classList.toggle('open')
})

설명:

내비게이션은 is-active류가 존재할 때만 표시됩니다.

우리가 햄버거를 눌렀을 때, 우리는

과 에서 isactive류를 전환할 것이다

우리가 햄버거를 눌렀을 때 우리는 hamburger과 navigation 요소의 is활동류를 전환할 것이다.

반응은 민첩했다

/* sm = 600 */
/* md = 900 */
/* lg = 1200 */
/* xl = 1600 */

@media screen and (min-width: 600px) {
    .mission__container .bottom__content {
        bottom: 15%;
        left: 3rem;
    }

    .header .header__logo a {
        width: 13rem;
    }

    .footer .footer__list {
        width: 90%;
    }
}

@media screen and (min-width: 900px) {
    .mission__container .bottom__content {
        left: 4rem;
        max-width: 600px;
    }

    .mission__container .bottom__content .bottom__content__header {
        font-size: 2.5rem;
        margin: 1rem 0;
    }

    .mission__container .bottom__content .bottom__content__subheader {
        font-size: 1.5rem;
    }

    .footer .footer__list {
        width: 60%;
    }
}

@media screen and (min-width: 1200px) {
    .header__navigation {
        display: flex;
    }

    .mission__container .bottom__content {
        left: 6rem;
    }

    .mission__container .bottom__content .bottom__content__header {
        font-size: 3rem;
    }

    .mission__container .bottom__content .content__button .text {
        padding: 1.5rem 3rem;
    }

    .header {
        height: 6.5rem;
    }

    .header .header__logo {
        flex-grow: 0;
        margin-left: 6rem;
        margin-right: 2rem;
    }

    .header .header__logo a {
        width: 15rem;
    }

    .navigation__menu {
        max-width: 30rem;
    }

    .footer .footer__list {
        width: 50%;
    }
}

@media screen and (min-width: 1600px) {
    .mission__container .bottom__content {
        left: 15rem;
    }

    .header .header__logo {
        margin-left: 15rem;
    }

    .footer .footer__list {
        width: 40%;
    }
}

XS


성학대


의학 박사


LG


특대호

이 블로그는 여기까지입니다.나는 일을 간단하게 설명하려고 시도했다.만약 당신이 끊겼다면 마음대로 동영상을 보십시오.여느 때와 마찬가지로 너는 나에게 문제를 물어봐도 된다.
겸사겸사 한마디 하자면, 나는 한 회사에서 나의 기술로 커다란 가치를 제공할 수 있는 새로운 기회를 찾고 있다.만약 당신이 채용 인원이라면, 인터넷 개발에 정통하고 세계 변혁에 열중하는 사람을 찾고 있다면, 언제든지 저에게 연락 주십시오.그 밖에 나는 어떤 프리랜서의 프로젝트에 대해서도 이야기하고 싶다.