GLSL로 transition이 쓸 수 있는 슬라이더 라이브러리를 만들고 있다

6200 단어 슬라이더자바스크립트ShaderGLSLWebGL

소개



도서관을 키우고 싶은 욕심이 솟았기 때문에 만들고 있다.
이미지하고 있는 것은 "스위퍼" 같은 슬라이더 라이브러리의 GLSL로 transition 할 수 있는 녀석.
만들어 보았는데 좋지만 실제로 사용하도록 문서를 정비하거나 하는 것은 아직 시간이 걸릴 것 같다.
계속하려면 동기 부여 유지가 필요. .

XSlider



데모
htps // 112? 기주 b. 이오 / xs에서 r /하지만 /

특징
- shader로 transition을 쓸 수 있다
- 다른 라이브러리에 의존하지 않음
- svg의 태그를 사용하여 DOM을 Texture로 만들 수 있습니다.
( 태그에서 CSS의 background-image 이미지가 표시되지 않는 MSEdge 버그가 있음)
- 몇 개 슬라이드 날 때 연속으로 전환하는 사양은 마음에 드는 ↓↓↓

- 나중에 쓸데없이 슬라이드 잡고 던져 ↓↓↓

(PC로 드래그하면 텍스트 선택해 동작 미묘하게 되어 버리지만, 스마트폰이라면 던지는 느낌이 나기 쉽다)

사용법



최소 구성은 여기 .

설치하고 CSS와 JS를 include


npm install xslider

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="path/to/xslider.min.css">
</head>
<body>
    ...
    <script src="path/to/xslider.min.js"></script>
</body>
</html>

html을 작성하는 방법의 예


<div class="xslider">
    <div class="xslider-view">
        <div class="xslider-slide">
            <div class="xslider-layer-gl">Elements as texture</div>
            <div class="xslider-layer-ui">Elements as DOM</div>
        </div>
        <div class="xslider-slide"></div>
        ...
    </div>
    <div class="xslider-pager"></div>
</div>

CSS 묘사


.xslider {
    width: 400px; height: 300px;
}

js 설명


new XSlider(".xslider");

Transition 정보



Preset Transition의 GLSL은 이하의 사이트를 많이 참고로 하고 있다.
htps // glt 란시치온 s. 코m/
따옴표는 각 소스에 썼다.

픽업하면
  • Cross Warp
  • Cross Zoom
  • Cube
  • Pixelate

    • 등.
    링크를 열어 좌우의 화살표로 transition을 확인할 수 있다.

    이 외, 오리지널의 transition도 추가하기 쉬운 구조의 생각이지만, 추가의 방법을 알 수 있는 Document는 아직 없다.

    svg의 <foreignObject>에서 dom 드로잉 정보



    dom-to-image 을 참고하게 했다
    처음에는 이 라이브러리에 의존하고 있었지만, 결함의 검증하고 싶거나, 커스터마이즈하고 싶어져 결국 바퀴의 재개발을 하는 것에. .

    MSEdge에서 배경으로 설정한 이미지가 표시되지 않습니다.



    내가 묻는다. 내 영어가 똥이기 때문에 -> 대응이 멈춘 것 같아
    (↑「Assigned to comptriage」는 뭐야)
    Edge에서 볼 수 없으면 안건에서는 좀처럼 사용할 수 없다.
    스마트폰만으로 보여주는 녀석이거나 background-image로 이미지를 지정하지 않으면 Edge에서도 갈 수 있을 것이다.

    webgl 드로잉 시스템 정보



    처음 THREE.js에서 움직이고 있었지만, 불필요한 기술로 늘어나는 용량이 신경이 쓰이기 때문에, 이전 c++로 만들었던 녀석을 js에 이식했다.
    다소 불필요한 설명은 남아 있지만, 토탈에서는 가벼워졌다.

    요약


  • 아직 사람에게 사용하기 위해서는 문서 부족
  • 동작 유효성 검사가 충분하지 않습니다
  • 일단 자신의 일에 사용하고 싶지만 Edge에서 작동 보장하지 않으므로 스마트 폰 사이트 만의 기회로 기회가 있다면 사용해보십시오.
    •
    WebGL에서 조에트로프를하고 싶었습니다.
    GLSL에서 IFS 쉘핀 스키 카펫

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage