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.
オリジナルはこちらになります。
