Carousel van voor naar achter
Er zijn heel veel carousel scripts te vinden op het internet. Bijvoorbeeld deze http://caroufredsel.dev7studios.com/. Hier kan je plaatjes van links naar rechts laten bewegen.
Nu ben ik opzoek naar iets soortgelijks, maar dan wat werkt van voor naar achter en van achter naar voor. Een beetje zoals google streetview, maar dan veel simpeler. Het effect is dus dat je diepte hebt en naar voren en naar achteren kan. De plaatjes staan in perspectief. Op de voorgrond zijn ze wat groter en de plaatjes daar achter zijn wat kleiner.
Kan iemand mij aan zoiets helpen?
Thanks.
Maar het lijkt me wel leuk om dat te proberen.
Met de nieuwe mogelijkheden van CSS3 kan al veel gebeuren.
Verder moet dat gewoon nog draaien.
http://www.bkosborne.com/jquery-waterwheel-carousel
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var carousel = $('#carousel');
var images = $('#carousel img');
var imagesIndex = 0;
setZindex();
play();
function play() {
var index = imagesIndex % images.length;
shrink(images.eq(index));
imagesIndex = (index + 1) % images.length;
}
function shrink(elm) {
$(elm).animate({
width: '1px',
height: '1px'
}, 3000, function() {
setZindex();
$(this).removeAttr('style');
play();
});
}
function setZindex() {
var z_index = images.length + 2;
for (var i=0; i<images.length; i++) {
// images[imagesIndex] is net gekrompen en mag nu naar achter (lage z-index). images[imagesIndex + 1] moet nuvooraan
var img_index = (imagesIndex + i) % images.length;
if (img_index==0) {
images.eq(img_index).css('z-index', 2);
}
else {
images.eq(img_index).css('z-index', z_index--);
}
}
}
});
</script>
<style>
#carousel {
position: relative;
background-color: #060606;
width: 250px;
height: 200px;
}
#carousel img {
position: absolute;
margin-left: auto;
margin-right: auto;
width: 250px;
height: 200px;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="carousel">
<img src="http://alpics.net/thumbs/15717.jpg">
<img src="http://alpics.net/thumbs/15720.jpg">
<img src="http://alpics.net/thumbs/15735.jpg">
<img src="http://alpics.net/thumbs/15741.jpg">
<img src="http://alpics.net/thumbs/15744.jpg">
</div>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var carousel = $('#carousel');
var images = $('#carousel img');
var imagesIndex = 0;
setZindex();
play();
function play() {
var index = imagesIndex % images.length;
shrink(images.eq(index));
imagesIndex = (index + 1) % images.length;
}
function shrink(elm) {
$(elm).animate({
width: '1px',
height: '1px'
}, 3000, function() {
setZindex();
$(this).removeAttr('style');
play();
});
}
function setZindex() {
var z_index = images.length + 2;
for (var i=0; i<images.length; i++) {
// images[imagesIndex] is net gekrompen en mag nu naar achter (lage z-index). images[imagesIndex + 1] moet nuvooraan
var img_index = (imagesIndex + i) % images.length;
if (img_index==0) {
images.eq(img_index).css('z-index', 2);
}
else {
images.eq(img_index).css('z-index', z_index--);
}
}
}
});
</script>
<style>
#carousel {
position: relative;
background-color: #060606;
width: 250px;
height: 200px;
}
#carousel img {
position: absolute;
margin-left: auto;
margin-right: auto;
width: 250px;
height: 200px;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="carousel">
<img src="http://alpics.net/thumbs/15717.jpg">
<img src="http://alpics.net/thumbs/15720.jpg">
<img src="http://alpics.net/thumbs/15735.jpg">
<img src="http://alpics.net/thumbs/15741.jpg">
<img src="http://alpics.net/thumbs/15744.jpg">
</div>
</body>
</html>
Maar goed, ik heb ook wat gemaakt met CSS3 transform:scale(); een heel wat (niet echt mooi gescripte) JS: http://jsbin.com/uviqud/1/ (klik rechtsboven voor de code)