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).