프론트엔드 연습으로 금요일마다 UI 컴포넌트를 만드는 습관을 들였습니다.

과거에 내가 만든 구성 요소 중 일부를 태그에서 볼 수 있습니다.

미니어처 같은 작고 귀여운 것을 좋아하는데, 어제는 CSS와 Vue.js로 Miniature Book 컴포넌트를 만들었습니다.

1. 일부 div를 절대 위치에 배치

2. 퍼스펙티브 속성으로 3차원 페이지 추가

div를 3D로 회전하려면 perspective 및 transform-style 속성을 사용합니다.

싸개:

  perspective: 300px;
  transform-style: preserve-3d;

안건:

  transform-origin: left center;
  transform: rotateY(30deg);

transform-origin 및 position: absolute를 사용하여 위치를 조정할 수 있습니다.

3. 페이지 가장자리 구부리기

CSS를 사용하여 공동 애니메이션을 만들 수 있습니다. 나는 이것을 s14garnet에서 배웠다.



변환은 상위 요소의 영향을 받습니다. preserve-3d 를 사용하여 연결할 수 있습니다.

4. 드래그 상호 작용을 추가하여 페이지를 계속 넘길 수 있습니다.

드래그 상호 작용의 구현은 간단합니다. offsetX의 차이를 추적하고 회전 각도에 반영하기만 하면 됩니다.

modulo를 사용하여 책을 반복할 수 있지만 JavaScript modulo는 음수 값을 반환할 수 있습니다.

HTML:

<div id="app"
       @pointerdown="down"
       @pointermove="move"
       @pointerup="up">
  ...
</div>

자바스크립트:

Number.prototype.mod = function (n) {
  return ((this % n) + n) % n;
};
new Vue({
  el: "#app",
  data: {
    rotateRaw: 40,
    rotateOld: 0,
    offset: null
  },
  methods: {
    down(ev) {
      this.$el.setPointerCapture(ev.pointerId);
      this.offset = ev.offsetX;
      this.rotateOld = this.rotate;
    },
    up(ev) {
      this.offset = null;
    },
    move(ev) {
      if (this.offset) {
        this.rotateRaw = this.rotateOld - (ev.offsetX - this.offset);
      }
    }
  },
  computed: {
    rotate() {
      return this.rotateRaw.mod(180);
    }
  }
});

pointerdown, pointermove 및 pointerup 이벤트에는 iOS Safari에서 polyfill이 필요합니다.

래퍼의 div 요소가 드래그로 선택되지 않도록 하려면 pointer-events: none를 사용하여 포인터 이벤트를 투명하게 만듭니다.

.wrapper {
  ...
  pointer-events: none;
  user-select: none;
}

데모는 다음과 같습니다.

https://codepen.io/hashrock/pen/RwrxeKe

Vue.js와 input type="range"는 친구입니다.

나는 input type="range"로 UI의 모양과 느낌을 조정하는 것을 좋아합니다. 일회성 UI 편집기입니다. 집을 짓기 위해 비계를 만드는 것과 비슷합니다.







input type="range"가 유용하지만 값을 숫자로 변환하기 위해 v-model.number를 작성하는 것을 잊지 마십시오.

<input type="range" min=0 max=180 step=1 v-model.number="rotate">