>

반응에 익숙하지 않고 랜딩 페이지에서이 커서 효과를 얻으려고하는데 jquery를 사용하지 않고는 커서를 만들 수 없었습니다. 나는 반응 SyntheticEvents 이지만 올바르게 사용하는 방법을 모르겠습니다.

여기에 달성하고자하는 효과가 있지만 반응합니다 :

$(document)
  .mousemove(function(e) {
    $('.cursor')
      .eq(0)
      .css({
        left: e.pageX,
        top: e.pageY
      });
    setTimeout(function() {
      $('.cursor')
        .eq(1)
        .css({
          left: e.pageX,
          top: e.pageY
        });
    }, 100);
  })

body{
  background:black;
}
h1{
  color:white;
}
* {
    cursor: none;
}
.cursor {
    position: fixed;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    pointer-events:none;
}
.cursors .cursor:nth-child(1) {
    background-color: #3a26fd;
    z-index: 100002;
}
.cursors .cursor:nth-child(2) {
    background-color: #f3f3f3;
    z-index: 100001;
    height: 9px;
    width: 9px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursors">
<div class='cursor'></div>
<div class='cursor'></div>
<div class='cursor'></div>
</div>
<h1>Custom cursor</h1>


  • 답변 # 1

    먼저, 몇 가지 메모 :

    Babel을 사용하여 JSX를 변환하고 ES2015 화살표 기능을 사용할 수 있다고 가정합니다. 그렇지 않은 경우 질문을 업데이트하면 답변을 업데이트하겠습니다.

    다음으로커서클래스의 세 가지 요소가 필요하지 않습니다. 이 코드는 두 가지 요소 만 사용하도록 제안합니다.mainCursor라고 부르는 파란색은 흰색이고trailingCursor는 흰색입니다.

    또한 jQuery에서 eq 함수를 구현하지 않았지만이 예제에서는document.getElementByClassName이 2 개의 요소를 반환하므로 null 검사를 포함하지 않습니다.

    <시간>

    요청 된 행동을 구현하는 React 방식은 다음과 같습니다 :

    <올>

    상태에 저장된 위치를 사용하여 자체 렌더링

    커서요소 만들기

    onMouseMove 리스너를 마우스가 움직이는 내부 요소에 리스너 첨부

    마우스가 움직이면 핸들러 함수를 호출하고setState를 사용하여 마우스 위치를상태로 저장합니다.새 마우스 위치를 사용하는 커서요소

    이것은 귀하의 질문에서 포트 된 기능 버전입니다. 실행 가능한 스 니펫을 제공했습니다.

    class App extends React.Component {
      // we keep track of x and y coordinates for the blue circle - the main one
      // and the trailing circle - the white one
      // for simplicity, they are initialzed to (0, 0), the top left corner of the viewport
      state = {
        xMain: 0,
        yMain: 0,
        xTrailing: 0,
        yTrailing: 0,
      }
      
      handleMouseMove = (e) => {
        // Using pageX and pageY will cause glitching when you scroll the window down
        // because it measures the distance from the top left rendered corner, not
        // top left visible corner
        const { clientX, clientY } = e;
        // we set the main circle coordinates as soon as the mouse is moved
        this.setState({
          xMain: clientX,
          yMain: clientY,
        }, () => {
          // this callback is invoked after the first setState finishes
          // 
          // here we schedule saving the trailing coordinates in state 100ms  
          // after the main coordinates have been set to simulate the trailing
          setTimeout(() => {
            this.setState({
              xTrailing: clientX,
              yTrailing: clientY,
            })
          }, 100);
        })
      }
      render = () => {
        // we retrieve coordinates from state
        const {
          xMain,
          yMain,
          xTrailing,
          yTrailing
        } = this.state;
        return (
          // we need a container that has a definite height, 800px in my example
          // this is to make sure it leaves enough room for mouse movement to happen and trigger the event handler
          // 
          // also, you don't need the event listener on both your cursor elements, only on the container
          <div
            className='container'
            onMouseMove={e => this.handleMouseMove(e)}
          >
            <div className='cursors'>
              // this below is the main cursor
              // we set its style inline with coordinates from state
              <div 
                className='cursor'
                style={{ 
                  left: xMain, 
                  top: yMain,
                }}
              />
              
              // this below is the trailing cursor
              <div 
                className='cursor'
                style={{ 
                  left: xTrailing, 
                  top: yTrailing,
                }}
              />
            </div>
          </div>
          )
      }
    }
    ReactDOM.render(<App />, document.getElementById('root'));
    
    
    * {
        cursor: none;
    }
    .container {
      background: black;
      min-height: 800px;
    }
    .cursor {
        position: fixed;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        transform: translateX(-50%) translateY(-50%);
        pointer-events:none;
    }
    .cursors .cursor:nth-child(1) {
        background-color: #3a26fd;
        z-index: 100002;
    }
    .cursors .cursor:nth-child(2) {
        background-color: #f3f3f3;
        z-index: 100001;
        height: 9px;
        width: 9px;
    }
    
    
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>    
      </head>
      
      <body>
        <div id="root"></div>
      </body>
    </html>
    
    

  • 이전 makefile - 추가 카페 도구를 작성하는 방법?
  • 다음 Go에서 모든 유형을 전달하는 관용적 인 방법 (컴파일 시간 유형 확인을 유지하면서?)