웹 사이트에 지구의 이미지가 하나 뿐인 방문 페이지가 있습니다.페이지 크랙 효과 (비 깜박임)

이제 기본 사이트에 들어가기 위해 지구의 균열이 열리고 사용자가 메인 사이트로 들어가는 방문 페이지에 영향을주고 싶습니다.

현재 진행중인 작업 : 저는 현재 방문 페이지 이미지 전체를 4 개의 div로 나눕니다 (각 지구는 공동으로 지구를 형성합니다). 이제 사용자가 사이트에 들어가야 할 때 화면의 각 구석에 4 개의 div를 각각 애니메이션으로 표시합니다. 하지만 나는 크랙 효과 & 다른 시각적으로 매력적인 효과가 필요합니다.

아이디어를 얻으려면 어떻게해야합니까? Javascript (또는 jQuery) 솔루션이 바람직합니다.

출처

2012-06-11 gopi1410

어쩌면'

@Blender hm. 처음으로 voronoi decomposition에 대해 읽으십시오. 짧은 시간 내에 구현하기 어렵습니다. 어쨌든 고마워, 나는 또 다른 대답을 기다릴 것이다. – gopi1410

@NewUser 예 그것의 호환성. 브라우저가 플래시를 지원하지 않을 때 어떻게 플래시 호환이 가능합니까? O_o – gopi1410

답변을 주셔서 감사합니다,하지만 내 대답은 현재 여기에 다른 두 답변을 결합 발견했다. 그래서 여기 바이올린을 sharking하고, 그래서 미래에 유용 할 수 있습니다 :

업데이트 바이올린 :

http://jsfiddle.net/gopi1410/eC9HM/1/

출처

2012-06-11 07:05:17 gopi1410

그래서 어떤 대답을 받아 들일 것입니까? 너 자신의 대답? – NewUser

@NewUser none, 왜냐하면 나는 모든 대답이 좋고 아무도 다른 것보다 더 많은 크레딧을받을 자격이 없다고 생각합니다. – gopi1410

@ gopi1410 답변 된 질문을 닫는 것이 중요합니다. 당신도 받아 들일 수있는 대답으로 자신의 대답을 선택하여 할 수 있습니다 –

explode jQuery UI 효과를 사용할 수 있습니다. 그것은 (당신이 원하는 얼마나 많은 조각을 선택할 수 있습니다) 여러 조각으로 이미지를 중단하고 이미지가

Uptdated-

이이 균열 이미지

<html> 

<head> 

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

<script> 
$(document).ready(function() { 

    $("img").click(function() { 

    $(this).hide("explode", { pieces: 24 }, 2000); 

    }); 

}); 
</script> 

</head> 

<body style="font-size:62.5%;"> 

    <img src="http://2.bp.blogspot.com/-No5MB366RTY/T3WYGRicqUI/AAAAAAAAALQ/mDgaBLVocZE/s1600/260px-The_Earth_seen_from_Apollo_17.jpg"> 

</body> 

</html>

출처

2012-06-11 06:32:29 NewUser

좋은 하나! 하지만 그것은 이미지에서 작동합니까? 그들이 보여준 데모는'div와 같은 html 요소입니다. – gopi1410

이미지를 여러 부분으로 나누고 div에 배경 이미지로 넣은 다음 그들을 분해해야합니다. – gopi1410

이미지를 정사각형 블록으로 분해합니다 : http://jsfiddle.net/dyg3P/1/ – Blender

오버레이 코드 - 시도 사라집니다 지구상에서 slideDown() (jQuery)으로 만듭니다. img. your answer에서

여기에 균열 후 폭발에 대한 익명 함수에 콜백을 사용하여 업데이트 된 JS입니다 :

는 http://jsfiddle.net/NKqNh/

$(function() { 
    $('#crack').slideDown(800); 
}); 

<div id="earth" class="common"> </div> 
<div id="crack" class="common"> </div>

편집를 참조하십시오. http://jsfiddle.net/eC9HM/2/

$(function() { 
    $('#crack').slideDown(800, function() { 
     $('#earth, #crack').hide('explode', {pieces: 16}, 2000); 
    }); 
});

출처

2012-06-11 06:32:37

감사 & 나는 조합에서 여기에 주어진 답변을 사용했습니다 : http :// /jsfiddle.net/gopi1410/eC9HM/1/ – gopi1410

감사합니다. :) – gopi1410

페이지 크랙 효과 (비 깜박임)

답변

Uptdated-

관련 문제