javascriptで作られたユニークなイメージギャラリー

FRONTEND

2019.04.28

javascriptで作られたユニークなイメージギャラリー

javascriptで作られたユニークな動きをするイメージギャラリーを見つけたので備忘録代わりに。

クリック時の動きも非常に凝っていますが、それでいてクセも無いので、どのようなデザインにも合わせやすいのではないでしょうか。例えば、写真や印刷物のポートフォリオサイトと相性が良さそうです。いずれどこかで使ってみたいjavascriptです。

実装方法

html

htmlは非常にシンプルです。

<div class="artboard">
  <div class="cards">
    <div class="card p1"><a>sample01</a></div>
    <div class="card p2"><a>sample02</a></div>
    <div class="card p3"><a>sample03</a></div>
    <div class="card p4"><a>sample04</a></div>
  </div>
</div>

css

@import url("https://fonts.googleapis.com/css?family=Satisfy");
* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, a, p, span {
  padding-bottom: 0.714em !important;
  padding-top: 0.714em !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #252525;
  font-family: "Raleway", sans-serif;
  text-align: center;
}

.noselect {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

@-webkit-keyframes beat {
  to {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
}

@keyframes beat {
  to {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
}
.artboard .cards {
  text-align: center;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
}
.artboard .cards .card {
  min-width: calc(25%);
  min-height: 100%;
  text-align: center;
  background-size: content;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: 500ms cubic-bezier(1, 0.02, 0, 0.98);
  vertical-align: middle;
}
.artboard .cards .card a {
  font-family: "Satisfy", cursive;
  font-size: 60px;
  text-transform: capitalize;
  vertical-align: middle;
  text-align: center;
  position: relative;
  top: 50%;
  transition: 250ms cubic-bezier(1, 0.02, 0, 0.98);
}
.artboard .p1 {
  background: url("https://cdn.pixabay.com/photo/2016/11/21/11/16/beautiful-1844724_960_720.jpg");
}
.artboard .p2 {
  background: url("https://cdn.pixabay.com/photo/2016/11/21/14/53/adult-1845814_960_720.jpg");
}
.artboard .p3 {
  background: url("https://cdn.pixabay.com/photo/2014/09/07/21/52/urban-438393_960_720.jpg");
}
.artboard .p4 {
  background: url("https://cdn.pixabay.com/photo/2017/06/20/22/14/men-2425121_960_720.jpg");
}

.open {
  min-width: 100% !important;
}
.open a {
  top: 100% !important;
}

.close {
  min-width: 0% !important;
}
.close a {
  top: -50% !important;
}

javascript

デフォルトではcloseというクラスが付いた<div>に、画像をクリックすることでopenというクラスを付与する仕組みになります。

const cards = document.querySelectorAll('.card');
    function toggleOpen() {
      this.classList.toggle('open');
     for (i = 0; i < cards.length; i++) {
       if ( cards[i] !== this)
       cards[i].classList.toggle('close')
     }
}
 cards.forEach(card => card.addEventListener('click', toggleOpen));

See the Pen
zXbKqP
by keitasakurai (@mdesignyokohama)
on CodePen.

オリジナルはこちらになります。

https://codepen.io/akshaycodes/pen/xemvKJ