[GoodDesign] ヘッダバナー切り替えアクション

2018/10/07

WEBページのデザインは、無限に尽きることがありません。インターネット黎明期の頃から思い返してみると、パソコンのデザインから、ブラウザのデザイン、ボタンや装飾のデザインの流行り廃りなどが頻繁に変わっている事に気がつきます。今時のベンチャー企業のWEBページなどは、非常に見た目にもかっこいいのが多く、ああいうWEBページデザインで自分のWEBページやサービスを立ち上げたいな〜と日々考えてしまうんですが、隣の芝生はとても青く見える心理で、いいと思ったものをどんどん取り込んでしまえばいいだけの話です。そんなわけで、この間codepenで公開されていた、かっこいいデザインが、WEBサイトのバナーに使えそうだったので、自分用のライブラリとして作っておきました。見かけたcodepenのURLは、こちらです。 https://codepen.io/z-/pen/OBPJKK

どんな機能？

縦並びに並んだバナーっぽい画像が、クリックすると、伸縮して、対象の画像（エリア）が表示されて、内容が明確に見えるというもので、WEBサイトのメインバナーで使うと非常に便利ではないかと思います。アイコンを設置しておく事で、ピクトグラム効果により、ある程度の説明をしなくても、中身が想像できるため、メニューリンクとしての見え方もできて、邪魔にならないデザイン cssアニメーションを使っているので、比較的軽めのソースコードとメモリ消費が抑えられます。

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title></title>
	<link rel="stylesheet" href="ef.css"/>
	<script type="text/javascript" src="ef.js"></script>
</head>
<body>

<ul class="base">
  <li class="ef" data-ef="1"></li>
  <li class="ef"></li>
  <li class="ef"></li>
  <li class="ef"></li>
  <li class="ef"></li>
</ul>

</body>
</html>

;(function(){
  var $$ = function(){
    if(document.readyState === "complete"){
			this.start();
		}
		else if(document.readyState === "interactive"){
			$$event(window , "DOMContentLoaded" , $$.prototype.start);
		}
		else{
			$$event(window , "load" , $$.prototype.start);
		}
  };

  $$.prototype.start = function(){
    var elms = document.querySelectorAll(".ef");
    for(var i=0; i<elms.length; i++){
      $$event(elms[i] , "click" ,$$.prototype.efOn);
    }
  };

  $$.prototype.efOn = function(e){
    var target = e.currentTarget;
    $$.prototype.efOff();
    target.setAttribute("data-ef","1");
  };

  $$.prototype.efOff = function(){
    var elms = document.querySelectorAll(".ef");
    for(var i=0; i<elms.length; i++){
      if(elms[i].getAttribute("data-ef") === "1"){
        elms[i].setAttribute("data-ef","0");
      }
    }
  };

  // エレメントにイベントを追加処理
  var $$event = function(target, mode, func){
		if (target.addEventListener){target.addEventListener(mode, func, false)}
		else{target.attachEvent('on' + mode, function(){func.call(target , window.event)})}
  };

  new $$;
})();

