우연한 기회로 전 직장에서 일본에 파견을 다녀온적이 있었습니다.
본사로 파견을 간 것인데요. 팀장님과 둘이 재미있게 다녀왔습니다.
한달반의 기간동안 관광도 많이 다녔습니다. 그래도 현실은 외국인 노동자 였죠. 야근까지.
그때 찍은 사진을 정리하다가 문득 이런거 해보면 재밌겠다 해서
만들어본 예제입니다. 좀 다듬어서 실제로 사용하려고 합니다.
소스의 기능은 아주 단순하며 완성도는 좀... ^^;;;
이 예제를 만들어가는 과정에 대한 것은 곧 올려보겠습니다.
등록일 :
뜬금 소스
아래 사진을 계기로 소스를 만들었습니다
에노시마라는 섬의 절벽에 있는 집, 흉가?
위 집이 있는 장소를
지도를 캡쳐한 이미지를 사용해서 찾아보겠습니다.
확대해서 하나씩 들어가는 그런 방식으로요.
지도를 캡쳐한 이미지를 사용해서 찾아보겠습니다.
확대해서 하나씩 들어가는 그런 방식으로요.
등록된 댓글이 없습니다.
댓글 쓰기
이름 :
패스워드 :
위 사진의 장소를 추적해 보겠습니다
등록된 댓글이 없습니다.
댓글 쓰기
이름 :
패스워드 :
소스입니다
그냥 당장 사용해보고 싶어서 만들어 본 소스라서 좀 대충입니다.
의외로 만들기 어려웠습니다. 다음 이미지 로딩이 늦어서 붕 떠보이는 문제도 있었구요.
하지만 잘 해결된 소스입니다. 걍 될 때까지 해보는 거죠. ^^;;
* 간단한 설명
- 이미지는 div 에 배경으로 설정하고 확대시키는 방법을 사용.
- 이미지는 일일이 캡쳐해 가면서 제작. 이게 더 힘드네요. ㄷㄷ
- 로딩문제 때문에 이미지 갯수만큼 미리 로딩해둠.
- 무한 반복되는 구조. 최대 확대 후 다시 원상복귀.
- CSS와 제이쿼리, HTML 요소가 어우러진 적절한 예제 (종합선물세트)
- 그리고 간단한 로직.
의외로 만들기 어려웠습니다. 다음 이미지 로딩이 늦어서 붕 떠보이는 문제도 있었구요.
하지만 잘 해결된 소스입니다. 걍 될 때까지 해보는 거죠. ^^;;
* 간단한 설명
- 이미지는 div 에 배경으로 설정하고 확대시키는 방법을 사용.
- 이미지는 일일이 캡쳐해 가면서 제작. 이게 더 힘드네요. ㄷㄷ
- 로딩문제 때문에 이미지 갯수만큼 미리 로딩해둠.
- 무한 반복되는 구조. 최대 확대 후 다시 원상복귀.
- CSS와 제이쿼리, HTML 요소가 어우러진 적절한 예제 (종합선물세트)
- 그리고 간단한 로직.
CSS
.gogogo {
width:1200px;
height:605px;
border:5px solid #666;
border-radius:5px;
overflow:hidden;
position:relative;
cursor:pointer;
}
.gogogo div {
width:100%;
height:100%;
background-size:100%;
background-position:center;
background-repeat:no-repeat;
position:absolute;
}HTML
<div class="gogogo" onclick="gogogo()">
<div class="max-zoom" style="background-image:url('/img/ktsmemo/jquery/1.jpg');"></div>
<div style="background-image:url('/img/ktsmemo/jquery/2.jpg');"></div>
<div style="background-image:url('/img/ktsmemo/jquery/3.jpg');"></div>
<div style="background-image:url('/img/ktsmemo/jquery/4.jpg');"></div>
<div style="background-image:url('/img/ktsmemo/jquery/5.jpg');"></div>
<div style="background-image:url('/img/ktsmemo/jquery/6.jpg');"></div>
<div style="background-image:url('/img/ktsmemo/jquery/7.jpg');"></div>
<div style="background-image:url('/img/ktsmemo/jquery/8.jpg');"></div>
<div style="background-image:url('/img/ktsmemo/jquery/9.jpg');"></div>
</div>자바스크립트
var is_last = false;
function gogogo(){
var el = $('.gogogo div:last');
// 현재 확대가 실행중이면 재실행 안되게 멈춘다 (연타시 오작동 방지)
if(el.queue().length > 0) return;
// 현재 그림이 최대줌(마지막) 상태면 처음부터 반복하기 위해 셋팅
if(is_last){
$(el).css({'background-size':'100%'});
$('.gogogo').find('div:first').before(el);
el = $('.gogogo div:last');
is_last = false;
}
el.animate({'background-size':'+=150%'}, 500, 'linear', function(){
// 최대줌(마지막)이면 멈춘다
if($(this).hasClass('max-zoom')){
is_last = true;
return;
}
$(this).css({'background-size':'100%'});
$('.gogogo').find('div:first').before(this);
});
}등록된 댓글이 없습니다.
댓글 쓰기
이름 :
패스워드 :
★★★ 확장판 ★★★
이것은 확장판 입니다. ^^;;
확대시 최대한 잘 맞는 비율이 되로록
세부 설정이 가능하게 소스를 개선해야 할 것 같습니다.
확대시 최대한 잘 맞는 비율이 되로록
세부 설정이 가능하게 소스를 개선해야 할 것 같습니다.
CSS
.gogogo {
width:1200px;
height:605px;
border:5px solid #666;
border-radius:5px;
overflow:hidden;
position:relative;
cursor:pointer;
}
.gogogo div {
width:100%;
height:100%;
background-size:100%;
background-position:center;
background-repeat:no-repeat;
position:absolute;
}HTML
<div class="gogogo" onclick="gogogo()">
<div class="max-zoom" style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/1.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/2.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/3.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/4.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/5.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/6.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/7.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/8.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/9.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/10.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/11.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/12.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/13.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/14.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/15.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/16.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/17.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/18.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/19.jpg');"></div>
<div style="background-image:url('https://ktsmemo.cafe24.com/img/ktsmemo/jquery/20.jpg');"></div>
</div>자바스크립트
var is_last = false;
function gogogo(){
var el = $('.gogogo div:last');
// 현재 확대가 실행중이면 재실행 안되게 멈춘다 (연타시 오작동 방지)
if(el.queue().length > 0) return;
// 현재 그림이 최대줌(마지막) 상태면 처음부터 반복하기 위해 셋팅
if(is_last){
$(el).css({'background-size':'100%'});
$('.gogogo').find('div:first').before(el);
el = $('.gogogo div:last');
is_last = false;
}
el.animate({'background-size':'+=150%'}, 500, 'linear', function(){
// 최대줌(마지막)이면 멈춘다
if($(this).hasClass('max-zoom')){
is_last = true;
return;
}
$(this).css({'background-size':'100%'});
$('.gogogo').find('div:first').before(this);
});
}실행 가능한 소스
등록된 댓글이 없습니다.
댓글 쓰기
이름 :
패스워드 :
방문해 주셔서 감사드립니다 !!
댓글 쓰기