Ogólny pomysł jest następujący: pan dział z pierwszego obrazu, a następnie masz dużą liczbę div z drugiego obrazu, ich tarło dostosowanie właściwości CSS
Każda sekunda div obraz jest tylko mały kawałek tego z dopasowanym tłem, więc nakłada poprzedni obraz, część z niego
Za pomocą tej metody możesz odradzać się części w dowolnej kolejności z dowolnym efektem. Przesuń je, znikną je im, randomally wypełnić, coś
HTML będzie wyglądać następująco:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.first{
height:500px;
width:500px;
position: absolute;
background:url(1.jpg);
z-index: 2;
}
.second_part1{
height:50px;
width:50px;
position: absolute;
background:url(2.jpg) 0 0;
z-index: 2;
}
.second_part2{
height:50px;
width:50px;
position: absolute;
background:url(2.jpg) -50px 0;
left:50px;
z-index: 2
}
.second_part3{
height:50px;
width:50px;
position: absolute;
background:url(2.jpg) -200px -150px ;
left:200px;;
top:150px;
z-index: 2
}
</style>
</head>
<body>
<div class="first">
</div>
<div class="second_part1">
</div>
<div class="second_part2">
</div>
<div class="second_part3">
</div>
</body>
</html>
I ty też może mieć inny div Image2, który zostanie pokazany w górę po załadowaniu wszystkie kawałki . I zniszcz wszystkie elementy po ich wyświetleniu.
Istnieje wiele sposobów na wprowadzenie całego procesu w javascript . Jeśli chodzi o mnie, najpierw utwórz tablicę elementów (tablicę elementów div), a następnie utwórz dowolną liczbę efektów chcesz, po prostu poprzez umieszczanie ich z różnymi efektami i innej kolejności
ja nie wiem, czy Nivo wykorzystuje ten sposób, albo jakiś inny, ale to działa :)