【HTML / CSS】ご注文はNintendo Switchですか??
ご注文はNintendo Switchですか??
Nintendo Switchが欲しい今日この頃、ふと思いました。
HTML、CSSで「Nintendo Switchのロゴ作れるんじゃないか？？」と。
ということでJavaScriptで動きを入れつつ、HTMLとCSSでNintendo Switchのロゴを作ってみました。
完成品
完成品は以下となります。(少しバウンドがずれているのはご愛嬌ください)
フォントは特に合わせていません。
ソースコード
HTMLは以下です。
前提
- リセットCSSとして
destyle.cssを当てています。 - バウンドのアニメーションは
anime.jsライブラリを使用しています。 - CSSはSassを使用しています。
左のコントローラーは<div id="left-logo"></div>です。
右のコントローラーは <div id="right-logo"></div>です。
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/destyle.css@3.0.0/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をいじって円にするだけです。特に難しくないでしょう。
@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は時間の経過に伴うパラメーターの変化率を指定します。
-
上記の値はいい感じにアニメーションしてくれるものを指定しました。
$(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' }
]
});
}
参考文献
まとめ
この記事では、JavaScriptで動きを入れつつ、HTMLとCSSでNintendo Switchのロゴの作成方法を紹介しました。意外と簡単にできました。
他にも何かロゴを作ってみたいと思います。(リクエストなどあればお願いします！)
Discussion