ホームページ > ウェブフロントエンド > CSSチュートリアル > jQuery および CSS3 3D 回転プロジェクト表示テンプレート

jQuery および CSS3 3D 回転プロジェクト表示テンプレート

黄舟
リリース: 2017-01-18 13:30:49
オリジナル
1449 人が閲覧しました

簡単なチュートリアル

これは、非常にクールな jQuery と CSS3 の 3D 回転プロジェクト表示テンプレートです。このテンプレートは、CSS3 3D 変換を使用して 3D 立方体回転効果を作成し、各項目が切り替え時に立方体回転効果を表示します。

使用方法

HTML 構造

HTML 構造には 2 つの部分が含まれています: nav.cd-3d-portfolio-navigation はプロジェクトのナビゲーションであり、もう 1 つは各プロジェクトをラップするために使用される div.projects です。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

<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

3D 効果を実現するために、Portfolio3D オブジェクトがテンプレート内に作成され、bindEvents 関数を使用してイベントをバインドします。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

function Portfolio3D( element ) {

  //define a Portfolio3D object

  this.element = element;

  this.navigation = this.element.children(&#39;.cd-3d-portfolio-navigation&#39;);

  this.rowsWrapper = this.element.children(&#39;.projects&#39;);

  this.rows = this.rowsWrapper.children(&#39;.row&#39;);

  this.visibleFace = &#39;front&#39;;

  this.visibleRowIndex = 0;

  this.rotationValue = 0;

  //animating variables

  this.animating = false;

  this.scrolling = false;

  // bind portfolio events

  this.bindEvents();

}

   

if( $(&#39;.cd-3d-portfolio&#39;).length > 0 ) {

  var portfolios3D = [];

  $(&#39;.cd-3d-portfolio&#39;).each(function(){

    //create a Portfolio3D object for each .cd-3d-portfolio

    portfolios3D.push(new Portfolio3D($(this)));

  });

}

ログイン後にコピー

visibleFace プロパティは、立方体の現在表示されている面を保存するために使用されます。

ユーザーが特定の項目タイプを回転すると、showNewContent() メソッドが正しい立方体の面を表示し、ul.row 内の要素を回転するために使用されます。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

Portfolio3D.prototype.bindEvents = function() { 

var self = this;   

this.navigation.on(&#39;click&#39;, &#39;a:not(.selected)&#39;, function(event){   

//update visible projects when clicking on the filter   

event.preventDefault();   

if( !self.animating ) {     

self.animating = true;     

var index = $(this).parent(&#39;li&#39;).index();            

//show new projects     

self.showNewContent(index);       

//update filter selected element     

//..   

});   

//...

};

ログイン後にコピー

上記は jQuery と CSS3 の 3D 回転プロジェクト表示テンプレートの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。


ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート