기본 콘텐츠로 건너뛰기

javascript 3d round carousel

http://jsdo.it/spectrum/carousel
역시나 맘에 드는게 없어서 만들었다.
어렵지 않을려나 싶었는데 생각보다 얼마 안걸림.
역시 모닝 코딩인가.
querySelectorAll 때문에 $s 랑, items() 를 프로토타입에서 array를 반환하도록 하여 forEach를 돌릴 수 있도록 소금(salt)을 쳤다.
var $=function(selector) {
    return document.querySelector(selector);
};

var $s=function(selector) {
    return document.querySelectorAll(selector);
};

NodeList.prototype.items=function() { 
    var array=[]; 
    for (var i=0; i [2, 0] (뒤집힘)
     // / 2   하면     [1, 0]이 됨.
     // * (1-2/5) 하면 [3/5, 0]
     // 1 -   하면     [2/5, 1]
     var scale = (1-(1-Math.sin(degree*Math.PI/180))/2*(1-2/5));
     v.setAttribute('style', 
      'left:'+parseInt(x,10)+'px;'+ 
      'top:'+parseInt(y,10)+'px;'+
      'z-index:'+parseInt(y,10)+';'+
      '-webkit-transform: scale('+scale+');'
     );
 });
    }
};
document.ontouchmove = function(e){ e.preventDefault(); };
p.objects=$s('ul#container>li');
p.renderCarousel(p.idx);
window.onload=p.onLoad;

ul 안에 li를 몇개든 넣어보자.
중심을 기준으로 반지름은 100px, 종횡비는 2/5:1 정도인데 입맛대로 수정하면 됨.

댓글

이 블로그의 인기 게시물

세상 간단한 https(+secured websocket): Caddy

nginx, apache2 같은 걸로 매번 certbot 연동을 통해 https 하는게 지겨워서 알아보니 Caddy라는게 있더라. 설치법은 강하게 크기 위해 알아서 해본다. # cat /etc/caddy/Caddyfile your.shitty.site:8123 {   proxy / localhost:9123 {     websocket     transparent   } } 이건 외부에서 8123으로 들어오는 걸 내부적으로 9123로 맞춰서 https 맞춰주는 reverse proxy. 만일 port를 생략하면 # cat /etc/caddy/Caddyfile your.shitty.site {   proxy / localhost:9123 {     websocket     transparent   } } 기본포트인 443으로 되어 https://your.shitty.site 로 접속이 된다. 요새 말썽이던 cloudflare 버리고 netlify domain이랑 caddy를 쓰니까 앓던 이가 빠진 느낌. 이 조합은 당분간 계속 써야겠다 싶다.

저지연 오디오 생성 LLVC 사용기

https://github.com/KoeAI/LLVC 써봄 CUDA 11.8 버전 쓰고 있어 pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu118 VC 없어서 설치 https://wikidocs.net/168848 참조 FAIRSEQ 관련 오류 https://github.com/facebookresearch/fairseq/issues/2908 pip install editdistance  설치 No CUDA runtime is found, using CUDA_HOME='C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.8' 오류 멀쩡하게 있는데 안됨. pip install torch==2.1.0+cu118 torchvision==0.16.0+cu118 torchaudio==2.1.0+cu118 --extra-index-url https://download.pytorch.org/whl/cu118 다시 설치 set DISTUTILS_USE_SDK=1 이게 문젠가 설정하고 재도전 Using cached ruamel.yaml.clib-0.2.8-cp311-cp311-win_amd64.whl (118 kB) Building wheels for collected packages: fairseq   Building wheel for fairseq (pyproject.toml) ... error   error: subprocess-exited-with-error   × Building wheel for fairseq (pyproject.toml) did not run successfully.   │ exit code: 1   ╰─> [1829 lines of output]       No CUDA runtime is found, usi...