Anzeigevorlage für jQuery- und CSS3-3D-Rotationsprojekte

Kurzes Tutorial

Dies ist eine sehr coole Anzeigevorlage für jQuery- und CSS3-3D-Rotationsprojekte. Diese Vorlage verwendet die CSS3-3D-Transformation, um einen 3D-Würfelrotationseffekt zu erzeugen, sodass jedes Element beim Umschalten einen Würfelrotationseffekt zeigt.

Verwendung

HTML-Struktur

Die HTML-Struktur besteht aus zwei Teilen: nav.cd-3d-portfolio-navigation ist die Navigation des Projekts und div.projects, die verwendet für jeden Paketartikel.

<div class="cd-3d-portfolio">
  <nav class="cd-3d-portfolio-navigation">
    <div class="cd-wrapper">
      <h1>3D Portfolio Template</h1>
         
      <ul>
        <li><a href="#0" class="selected">Filter 1</a></li>
        <li><a href="#0">Filter 2</a></li>
        <li><a href="#0">Filter 3</a></li>
      </ul>
    </div>
  </nav> <!-- .cd-3d-portfolio-navigation -->
   
  <div class="projects">
    <ul class="row">
      <li class="front-face selected project-1">
        <div class="project-wrapper">
          <div class="project-image">
            <div class="project-title">
              <h2>Project 1</h2>
            </div>
          </div> <!-- .project-image -->
  
          <div class="project-content">
            <!-- project content here -->
          </div> <!-- .project-content -->
  
          <a href="#0" class="close-project">Close</a>
        </div> <!-- .project-wrapper -->
      </li>
  
      <li class="right-face project-2">
        <div class="project-wrapper">
          <div class="project-image">
            <div class="project-title">
              <h2>Project 2</h2>
            </div>
          </div> <!-- .project-image -->
  
          <div class="project-content">
            <!-- project content here -->
          </div> <!-- .project-content -->
  
          <a href="#0" class="close-project">Close</a>
        </div> <!-- .project-wrapper -->
      </li>
  
      <li class="right-face project-3">
        <div class="project-wrapper">
          <div class="project-image">
            <div class="project-title">
              <h2>Project 3</h2>
            </div>
          </div> <!-- .project-image -->
  
          <div class="project-content">
            <!-- project content here -->
          </div> <!-- .project-content -->
  
          <a href="#0" class="close-project">Close</a>
        </div> <!-- .project-wrapper -->
      </li>
    </ul> <!-- .row -->
   
    <ul class="row">
      <!-- projects here -->
    </ul> <!-- .row -->
   
    <ul class="row">
      <!-- projects here -->
    </ul> <!-- .row -->
  </div><!-- .projects -->
</div>

JavaScript

Um den 3D-Effekt zu erzielen, wird in der Vorlage ein Portfolio3D-Objekt erstellt und die bindEvents-Funktion zum Binden von Ereignissen verwendet.

function Portfolio3D( element ) {
  //define a Portfolio3D object
  this.element = element;
  this.navigation = this.element.children('.cd-3d-portfolio-navigation');
  this.rowsWrapper = this.element.children('.projects');
  this.rows = this.rowsWrapper.children('.row');
  this.visibleFace = 'front';
  this.visibleRowIndex = 0;
  this.rotationValue = 0;
  //animating variables
  this.animating = false;
  this.scrolling = false;
  // bind portfolio events
  this.bindEvents();
}
  
if( $('.cd-3d-portfolio').length > 0 ) {
  var portfolios3D = [];
  $('.cd-3d-portfolio').each(function(){
    //create a Portfolio3D object for each .cd-3d-portfolio
    portfolios3D.push(new Portfolio3D($(this)));
  });
}

Das Attribut „visibleFace“ wird zum Speichern der aktuell sichtbaren Fläche des Würfels verwendet.

Wenn der Benutzer einen bestimmten Elementtyp dreht, wird die Methode showNewContent() verwendet, um die richtige Würfelfläche anzuzeigen und die Elemente in ul.row zu drehen.

Portfolio3D.prototype.bindEvents = function() {  
var self = this;    
this.navigation.on('click', 'a:not(.selected)', function(event){    
//update visible projects when clicking on the filter    
event.preventDefault();    
if( !self.animating ) {      
self.animating = true;      
var index = $(this).parent('li').index();             
//show new projects      
self.showNewContent(index);        
//update filter selected element      
//..    
}  
});    
//...
};

Das Obige ist der Inhalt der Anzeigevorlage für jQuery- und CSS3-3D-Rotationsprojekte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).