Skip to content

Instantly share code, notes, and snippets.

@fogrew

fogrew/jsbin.simoj.html

Last active August 29, 2015 14:02
Show Gist options
  • Save fogrew/28df3f8267a3e1690ddf to your computer and use it in GitHub Desktop.
Save fogrew/28df3f8267a3e1690ddf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.simoj.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="door_generator">
<div class="top"></div>
<div class="gate">
<div class="middle">
<div class="door first inner">
<div class="jamb jambLeft"></div>
<div class="pane">
<div class="profile profileTop"></div>
<div class="fill"></div>
<div class="profile profileBottom"></div>
</div>
<div class="jamb jambRight"></div>
</div>
<div class="door second outer">
<div class="jamb jambLeft"></div>
<div class="pane">
<div class="profile profileTop"></div>
<div class="fill"></div>
<div class="profile profileBottom"></div>
</div>
<div class="jamb jambRight"></div>
</div>
<div class="door three inner">
<div class="jamb jambLeft"></div>
<div class="pane">
<div class="profile profileTop"></div>
<div class="fill"></div>
<div class="profile profileBottom"></div>
</div>
<div class="jamb jambRight"></div>
</div>
<div class="door four outer">
<div class="jamb jambLeft"></div>
<div class="pane">
<div class="profile profileTop"></div>
<div class="fill"></div>
<div class="profile profileBottom"></div>
</div>
<div class="jamb jambRight"></div>
</div>
<div class="door five inner">
<div class="jamb jambLeft"></div>
<div class="pane">
<div class="profile profileTop"></div>
<div class="fill"></div>
<div class="profile profileBottom"></div>
</div>
<div class="jamb jambRight"></div>
</div>
</div>
<div class="bottom">
</div>
</div>
</div>
</body>
</html>
Raw
jsbin.simoj.less
/* ------------- переменные ------------- */
/* размеры */
@width: 500px;
@height: 300px;
@heightOut: @height + 2;
@wJamb: 4px;
@perehl: @wJamb;
@hPane: 6px;
@colDoor: 5;
@percent: .9;
/* цвета */
@profileBorder: #A4866E;
@profileBg: #D9CBBF;
@fillColor: #BFA896;
@fill: 'http://i.imgur.com/kEJB5Xs.png';
/* ------------- статика ------------- */
div {
display: block;
box-sizing: border-box;
}
.door_generator,
.gate {
margin: 0 auto;
}
/* верхняя направляющая */
.top {
position: relative;
z-index: 5;
height: 10px;
}
/* нижняя направляющая */
.bottom {
position: relative;
z-index: 3;
height: @hPane;
}
/* положение дверей */
.inner {
z-index: 2;
}
.outer {
z-index: 4;
}
/* дверной проём */
.gate {
position: relative;
background-image: url(http://bildsystems.ru/wp-content/uploads/2013/09/33.jpg);
background-size: cover;
}
/* ширина механизма */
.door_generator,
.gate,
.top {
width: @width;
}
/* высота механизма */
.middle,
.jamb {
height: @height;
}
/* передние двери ближе = выше */
.outer {
.jamb,
.pane {
height: @heightOut;
}
}
/* двери */
.door {
position: absolute;
top: 0;
}
.pane {
float: left;
/* верхняя и нижняя границы двери */
.profile {
height: @hPane;
width: 100%;
border-style: solid;
border-width: 1px 0 1px 0;
}
}
/* профили */
.jamb {
float: left;
width: @wJamb;
}
/* ------------- цвета ------------- */
/* верняя направляющая */
.top {
background-color: @profileBg;
border: 1px solid @profileBorder;
}
/* нижняя направляющая */
.bottom {
background-color: darken(@fillColor,20%);
border-top: 1px solid darken(@fillColor,40%);
}
/* дверь */
.door {
background-color: transparent;
}
/* профили */
.jamb {
background-color: @profileBg;
border: 1px solid @profileBorder;
}
/* границы двери */
.profile {
border-color: @profileBorder;
}
/* верхняя граница двери */
.profileTop {
background-color: @fillColor;
}
/* наполнение */
.fill {
background-color: @fillColor;
background-image: url(@fill);
}
/* нижняя граница двери */
.profileBottom {
background-color: @profileBg;
}
.outer {
border-bottom: 1px solid darken(@fillColor,40%);
}
/* тени */
.outer {
box-shadow: 4px -4px 8px rgba(0,0,0,.5), -4px -4px 8px rgba(0,0,0,.25);
}
.inner .profileTop {
box-shadow: inset 0 1px 4px rgba(0,0,0,.5);
}
/* ------------- математика ------------- */
/* положение дверей */
.first {
left: 0;
}
.second {
left: @width / 5;
}
.three {
left: @width / 5 * 2;
}
.four {
left: @width / 5 * 3;
}
.five {
left: @width / 5 * 4;
}
/* ширина дверей */
.door {
width: @width / @colDoor;
}
/* панель двери */
.pane {
height: @height - @hPane * 2;
width: @width / @colDoor - @wJamb *2;
}
/* высота наполнения задней двери */
.inner {
.fill {
height: @height - @hPane * 2;
}
}
/* высота наполнения передней двери */
.outer {
.fill {
height: @heightOut - @hPane * 2;
}
}
/* расширяем передние двери */
.outer {
width: @width / @colDoor + @perehl * 2;
margin-left: -@perehl;
.jambRight {
position: relative;
right: -(@perehl * 2);
}
.profile,
.fill {
width: @width / @colDoor;
}
}
.door {
-webkit-transition: -webkit-transform 1s ease-out 0.5s;
-moz-transition: -moz-transform 1s ease-out 0.5s;
-o-transition: -o-transform 1s ease-out 0.5s;
transition: transform 1s ease-out 0.5s;
}
.door:not(.first):hover {
-moz-transform: translateX((-@width / @colDoor + @perehl) * @percent);
-ms-transform: translateX((-@width / @colDoor + @perehl) * @percent);
-webkit-transform: translateX((-@width / @colDoor + @perehl) * @percent);
-o-transform: translateX((-@width / @colDoor + @perehl) * @percent);
transform: translateX((-@width / @colDoor + @perehl) * @percent);
}
.door.first:hover {
-moz-transform: translateX((@width / @colDoor + @perehl) * @percent);
-ms-transform: translateX((@width / @colDoor + @perehl) * @percent);
-webkit-transform: translateX((@width / @colDoor + @perehl) * @percent);
-o-transform: translateX((@width / @colDoor + @perehl) * @percent);
transform: translateX((@width / @colDoor + @perehl) * @percent);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment