Nintendo Switch를 주문하셨습니까?

18398 단어 SassHTML5HTMLJavaScriptCSS3
Nintendo Switch를 주문하셨습니까?
오늘 이맘때 문득 Nintendo Switch를 갖고 싶다는 생각이 들었어요.
HTML, CSS에는'Nintendo Switch 로고를 만들 수 있지 않나요?'잠깐만요.
따라서 자바스크립트로 액션을 넣으면서 HTML과 CSS로 Nintendo Switch 로고를 만든다.
완성품
최종 품목은 다음과 같습니다.(점프가 틀려서 마음에 드십시오)
글씨체가 특별히 일치하지 않습니다.

소스 코드
HTML은 다음과 같습니다.
전제 조건
  • 를 재설정 CSSdestyle.css로 사용합니다.
  • CDN: https://cdn.jsdelivr.net/npm/[email protected]/destyle.css
  • 점프 애니메이션 사용anime.js 프로그램 라이브러리.
  • CDN: https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js
  • CSS는 Sass를 사용합니다.
    • 왼쪽 컨트롤러는<div id="left-logo"></div>입니다.
    오른쪽 컨트롤러는<div id="right-logo"></div>입니다.
    HTML은 매우 간단한 구조이다.
    index.html
    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../../images/favicon.png">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/destyle.css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <title>Nintendo Switch</title>
</head>
<body>
<main id="main" class="wrapper">
    <div id="logo-container">
        <div id="left-logo"></div>
        <div id="right-logo"></div>
    </div>
    <div id="name-container">
        <p id="nintendo">NINTENDO</p>
        <p id="switch">SWITCH<span>TM</span></p>
    </div>
</main>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/script.js"></script>
</body>
</html>
    SCSS는 다음과 같습니다.
    각 컨트롤러는 display: flex에서 가로로 배열justify-content: center;.
    컨트롤러 자체의 스타일도 border-radius과border 정도의 장난은 상당히 간단하다.
    각 컨트롤러의'원'은 위조원소after를 사용하고 position: absolute;에 위치를 고정시켰다.나머지는 엔으로 border-radius하는 것이다.특별히 어려운 건 없죠?
    style.scss
    @charset "utf-8";

$base-color: #E7000B;
$main-color: #fff;

html {
    font-size: 100%;
}

body {
    background-color: $base-color;
    color: $main-color;
}

.wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 4%;
}

#main {
    display: flex;
    flex-direction: column;
    margin-top: 240px;

    #logo-container {
        display: flex;
        justify-content: center;

        #left-logo {
            position: relative;
            width: 132px;
            height: 270px;
            margin-right: 14px;
            border-radius: 70px 0 0 70px;
            border: 22px solid $main-color;

            &:after {
                position: absolute;
                top: 36px;
                left: 22px;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: $main-color;
                content: "";
            }
        }

        #right-logo {
            position: relative;
            width: 112px;
            height: 270px;
            margin-left: 14px;
            border-radius: 0 70px 70px 0;
            background-color: $main-color;

            &:after {
                position: absolute;
                top: 122px;
                left: 28px;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: $base-color;
                content: "";
            }
        }
    }

    #name-container {
        margin-top: 40px;
        text-align: center;

        #nintendo {
            font-size: 2.6rem;
            font-weight: bold;
            letter-spacing: 22px;
        }

        #switch {
            font-size: 4.8rem;
            font-weight: bold;
            letter-spacing: 10px;

            span {
                font-size: 0.8rem;
                font-weight: normal;
                letter-spacing: 0;
            }
        }
    }
}
    로고 자체는 정말 간단한 요소와 스타일로만 만들어졌어요!
    JavaScript는 다음과 같습니다.anime()anime입니다.js 라이브러리에서 준비한 물건입니다. 간단하게 애니메이션보다 가벼운 라이브러리를 만들 수 있습니다.moveRightLogo()는 오른쪽 컨트롤러 애니메이션의 함수이고 moveLeftLogo()는 왼쪽 컨트롤러 애니메이션의 함수를 정의했다.
  • targets 애니메이션할 선택기를 지정합니다.
  • translateY 수직 애니메이션을 배열로 정의할 수 있습니다.
  • value는 애니메이션의 이동 거리입니다.
  • duration는 애니메이션의 길이(ms)입니다.
  • delay는 애니메이션의 시작 지연 시간(ms)입니다.
  • easing 시간의 흐름에 따라 파라미터의 변화율을 지정한다.
    • 위의 수치는 사람에게 좋은 느낌을 주는 애니메이션을 지정했다.
    script.js
    $(function () {
    moveRightLogo();
    moveLeftLogo();
});

function moveLeftLogo() {
    anime({
        targets: '#left-logo',
        translateY: [
            { value: 32, duration: 40, delay: 460, easing: "easeInQuint" },
            { value: 0, easing: 'easeOutCubic' }
        ]
    });
}

function moveRightLogo() {
    // ロゴのボーダーを含む高さを取得する
    const height = $('#right-logo').outerHeight();
    anime({
        targets: '#right-logo',
        translateY: [
        // 初期は(高さ/2)から下に落ちるようなアニメーション。
        // バウンドした後は高さ0に戻す。
            { value: -(height / 2), duration: 0, easing: 'linear' },
            { value: 32, duration: 500, easing: 'easeInQuint' },
            { value: 0, easing: 'easeOutSine' }
        ]
    });
}
    참고 문헌
    총결산
    이 글에서는 자바스크립트에 동작을 추가하면서 HTML과 CSS에서 Nintendo Switch의 로고를 만드는 방법을 소개한다.의외로 간단해요.
    나는 또 다른 로고를 만들고 싶다.스케줄러:부탁이 있으면부탁해!
    병합 분석
    Code First Migrations 데이터 마이그레이션 노트

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage