Create 3D Content Slider Image With Animation Transitions

Adaptor is a light-weight image content slider that aims to provide a simple interface for developers to create cool 2D or 3D slide animation transitions. it has multiple options for customization including: speed of the transitions, delay between each item auto-slideshow being on/off, pauseOnHover and more.


Untuk contohnya silahkan sobat klik disini...

SCRIPT::

<link href="http://www.philparsons.co.uk/demos/box-slider/css/screen.css" rel="stylesheet"/>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script src="http://www.philparsons.co.uk/demos/box-slider/js/box-slider-all.jquery.min.js"></script>

<script>
$(function () {
        var $box = $('#box')
          , $indicators = $('.goto-slide')
          , $effects = $('.effect')
          , $timeIndicator = $('#time-indicator')
          , slideInterval = 5000
          , effectOptions = {
              'blindLeft': {blindCount: 15}
            , 'blindDown': {blindCount: 15}
            , 'tile3d': {tileRows: 6, rowOffset: 80}
            , 'tile': {tileRows: 6, rowOffset: 80}
          };

        // This function runs before the slide transition starts
        var switchIndicator = function ($c, $n, currIndex, nextIndex) {
          // kills the timeline by setting it's width to zero
          $timeIndicator.stop().css('width', 0);
          // Highlights the next slide pagination control
          $indicators.removeClass('current').eq(nextIndex).addClass('current');
        };

        // This function runs after the slide transition finishes
        var startTimeIndicator = function () {
          // start the timeline animation
          $timeIndicator.animate({width: '680px'}, slideInterval);
        };

        // initialize the plugin with the desired settings
        $box.boxSlider({
            speed: 1000
          , autoScroll: true
          , timeout: slideInterval
          , next: '#next'
          , prev: '#prev'
          , pause: '#pause'
          , effect: 'scrollVert3d'
          , onbefore: switchIndicator
          , onafter: startTimeIndicator
        });

        startTimeIndicator(); // start the time line for the first slide

        // Paginate the slides using the indicator controls
        $('#controls').on('click', '.goto-slide', function (ev) {
          $box.boxSlider('showSlide', $(this).data('slideindex'));
          ev.preventDefault();
        });

        // This is for demo purposes only, kills the plugin and resets it with
        // the newly selected effect FIXME clean this up!
        $('#effect-list').on('click', '.effect', function (ev) {
          var $effect = $(this)
            , fx = $effect.data('fx')
            , extraOptions = effectOptions[fx];

          $effects.removeClass('current');
          $effect.addClass('current');
          switchIndicator(null, null, 0, 0);

          if (extraOptions) {
            $.each(extraOptions, function (opt, val) {
              $box.boxSlider('option', opt, val);
            });
          }

          $box.boxSlider('option', 'effect', $effect.data('fx'));

          ev.preventDefault();
        });

});
</script>

HTML::

<div id="page">
<div id="viewport-shadow">

<a href="#" id="prev" title="go to the next slide"></a>
<a href="#" id="next" title="go to the next slide"></a>

<div id="viewport">
<div id="box">
<figure class="slide">
<img src="http://www.philparsons.co.uk/demos/box-slider/img/the-battle.jpg"/>
</figure>
<figure class="slide">
<img src="http://www.philparsons.co.uk/demos/box-slider/img/hiding-the-map.jpg"/>
</figure>
<figure class="slide">
<img src="http://www.philparsons.co.uk/demos/box-slider/img/theres-the-buoy.jpg"/>
</figure>
<figure class="slide">
<img src="http://www.philparsons.co.uk/demos/box-slider/img/finding-the-key.jpg"/>
</figure>
<figure class="slide">
<img src="http://www.philparsons.co.uk/demos/box-slider/img/lets-get-out-of-here.jpg"/>
</figure>
</div>
</div>

<div id="time-indicator"></div>
</div>

<footer>
<nav class="slider-controls">
<ul id="controls">
<li><a class="goto-slide current" href="#" data-slideindex="0"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="1"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="2"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="3"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="4"></a></li>
</ul>
</nav>
</footer>

<aside id="effect-switcher">
<h2>Select effect</h2>
<ul id="effect-list">
<li><a href="#" class="effect current" data-fx="scrollVert3d">Vertical 3D scroll</a></li>
<li><a href="#" class="effect" data-fx="scrollHorz3d">Horizontal 3D scroll</a></li>
<li><a href="#" class="effect" data-fx="tile3d">3D tiles<span class="new-effect">new!</span></a></li>
<li><a href="#" class="effect" data-fx="tile">2D tiles<span class="new-effect">new!</span></a></li>
<li><a href="#" class="effect" data-fx="scrollVert">Vertical scroll</a></li>
<li><a href="#" class="effect" data-fx="scrollHorz">Horizontal scroll</a></li>
<li><a href="#" class="effect" data-fx="blindLeft">Blind left</a></li>
<li><a href="#" class="effect" data-fx="blindDown">Blind down</a></li>
<li><a href="#" class="effect" data-fx="fade">Fade</a></li>
</ul>
</aside>

</div>

Silahkan sobat berkeasi sendiri yaa,.. hehee,. goodluck! ^^

Please rate this article: