日々の学習のアウトプットの為、自主学習の際に工夫した内容を記録していきます。
今回は 自分が作成した１カラムＷＥＢデザインのオリジナルサンプルを紹介します。
（※練習で作成したデザインなので、機能性は乏しいかもしれません…）
###テーマ：javascript の動的制御で１カラムの背景ウインドウに複数の animation プロパティを適用し、複数の役割を与える。
####記述サンプル
今回はHTMLファイルに全ての記述を行うので、コードをそのままコピペするだけで、実際の動作を確認出来るようにしました。
HTML
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style>
* {
margin: 0;
}
#screen {
background-color: rgba(15,15,15,0.9);
border-radius: 20px;
min-height: 95%;
max-width: 750px;
position: fixed;
top: 50%;
right: 50%;
z-index: 0;
transform: translate(50%, -50%);
-webkit-transform: translate(50%, -50%);
animation: start 1s ease 1s 1 normal forwards running;
-webkit-animation: start 1s ease 1s 1 normal forwards running;
}
@keyframes start {
0% {
width: 0;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.4);
}
100% {
width: 90%;
box-shadow: 25px 50px 20px 10px rgba(0,0,0,0.4);
}
}
@-webkit-keyframes start {
0% {
width: 0;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.4);
}
100% {
width: 90%;
box-shadow: 25px 50px 20px 10px rgba(0,0,0,0.4);
}
}
#hide_start {
color: #fff;
pointer-events: none;
margin: auto;
opacity: 0;
width: 90%;
max-width: 750px;
position: relative;
top: 40px;
animation: show 1s 2s forwards;
-webkit-animation: show 1s 2s forwards;
}
@keyframes show {
100% {
opacity: 1;
pointer-events: unset;
}
}
@-webkit-keyframes show {
100% {
opacity: 1;
pointer-events: unset;
}
}
#button_1 {
cursor: pointer;
position: fixed;
right: calc(5% + 20px);
z-index: 2;
border-radius: 10px;
transition: all 1s 0s ease;
-webkit-transition: all 1s 0s ease;
}
#button_1.menu {
right: calc(2% + 20px);
}
#screen.open {
box-shadow: 25px 50px 20px 10px rgba(0,0,0,0.4);
animation: menu_o 1s ease 0s 1 normal forwards running;
-webkit-animation: menu_o 1s ease 0s 1 normal forwards running;
}
#screen.close {
box-shadow: 25px 50px 20px 10px rgba(0,0,0,0.4);
animation: menu_c 1s ease 0s 1 normal forwards running;
-webkit-animation: menu_c 1s ease 0s 1 normal forwards running;
}
@keyframes menu_o {
0% {
width: 90%;
}
100% {
width: 60%;
right: 20px;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
}
}
@-webkit-keyframes menu_o {
0% {
width: 90%;
}
100% {
width: 60%;
right: 20px;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
}
}
@keyframes menu_c {
0% {
width: 60%;
right: 20px;
transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
}
100% {
width: 90%;
right: 50%;
transform: translate(50%, -50%);
-webkit-transform: translate(50%, -50%);
}
}
@-webkit-keyframes menu_c {
0% {
width: 60%;
right: 20px;
transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
}
100% {
width: 90%;
right: 50%;
transform: translate(50%, -50%);
-webkit-transform: translate(50%, -50%);
}
}
#menu {
box-sizing: border-box;
opacity: 1;
padding-left: 1em;
position: fixed;
right: 20px;
width: 60%;
max-width: 750px;
transition: all .5s;
-webkit-transition: all .5s;
}
#menu.none {
opacity: 0;
pointer-events: none;
}
#content {
box-sizing: border-box;
padding: 0 1em;
margin: auto;
position: relative;
transition: all .5s;
-webkit-transition: all .5s;
}
#content.none {
opacity: 0;
pointer-events: none;
}
@media(min-width: 850px) {
/* PC設定 */
#screen {
animation: start 1.5s ease 1s 1 normal forwards running;
-webkit-animation: start 1.5s ease 1s 1 normal forwards running;
}
#button_1 {
right: calc(50% - 360px);
}
}
</style>
<body id="" class="">
<div id="screen" class=""></div>
<div id="hide_start">
<button type="button" id="button_1" class="">〇</button>
<nav id="menu" class="none">
<h2>MENU</h2>
</nav>
<main id="content">
<h1>CONTENTS</h1>
</main>
</div>
</body>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#button_1").click(function() {
if($("#menu").hasClass("none")) {
$("#screen").removeClass("close");
$("#screen").addClass("open");
} else {
$("#screen").removeClass("open");
$("#screen").addClass("close");
}
$("#button_1").toggleClass("menu");
$("#menu").toggleClass("none");
$("#content").toggleClass("none");
});
});
</script>
</html>
###解説
１・サイトコンテンツの背景となるウインドウ部分を空の div タグ #screen で記述。
↓
２・javascript の動的制御で #screen にクラスを付け替える事で、transition や複数の animation プロパティを付け替え、メインコンテンツやサイドメニューの背景ウインドウに可変される。
↓
３・後はサイト全体の表示が整うように色々書き加えていく…
文章としては以上になるのですが、実際に記述してみようとすると、最低限の情報量でも想像していた以上に実装に苦労しました。
実際の動作が気になる方は、テキストデータを丸ごとコピペして確かめてみましょう…！
（簡素な作りですが、感想、アドバイスなどあれば頂けると幸いです）
今回はこれで以上になります。
あくまで自分用の備忘録ですが、他の方の参考になれば幸いです。