.ef:nth-child(1){
  background:url(https://66.media.tumblr.com/2a4fe33bf3ff40b54e3d1b5deec79b99/tumblr_pfgm8m0mIe1v882dao1_1280.jpg);
}
.ef:nth-child(2){
  background:url(https://66.media.tumblr.com/8df8dbd44f59c9b3462a5f580a546ad7/tumblr_pfsw60p5K51w6n0dro1_1280.jpg);
}
.ef:nth-child(3){
  background:url(https://66.media.tumblr.com/c8c7bbc041ad1648de798e9b22d68442/tumblr_pfbqwoBPDI1xyfy9lo1_500.jpg);
}
.ef:nth-child(4){
  background:url(https://66.media.tumblr.com/bccb525c4b4a1695b89b36facbb0cabe/tumblr_pd9a1okpM21qf87z7o1_1280.jpg);
}
.ef:nth-child(5){
  background:url(https://66.media.tumblr.com/c132643cbfe960193d1acfb56f76b6fd/tumblr_otxgc965dg1smg72ko1_540.jpg);
/*   background-size:auto 100%; */
}

.ef:nth-child(1):before{
  background:url(data:image/png;base64,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);
}
.ef:nth-child(2):before{
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAK0SURBVGhD7ZlLyExhHIfHJZH7xrUkLLCQW3KPsrGklJQVdpZKlpS+LISE5BJCWFnYIFKys7ByKzt27pcNuTy/0/xPf69z5jtfM/PNfzRPPek953x6nzm9cy5Tg3F4Hj/g76C+wp3YEEUU/XE0f+EGLMXOxNxsFJMDqDmezEYlWHFktqHmeCUbldALGUQGFDIxsLuwckg3WCnkfWC/YuWQyPS+taLRC4lGUyFDcZZzJhrD0e9rpVMwpamQ8Wj75Ec0ZqDf10pvYUpTIWNRzwHmEzSmod/XSs9iSm+NRKO32MV/s9jH4GPnAzT0qfl9rfQopmxFzfFyNiqhLCQS0/EebspGJXRDSCXKQobhEudCNEag39dK52AjZqNeC83PRo6ykEiLXWhd3kF/7CPMv01tY0qkxT4Bn6KPMF/iKMw3REURCvSTT92B+SAiPkJnZCO+q4+9xzEfpOjqrUVlrkNjJPp9zbgUi0gj7Iq/GNOYg5gPUgZrsT/ElLIIw8fo5Xb2Ydh/mDIa7zpvojEJ/b5mPIIeH/EM0wixCN+ijjmkDaIspBNUifBn4xrqepcRJSSNmIopumDqhZ2OuYp5hIgQ4iOeY1GE1oH9lqObx78iRKdDBhpxCf+JEJ0MqRKxDPWNqWMuYGGE6FRIGqEXGinL0SL0W2dphLCQLW1wM07GFB/xAosiVqBFnEM9ejfkJ1pMO7yNnioRK9EizuAQ7Jc9eKNNXkedFSON0JNfyir8hDrmNFaKGEx0y9NfxGr8jDrmFIaLEJqYJqjnh7KIL6hjTmDICE3qDWqS+7UhYQ1ahG7JQ0aIBahJmvvQWIv2G+ExDBsh9qIPkTozesb5Vh/rLjh0hLiPaYj8Uf/3MIZHLzG+Yxoh9VDUh13BevSTf40XcTsW3VuFRc/3+tR34zxtaD212h9XX6fBFr45JAAAAABJRU5ErkJggg==);
}
.ef:nth-child(3):before{
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQjSURBVGhD7ZlbqFRVGIBPWmppXjCIIvNBSAwNAi0r8aWgLHpJy9JUECGKvFCWRVHQhQq6ghRRGPQiChVFZmUkSkJQGFIQRQ9FFyu7UtH98n278+uePTPnzN6zth5hPvjQtWb2f/a/19rrNn09evQ4JJyAT+CX+G8J/8B38Ao85EzBTzFu7gf8rkN/w7jufuya4ThhANtxBO5Cb+RNnIplOAqvRVvGGBdhZYbhhxhPppUvYivmoZ9/jmOtqMgaNM7urFSRcWiQf7DY9HYTP7PrtGqpZ9HPb8RuGIFfobHmYsS3xTviOLwDDeBNF5mEfjaQf+Lx2C0PYDG2Xe4tXIUm25LL8XuMizZhkSNxBxZbKvwG78YUTMb3MR/fhxT39wGegg0sQruSX1iPjjxDEQeDC/Ft9F4/w5Mww8x/QhNZasVBYDyO+v+/lRiJW9BknrNCHkQrHs9KBzgG2/bDEhhnPj6NH2N+rrArOkzfgtOxDBMxXoVsmLcfWjjdQj9Xoy/Wz3iJFRXwfboG92LcuNryzvi/5OpCn+6p2Ck+fK9zuO77tb9g/xPnEbtaBDfRspyMzgER4w10pPHdM8HgWDwPfS/j6fpCX4+dsBK95iEL8cfyfIJR702UYSbGHPAuXoCd4DzhsuQv9NoN6ApjIOw5fvdRC3HDeWbjTnwZp1nRIbbE12g8u8kYLMv5GK0z2Hpr0ESq4MCwB43lDG8XrcoZGO/QYivaUEsivgPGsTs5UnXLlWi8L3C0FS1InohdKLrUuVYk4nU05q1ZqZnkibgRMsb2rJSOc9C4H2WlZpIn4rrMGFdlpXS42o0RdIYVBZInYj82hqvj1DyGxnbDVSRpIk5wf6NLjzpYi97fPVmpkaSJeNDg9XaBOliCxn8qKzWSNBFnZK93Nq+DFbj/Zgskf0divZZitVzkdjR2qyE4eSJOgsY4KyulxYMOYy/MSo0kT8QX0Rj3ZqV0ONHa2m4p7MJFkidyJhrDvUe75UQVVqNxt2WlZpInIrGcuC0rdY/nYvvQmO2WPbUkMgvd/f2OZ1vRBc7obgO8r5esaEMticidaCwXkGW2rHlMIs4RjLP/lKQFtSWSf5I/4sVYBre+z6DXd9KytSUiziVPYsR9AU/DgTgaPaiILbL/zsHBqDWRwD/yLUZ8DzE8BnXxtwA9Q1uH7ibzJyqvoGdtndCQSGyIWo3T3eJB3H0Yq+N2euDgXsb9ehluRq+/y8Jr/YXLLNSE+3fnmhvwYdyILgI9MLdlPDyvQgz5l1pY3l94D1PstQ8WHjN533bf7LTG/YS/21n5KtbRxVLjBBlHRg0bLk8APdn2A4/vH8FlaJMNJT2p2Yrxy4Hds+nHnxPxefQLQ11b4zpsSiKPm/yb0J+XNw8hHSAcKBwcHA179OjR47Clr+8/lLLZpa3TQa0AAAAASUVORK5CYII=);
}
.ef:nth-child(4):before{
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAMgSURBVGhD7ZlJqI1hGICvIbNMO2QnkWIhK9OGRGTOkI0sZGGBEFYyLmyEIslMFoayVELJkCGkDCvCwkLmeXieP1+dTudw7/2//z/n13nq6fZ93fu+3/tP33CbGjSoTwbhcjyND/E9/vrjK7yB+3AB9sC6oi3OwasYBl3qtwp9+hGP4FCsOSPxFobBvcOTuBC9Ox0w0BP9/dV4BX+gf+PPvdgbc6cNrsNwtV/gUuyEzaU/7sEQ4ymOwtxohwfQ5D9xC3bD1jIYL6HxPuMszBzvxCE0qS/yTIyBj6CPl3G/41TMlLVosg/o8x6bDRjiZ/YRcOBeLR+nWHeiHO/4CbSY+9gRo+In9jaaYJMdGdIFLcJca+yIyVw08EvsakfGTELzvcaoE+d1NPCSpJUPF9CcrhSi4OfRgG8x+jP7F6ahee8krQisRAM6Y+eJ74rLGHM7eabmDBpsftLKl7Nobt/R1DxCg7l2ypv1aO6NSSsln9Bg7ZNWvrj4NPfBpJUCJygDWUwtmILmP5W0UmIgZ/RaMAPN7/ouNU5KBuuetPJlMZp7e9JKyU002IiklS/b0NwrklZK9mO0YC3EPb65xyWtlIQvx+WklR/90JW22+fSLXOrcS/tzs29dV87cmIZegGdFKNxHA26K2llT2d8huYcb0cshqG3+SsOtCNj3IdYhKvu6ISX3uV1lGe2CkPQlbYXboIdsemDz9FidtuRAb6Pj9EcO+3IitH4BU3kuZZLmFhYxEU0tsetvieZ4nLeJYsJj2JLDuWq4eP0BI2pxp+NmTMdw6rYHdxEbA1edY9Q32AoIugJZC7FDMcHGBKfR1erzXkknOycJzwm9W99sc9h+YG37VxOHt3D+66UXlEP1/y3god583AyegcX4Va8hg48/P49HIPiHahZMdILV+FdLB1ENV0puIV2siv/YFQqxvkrt2ICA9D12WY8jG6KjuEO9C6NxX89fg66LoqJgYN28OXFZHVcmyn/fTFOyoUsxkFXKsY9feGwmLA8ahRTTzjoSsX4WS8c5cW4PPLQu5C47LGYQhcR8HEqfBENCkRT029ZMw61YaKwwwAAAABJRU5ErkJggg==);
}
.ef:nth-child(5):before{
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAR8SURBVGhD7Zp5yFRVGIcnl8q0VS0CtY2oaBMh/wgVBJdAbINWKBBaVCjUFgMDJUlKxBVFkdSoiOqvynbJP6ysNJGgUjDNDNQWIdMst3ye4xwZ/L6Z7zrfuePc8AcP35xz75xl7jnved/3fqVTyqYe8BPMDaUC6yn4D/6FnlYUVRvAicgTVhRRA8AJ7Cv//Q4KqaXgBJ6DbeXPN0OhdA7sgUNwCTgZJ/ISFEqPgAP/KJRKpcvASf0F3awoir4CJ3J3KB3VJ2DdQ6FUAF0PDvg3ON2Ksu4D678IpQJoFjhg/1bqTPgDvHatFc0sn8Dv4GCvs+I4ecJ7bWYoNbHuAQf6ZSi11A3g9V+hctk1nbRSDlSrVU1rwHvuCqUm1KWgifX8ONuKKhoNTuSDUGpCTQEHuCSUqutc2AtOuo8VzaQOsBWciD5WW3oZvHdyKOWsM6A7XA59wQHeAq7th2EcPAsvwJvgwH6ALBoI3r8dtGTTYCKMhQfhThgCN8E10BvOh9OgqlwSHlLfwmbYBQfAjk6U8ZBFDuh7aK2NtnAP7oBNsBb0GIIzugWyfGElvAuvwyKYDi4N4wyt1EjoCFnVCx6AMeDTeB7mgI6lT/hjiD/wj+APvB9aG6srIxxc3miFJ+9QaGbpIcyGOAkn7jYIci98Cl74G+6HZlRXeAscp8v/cWihTjAP4kzdxCeyVPKWcc16cGyuHI1BTWmRTBb4heWg3T/Z0srp1jgmQ+YrIJM0tTvBL2pdroSTJQ1J3OTvQC2voVV56q4DG9BiDINGqjMsAPs/DJ41Hrx16Sx4A2zsIEyARsjEnubefnVn9KrbLQ+vSaBvZMPL4Ji5y0G6+h7M9vUz9IOkug12gx2shoshte4AExT28RlcBLnIw9OT3o5+Af2gVHoS3Au2vRjyfOpBF0AMjqZakUgmK2zzmVBqkKIXoH+VSvpxtnlvKDVAXeAf0EUwo5hKhgVxWTVEnid2+HkopZP7z3b1xhuiF8EOzeemlGbeQMu2M7sg7dE3YGeDQimtXgXbfjSUcpTufsyUZM1Led4YQ2TRKHAiBla5ynjdjt4PpdrSvZkBGgUTEyOgLRmb277Zyrr9qixaCHbU1ms0Y4UYdVbyGlwItbQRvDe5a1KpeKrfGEot5WFpXiue0B6cDugxiO6Nv7axejXNB+97OpRykJlEOzDAaS0to4dqssJ79Fh1OYw6owwL3gOvy4dgm8fLVJDX40ui5PIFjR2YRamU2ZC3IQ5wBZgLqybzATHa02h4EFaG1OavDBnMHeTibzkBO49vnNyMpnL+BOsNvrQ6NZNoZWn9XoE4ed9w+YIo6muwfnAoJZSDi7+iy+EqWFUui8FXPS73cIh5NcNZnVCfgtGgdea6ksrNbcO+ZjYZpq9lWVf+VmiPfDnq260YuPlPBib+/FztPUvd0tzacESrZDyd0mnsD2YVK/txr5wHyeQBGBv3F8uSca9HeguVT1xuh2QyERDXcFZ3oz26GuIeTJJ4iDKXlEeMXktaRc14Fiv4f1GpdAT4M1IQlBHBcQAAAABJRU5ErkJggg==);
}

/* smartphone */
@media (max-width: 767px) {
  .base{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
          flex-direction: column;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    width:100%;
    height:auto;
    list-style-type:none;
    padding:0;
    margin:0;
    border:0;
  }
  .base .ef{
    position:relative;
    float:left;
    width:90%;
    min-width:90%;
    height:48px;
    margin:8px;
    padding:0;
    border:0;
    border-radius:24px;
    background-color:black;
    cursor:pointer;
    background-size:cover;
  }
  .base .ef:before{
    position:absolute;
    bottom:0;
    left:0;
    content:" ";
    display:inline-block;
    background-color:white;
    width:38px;
    height:38px;
    margin:5px;
    padding:0;
    border:0;
    border-radius:50%;
    background-size:60%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .ef[data-ef="1"]{
    animation: anim-ef 0.5s ease-in-out forwards;
  }
  .ef[data-ef="0"]{
    animation: anim-ef-off 0.5s ease-in-out forwards;
  }
  @keyframes anim-ef {
    0%{
     width:90%;
     height:48px;
     margin:8px;
    }
    100%{
     width:94%;
     height:300px;
     margin:0px;
    }
  }
  @keyframes anim-ef-off {
    0%{
      width:94%;
      height:300px;
      margin:0px;
    }
    100%{
      width:90%;
      height:48px;
      margin:8px;
    }
  }

  .ef[data-ef="1"]:before{
    animation: anim-ef-before 0.5s ease-in-out forwards;
  }
  .ef[data-ef="0"]:before{
    animation: anim-ef-before-off 0.5s ease-in-out forwards;
  }
  @keyframes anim-ef-before {
    0%{
     margin:5px;
    }
    100%{
     margin:0 0 15px 16px;
    }
  }
  @keyframes anim-ef-before-off {
    0%{
      margin:0 0 15px 16px;
    }
    100%{
      margin:5px;
    }
  }
}


/* pc */
@media (min-width: 768px){
  .base{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    height:340px;
    list-style-type:none;
    padding:0;
    margin:0;
    border:0;

    min-width:768px;
  }
  .base .ef{
    position:relative;
    float:left;
    width:48px;
    min-width:48px;
    height:320px;
    margin:8px;
    padding:0;
    border:0;
    border-radius:24px;
    background-color:black;
    cursor:pointer;
    background-size:cover;
  }
  .base .ef:before{
    position:absolute;
    bottom:0;
    left:0;
    content:" ";
    display:inline-block;
    background-color:white;
    width:38px;
    height:38px;
    margin:5px;
    padding:0;
    border:0;
    border-radius:50%;
    background-size:60%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .ef[data-ef="1"]{
    animation: anim-ef 0.5s ease-in-out forwards;
  }
  .ef[data-ef="0"]{
    animation: anim-ef-off 0.5s ease-in-out forwards;
  }
  @keyframes anim-ef {
    0%{
     width:48px;
     height:320px;
     margin:8px;
    }
    100%{
     width:400px;
     height:340px;
     margin:0px;
    }
  }
  @keyframes anim-ef-off {
    0%{
      width:400px;
      height:340px;
      margin:0px;
    }
    100%{
      width:48px;
      height:320px;
      margin:8px;
    }
  }

  .ef[data-ef="1"]:before{
    animation: anim-ef-before 0.5s ease-in-out forwards;
  }
  .ef[data-ef="0"]:before{
    animation: anim-ef-before-off 0.5s ease-in-out forwards;
  }
  @keyframes anim-ef-before {
    0%{
     margin:5px;
    }
    100%{
     margin:0 0 15px 16px;
    }
  }
  @keyframes anim-ef-before-off {
    0%{
      margin:0 0 15px 16px;
    }
    100%{
      margin:5px;
    }
  }
}

解説

cssの設定変更でカスタマイズできるように、ソースコードの比率をcssが高めになっています。メニューの基本構造は、ul/liのリスト構造で、数が変更しても動作するような仕様にしていますが、最大幅などに注意をしてもらう必要があります。また、スマートフォンで表示した時と、PCブラウザで表示した時を考えて、768pxを基準にして、レスポンシブ対応するようにしました。 WEBページで利用する場合ではこの仕様は必須ですよね。 css-animationはliタグに"data-ef"という属性値を"0"または"1"（最初はブランク）で切り替えた時にanimationが発動するようにしており、jsを使ってクリック時に属性の変更を行うようにしています。こうした処理の時に気をつけるポイントとしては、単なるトグル処理ではなく、クリック->ON、残りは全て->OFFという処理をしないと、ちゃんと閉じる処理が実行されないので、理解できない人は自分なりに一度コーディングしてみる事をお勧めします。

画面イメージ

PC表示

スマートフォン表示

[GoodDesign] ヘッダバナー切り替えアクション

どんな機能？

ソースコード

解説

画面イメージ

0 件のコメント:

コメントを投稿

人気の投稿

このブログを検索

ごあいさつ

ブログアーカイブ

ラベル

[GoodDesign] ヘッダバナー切り替えアクション

どんな機能？

ソースコード

解説

画面イメージ

0 件のコメント:

コメントを投稿

人気の投稿

このブログを検索

ごあいさつ

ブログ アーカイブ

ラベル

ブログアーカイブ