Carousel van voor naar achter

Door ohes ohes op 31-07-2013 10:41

1.769 views

Hi,

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.

Kris Peeters

31-07-2013 11:05

Geen idee
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.

ohes ohes

31-07-2013 11:12

Deze komt al aardig in de buurt, alleen moet deze gespiegeld worden en de items aan de buitenkant onzichtbaar.
http://www.bkosborne.com/jquery-waterwheel-carousel

Kris Peeters

31-07-2013 12:25

Ik denk dat dit al vrij goed in de buurt komt


<!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>

Wouter J

31-07-2013 15:54

Hmm, topic titel zegt van voor naar achter en bericht zegt van achter naar voor...

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)

Reageren

Inloggen om te reageren