인터렉티브 웹 5-2 - 3D 회전 플러그인
2022. 3. 17. 12:03ㆍStudy/Example & Plug-in
http://peachananr.github.io/interactive_3d/demo/interactive_3d.html
jQuery Interactive 3D by Pete R. | The Pete Design
jQuery Interactive 3D Create a 3D interactive object using images and one simple JS call Created by Pete R., Founder of BucketListly
peachananr.github.io
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Interactive 3D by Pete R. | The Pete Design</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.interactive_3d.js"></script>
<style>
body{background: #000;}
.interactive_3d {position: relative;}
.interactive_3d > img{position: relative; left: 100px; width: 420px;}
</style>
<script>
$(document).ready( function() {
$("#i3d").interactive_3d({
frames: 71 //스틸이미지 개수
});
});
</script>
</head>
<body>
<div id="i3d" class="interactive_3d">
<img src="images/bella/frame_1.png">
</div>
</body>
</html>
interactive_3d-master.zip
2.54MB
전체 예제
interactive_3d-master_sample_all (3).zip
0.05MB
interactive-3d-master-sample_all images (용량이 너무 커서)
bella.zip
7.76MB
hector.zip
11.15MB
kenneth.zip
9.29MB
간단 벨라 예제
interactive_3d-master_sample2 (3).zip
7.77MB
'Study > Example & Plug-in' 카테고리의 다른 글
| 인터렉티브 웹 6 - 가로스크롤 (0) | 2022.03.18 |
|---|---|
| 인터렉티브 웹 6 - 시간에 따라 배경이 달라지는 시계 (0) | 2022.03.17 |
| 인터렉티브 웹 5-2 - 스틸컷 마우스 클릭,드래그 (0) | 2022.03.17 |
| 인터렉티브 웹 5 - 스틸컷 마우스제어 (0) | 2022.03.17 |
| 인터렉티브 웹 4 - z축 원근감 (0) | 2022.03.16 |
