Implementieren Sie coole 3D-Focus-Map-Animationen basierend auf Jquery und html5_jquery

Dieses HTML5-Fokusbild kann nicht nur manuell durch Klicken auf die Schaltfläche zwischen Bildern wechseln, sondern unterstützt auch den automatischen Bildwechsel, was ebenfalls sehr praktisch ist. Wenn Sie Produktbilder auf Ihrer Website anzeigen müssen, ist dieses Fokusbild-Plugin genau das Richtige für Sie.

Online-Download des Demo-Quellcodes

HTML-Code

<section id="dg-container" class="dg-container">
 <div class="dg-wrapper">
 <a href="#"><img src="/static/imghw/default1.png"  data-src="images/1.jpg"  class="lazy" alt="Implementieren Sie coole 3D-Focus-Map-Animationen basierend auf Jquery und html5_jquery"><div>http://www.colazionedamichy.it/</div></a>
 <a href="#"><img src="/static/imghw/default1.png"  data-src="images/2.jpg"  class="lazy" alt="image02"><div>http://www.percivalclo.com/</div></a>
 <a href="#"><img src="/static/imghw/default1.png"  data-src="images/3.jpg"  class="lazy" alt="image03"><div>http://www.wanda.net/fr</div></a>
 <a href="#"><img src="/static/imghw/default1.png"  data-src="images/4.jpg"  class="lazy" alt="image04"><div>http://lifeingreenville.com/</div></a>
 <a href="#"><img src="/static/imghw/default1.png"  data-src="images/5.jpg"  class="lazy" alt="image05"><div>http://circlemeetups.com/</div></a>
 <a href="#"><img src="/static/imghw/default1.png"  data-src="images/6.jpg"  class="lazy" alt="image06"><div>http://www.castirondesign.com/</div></a>
 <a href="#"><img src="/static/imghw/default1.png"  data-src="images/7.jpg"  class="lazy" alt="image07"><div>http://www.foundrycollective.com/</div></a>
 <a href="#"><img src="/static/imghw/default1.png"  data-src="images/8.jpg"  class="lazy" alt="image08"><div>http://www.mathiassterner.com/home</div></a>
 <a href="#"><img src="/static/imghw/default1.png"  data-src="images/9.jpg"  class="lazy" alt="image09"><div>http://learnlakenona.com/</div></a>
 <a href="#"><img src="/static/imghw/default1.png"  data-src="images/10.jpg"  class="lazy" alt="image10"><div>http://www.neighborhood-studio.com/</div></a>
 <a href="#"><img src="/static/imghw/default1.png"  data-src="images/11.jpg"  class="lazy" alt="image11"><div>http://www.beckindesign.com/</div></a>
 <a href="#"><img src="/static/imghw/default1.png"  data-src="images/12.jpg"  class="lazy" alt="image12"><div>http://kicksend.com/</div></a>
 </div>
 <nav> 
 <span class="dg-prev"><</span>
 <span class="dg-next">></span>
 </nav>
</section>

CSS-Code

.dg-container{
 width: 100%;
 height: 450px;
 position: relative;
}
.dg-wrapper{
 width: 481px;
 height: 316px;
 margin: 0 auto;
 position: relative;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-perspective: 1000px;
 -moz-perspective: 1000px;
 -o-perspective: 1000px;
 -ms-perspective: 1000px;
 perspective: 1000px;
}
.dg-wrapper a{
 width: 482px;
 height: 316px;
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 background: transparent url(../images/browser.png) no-repeat top left;
 box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
}
.dg-wrapper a.dg-transition{
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
}
.dg-wrapper a img{
 display: block;
 padding: 41px 0px 0px 1px;
}
.dg-wrapper a div{
 font-style: italic;
 text-align: center;
 line-height: 50px;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
 color: #333;
 font-size: 16px;
 width: 100%;
 bottom: -55px;
 display: none;
 position: absolute;
}
.dg-wrapper a.dg-center div{
 display: block;
}
.dg-container nav{
 width: 58px;
 position: absolute;
 z-index: 1000;
 bottom: 40px;
 left: 50%;
 margin-left: -29px;
}
.dg-container nav span{
 text-indent: -9000px;
 float: left;
 cursor:pointer;
 width: 24px;
 height: 25px;
 opacity: 0.8;
 background: transparent url(../images/arrows.png) no-repeat top left;
}
.dg-container nav span:hover{
 opacity: 1;
}
.dg-container nav span.dg-next{
 background-position: top right;
 margin-left: 10px;
}

JavaScript-Code

/**
 * jquery.gallery.js
 * Copyright 2011, Pedro Botelho / Codrops
 * Free to use under the MIT license.
 *
 * Date: Mon Jan 30 2012
 */

(function( $, undefined ) {

 /*
 * Gallery object.
 */
 $.Gallery   = function( options, element ) {

 this.$el = $( element );
 this._init( options );

 };

 $.Gallery.defaults  = {
 current : 0, // index of current item
 autoplay : false,// slideshow on / off
 interval : 2000 // time between transitions
  };

 $.Gallery.prototype = {
 _init   : function( options ) {

  this.options  = $.extend( true, {}, $.Gallery.defaults, options );

  // support for 3d / 2d transforms and transitions
  this.support3d = Modernizr.csstransforms3d;
  this.support2d = Modernizr.csstransforms;
  this.supportTrans = Modernizr.csstransitions;

  this.$wrapper = this.$el.find('.dg-wrapper');

  this.$items  = this.$wrapper.children();
  this.itemsCount = this.$items.length;

  this.$nav  = this.$el.find('nav');
  this.$navPrev = this.$nav.find('.dg-prev');
  this.$navNext = this.$nav.find('.dg-next');

  // minimum of 3 items
  if( this.itemsCount < 3 ) {

  this.$nav.remove();
  return false;

  } 

  this.current = this.options.current;

  this.isAnim  = false;

  this.$items.css({
  'opacity' : 0,
  'visibility': 'hidden'
  });

  this._validate();

  this._layout();

  // load the events
  this._loadEvents();

  // slideshow
  if( this.options.autoplay ) {

  this._startSlideshow();

  }

 },
 _validate  : function() {

  if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) {

  this.current = 0;

  } 

 },
 _layout  : function() {

  // current, left and right items
  this._setItems();

  // current item is not changed
  // left and right one are rotated and translated
  var leftCSS, rightCSS, currentCSS;

  if( this.support3d && this.supportTrans ) {

  leftCSS = {
   '-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
   '-moz-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
   '-o-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
   '-ms-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
   'transform'  : 'translateX(-350px) translateZ(-200px) rotateY(45deg)'
  };

  rightCSS = {
   '-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
   '-moz-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
   '-o-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
   '-ms-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
   'transform'  : 'translateX(350px) translateZ(-200px) rotateY(-45deg)'
  };

  leftCSS.opacity = 1;
  leftCSS.visibility = 'visible';
  rightCSS.opacity = 1;
  rightCSS.visibility = 'visible';

  }
  else if( this.support2d && this.supportTrans ) {

  leftCSS = {
   '-webkit-transform' : 'translate(-350px) scale(0.8)',
   '-moz-transform' : 'translate(-350px) scale(0.8)',
   '-o-transform' : 'translate(-350px) scale(0.8)',
   '-ms-transform' : 'translate(-350px) scale(0.8)',
   'transform'  : 'translate(-350px) scale(0.8)'
  };

  rightCSS = {
   '-webkit-transform' : 'translate(350px) scale(0.8)',
   '-moz-transform' : 'translate(350px) scale(0.8)',
   '-o-transform' : 'translate(350px) scale(0.8)',
   '-ms-transform' : 'translate(350px) scale(0.8)',
   'transform'  : 'translate(350px) scale(0.8)'
  };

  currentCSS = {
   'z-index'  : 999
  };

  leftCSS.opacity = 1;
  leftCSS.visibility = 'visible';
  rightCSS.opacity = 1;
  rightCSS.visibility = 'visible';

  }

  this.$leftItm.css( leftCSS || {} );
  this.$rightItm.css( rightCSS || {} );

  this.$currentItm.css( currentCSS || {} ).css({
  'opacity' : 1,
  'visibility': 'visible'
  }).addClass('dg-center');

 },
 _setItems  : function() {

  this.$items.removeClass('dg-center');

  this.$currentItm = this.$items.eq( this.current );
  this.$leftItm = ( this.current === 0 ) &#63; this.$items.eq( this.itemsCount - 1 ) : this.$items.eq( this.current - 1 );
  this.$rightItm = ( this.current === this.itemsCount - 1 ) &#63; this.$items.eq( 0 ) : this.$items.eq( this.current + 1 );

  if( !this.support3d && this.support2d && this.supportTrans ) {

  this.$items.css( 'z-index', 1 );
  this.$currentItm.css( 'z-index', 999 );

  }

  // next & previous items
  if( this.itemsCount > 3 ) {

  // next item
  this.$nextItm = ( this.$rightItm.index() === this.itemsCount - 1 ) &#63; this.$items.eq( 0 ) : this.$rightItm.next();
  this.$nextItm.css( this._getCoordinates('outright') );

  // previous item
  this.$prevItm = ( this.$leftItm.index() === 0 ) &#63; this.$items.eq( this.itemsCount - 1 ) : this.$leftItm.prev();
  this.$prevItm.css( this._getCoordinates('outleft') );

  }

 },
 _loadEvents  : function() {

  var _self = this;

  this.$navPrev.on( 'click.gallery', function( event ) {

  if( _self.options.autoplay ) {

   clearTimeout( _self.slideshow );
   _self.options.autoplay = false;

  }

  _self._navigate('prev');
  return false;

  });

  this.$navNext.on( 'click.gallery', function( event ) {

  if( _self.options.autoplay ) {

   clearTimeout( _self.slideshow );
   _self.options.autoplay = false;

  }

  _self._navigate('next');
  return false;

  });

  this.$wrapper.on( 'webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function( event ) {

  _self.$currentItm.addClass('dg-center');
  _self.$items.removeClass('dg-transition');
  _self.isAnim = false;

  });

 },
 _getCoordinates : function( position ) {

  if( this.support3d && this.supportTrans ) {

  switch( position ) {
   case 'outleft':
   return {
    '-webkit-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
    '-moz-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
    '-o-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
    '-ms-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
    'transform'  : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
    'opacity'  : 0,
    'visibility' : 'hidden'
   };
   break;
   case 'outright':
   return {
    '-webkit-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
    '-moz-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
    '-o-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
    '-ms-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
    'transform'  : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
    'opacity'  : 0,
    'visibility' : 'hidden'
   };
   break;
   case 'left':
   return {
    '-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
    '-moz-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
    '-o-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
    '-ms-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
    'transform'  : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
    'opacity'  : 1,
    'visibility' : 'visible'
   };
   break;
   case 'right':
   return {
    '-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
    '-moz-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
    '-o-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
    '-ms-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
    'transform'  : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
    'opacity'  : 1,
    'visibility' : 'visible'
   };
   break;
   case 'center':
   return {
    '-webkit-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',
    '-moz-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',
    '-o-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',
    '-ms-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',
    'transform'  : 'translateX(0px) translateZ(0px) rotateY(0deg)',
    'opacity'  : 1,
    'visibility' : 'visible'
   };
   break;
  };

  }
  else if( this.support2d && this.supportTrans ) {

  switch( position ) {
   case 'outleft':
   return {
    '-webkit-transform' : 'translate(-450px) scale(0.7)',
    '-moz-transform' : 'translate(-450px) scale(0.7)',
    '-o-transform' : 'translate(-450px) scale(0.7)',
    '-ms-transform' : 'translate(-450px) scale(0.7)',
    'transform'  : 'translate(-450px) scale(0.7)',
    'opacity'  : 0,
    'visibility' : 'hidden'
   };
   break;
   case 'outright':
   return {
    '-webkit-transform' : 'translate(450px) scale(0.7)',
    '-moz-transform' : 'translate(450px) scale(0.7)',
    '-o-transform' : 'translate(450px) scale(0.7)',
    '-ms-transform' : 'translate(450px) scale(0.7)',
    'transform'  : 'translate(450px) scale(0.7)',
    'opacity'  : 0,
    'visibility' : 'hidden'
   };
   break;
   case 'left':
   return {
    '-webkit-transform' : 'translate(-350px) scale(0.8)',
    '-moz-transform' : 'translate(-350px) scale(0.8)',
    '-o-transform' : 'translate(-350px) scale(0.8)',
    '-ms-transform' : 'translate(-350px) scale(0.8)',
    'transform'  : 'translate(-350px) scale(0.8)',
    'opacity'  : 1,
    'visibility' : 'visible'
   };
   break;
   case 'right':
   return {
    '-webkit-transform' : 'translate(350px) scale(0.8)',
    '-moz-transform' : 'translate(350px) scale(0.8)',
    '-o-transform' : 'translate(350px) scale(0.8)',
    '-ms-transform' : 'translate(350px) scale(0.8)',
    'transform'  : 'translate(350px) scale(0.8)',
    'opacity'  : 1,
    'visibility' : 'visible'
   };
   break;
   case 'center':
   return {
    '-webkit-transform' : 'translate(0px) scale(1)',
    '-moz-transform' : 'translate(0px) scale(1)',
    '-o-transform' : 'translate(0px) scale(1)',
    '-ms-transform' : 'translate(0px) scale(1)',
    'transform'  : 'translate(0px) scale(1)',
    'opacity'  : 1,
    'visibility' : 'visible'
   };
   break;
  };

  }
  else {

  switch( position ) {
   case 'outleft' : 
   case 'outright' : 
   case 'left' : 
   case 'right' :
   return {
    'opacity'  : 0,
    'visibility' : 'hidden'
   };
   break;
   case 'center' :
   return {
    'opacity'  : 1,
    'visibility' : 'visible'
   };
   break;
  };

  }

 },
 _navigate  : function( dir ) {

  if( this.supportTrans && this.isAnim )
  return false;

  this.isAnim = true;

  switch( dir ) {

  case 'next' :

   this.current = this.$rightItm.index();

   // current item moves left
   this.$currentItm.addClass('dg-transition').css( this._getCoordinates('left') );

   // right item moves to the center
   this.$rightItm.addClass('dg-transition').css( this._getCoordinates('center') ); 

   // next item moves to the right
   if( this.$nextItm ) {

   // left item moves out
   this.$leftItm.addClass('dg-transition').css( this._getCoordinates('outleft') );

   this.$nextItm.addClass('dg-transition').css( this._getCoordinates('right') );

   }
   else {

   // left item moves right
   this.$leftItm.addClass('dg-transition').css( this._getCoordinates('right') );

   }
   break;

  case 'prev' :

   this.current = this.$leftItm.index();

   // current item moves right
   this.$currentItm.addClass('dg-transition').css( this._getCoordinates('right') );

   // left item moves to the center
   this.$leftItm.addClass('dg-transition').css( this._getCoordinates('center') );

   // prev item moves to the left
   if( this.$prevItm ) {

   // right item moves out
   this.$rightItm.addClass('dg-transition').css( this._getCoordinates('outright') );

   this.$prevItm.addClass('dg-transition').css( this._getCoordinates('left') );

   }
   else {

   // right item moves left
   this.$rightItm.addClass('dg-transition').css( this._getCoordinates('left') );

   }
   break; 

  };

  this._setItems();

  if( !this.supportTrans )
  this.$currentItm.addClass('dg-center');

 },
 _startSlideshow : function() {

  var _self = this;

  this.slideshow = setTimeout( function() {

  _self._navigate( 'next' );

  if( _self.options.autoplay ) {

   _self._startSlideshow();

  }

  }, this.options.interval );

 },
 destroy  : function() {

  this.$navPrev.off('.gallery');
  this.$navNext.off('.gallery');
  this.$wrapper.off('.gallery');

 }
 };

 var logError  = function( message ) {
 if ( this.console ) {
  console.error( message );
 }
 };

 $.fn.gallery  = function( options ) {

 if ( typeof options === 'string' ) {

  var args = Array.prototype.slice.call( arguments, 1 );

  this.each(function() {

  var instance = $.data( this, 'gallery' );

  if ( !instance ) {
   logError( "cannot call methods on gallery prior to initialization; " +
   "attempted to call method '" + options + "'" );
   return;
  }

  if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
   logError( "no such method '" + options + "' for gallery instance" );
   return;
  }

  instance[ options ].apply( instance, args );

  });

 } 
 else {

  this.each(function() {

  var instance = $.data( this, 'gallery' );
  if ( !instance ) {
   $.data( this, 'gallery', new $.Gallery( options, this ) );
  }
  });

 }

 return this;

 };

})( jQuery );

Ich hoffe, dass dieser Artikel allen beim Erlernen der Javascript-Programmierung hilfreich sein wird.