2017-01-24 154 views
5

我在尋找類似於這個網站的jquery動畫http://cuberto.com/。 到目前爲止,我已通過pagePiling.js完成此鏈接http://codepen.io/mirmibrahim/pen/MJoGBY。任何人都可以幫我完成它在curberto上的方式。我不知道如何加載圖像的一半和文本的一半,並打開下一節來自第一張幻燈片上的正方形動畫。jquery動畫頁面打印

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>pagePiling.js plugin - Horizontal scroll</title> 
    <meta name="author" content="Alvaro Trigo Lopez" /> 
    <meta name="description" content="pagePiling.js plugin by Alvaro Trigo." /> 
    <meta name="keywords" content="pile,piling,piling.js,stack,pages,scrolling,stacking,touch,fullpile,scroll,plugin,jquery" /> 
    <meta name="Resource-type" content="Document" /> 

    <link rel="stylesheet" type="text/css" href="../jquery.pagepiling.css" /> 
    <link rel="stylesheet" type="text/css" href="examples.css" /> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <!--script src="../jquery-1.9.1.js"></script--> 


    <script type="text/javascript" src="../jquery.pagepiling.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 

     /* 
     * Plugin intialization 
     */ 
     $('#pagepiling').pagepiling({ 
     direction: 'horizontal', 
     menu: '#menu', 
     scrollingSpeed: 2000, 
     anchors: ['page1', 'page2', 'page3', 'page4'], 
     sectionsColor: ['black', '#1C252C', '#F27B1D', '#39C'], 
     navigation: { 
      'position': 'right', 
      'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4'] 
     }, 
     afterRender: function() { 
      $('#pp-nav').addClass('custom'); 
      console.log("After Render "); 

     }, 
     afterLoad: function(anchorLink, index) { 

      // $.fn.pagepiling.setAllowScrolling(false); 
      console.log("After Load " + index); 
      if (index == 1) { 

      console.log("index " + index); 
      } else if (index == 2) { 

      } 

      if (index > 1) { 
      $('#pp-nav').removeClass('custom'); 
      } else { 
      $('#pp-nav').addClass('custom'); 
      } 
     }, 
     onLeave: function(index, nextIndex, direction) { 
      console.log("After Load " + index); 

      if (index == 1) { 

      /*     $("#block").animate({ 
             width: "100%", 
             opacity: 0.4, 
             marginLeft: "0.6in", 
             fontSize: "12em", 
             borderWidth: "20px" 
             }, 4000 , function() { 
       // Animation complete. 

        //alert("s"); 
       }); 
      */ 

      $("#block").animate({ 
       width: "58%" 
      }, 1000, function() { 
       console.log("animation finished"); 
       $.fn.pagepiling.setScrollingSpeed(500); 

      }); 

      } else if (index == 2 && nextIndex == 1) { 

      $("#block").animate({ 
       width: "0%" 
      }, 3000, function() { 
       console.log("animation finished"); 
       $.fn.pagepiling.setScrollingSpeed(2000); 

      }); 

      } 

     } 

     }); 
    }); 
    </script> 


    <style> 
    #section1 img { 
     margin: 20px 0; 
     opacity: 0.7; 
    } 
    /* colors 
    * --------------------------------------- */ 

    #colors2, 
    #colors3 { 
     position: absolute; 
     height: 163px; 
     width: 362px; 
     z-index: 1; 
     background-repeat: no-repeat; 
     left: 0; 
     margin: 0 auto; 
     right: 0; 
    } 

    #colors2 { 
     background-image: url(imgs/colors2.gif); 
     top: 0; 
    } 

    #colors3 { 
     background-image: url(imgs/colors3.gif); 
     bottom: 0; 
    } 
    /* Overwriting fullPage.js tooltip color 
    * --------------------------------------- */ 

    #pp-nav.custom .pp-tooltip { 
     color: #AAA; 
    } 
    </style> 

</head> 

<body> 
    <ul id="menu"> 
    <li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li> 
    <li data-menuanchor="page2"><a href="#page2">Page 2</a></li> 
    <li data-menuanchor="page3"><a href="#page3">Page 3</a></li> 
    </ul> 


    <div id="pagepiling"> 
    <div class="section" id="section1"> 
     <!--img src="imgs/pagePiling-plugin.gif" alt="pagePiling" /--> 

     <div class="intro"> 
     <div> 
      <div style="background:#F6303F;border-left: thick solid #F6303F; height:150px; width:8px; margin-left:42%;" id="block"> 


      </div> 
      <h1 style="color: white;">DIGITAL</h1> 
      <p style="color: white;">CREATIVE AGENCY</p> 

     </div> 


     </div> 

    </div> 
    <div class="section"> 
     <div class="intro"> 
     <h1>Simple to use</h1> 
     <p>Just use the option direction: 'horizontal' to have it working!</p> 
     </div> 
    </div> 
    <div class="section" id="section3"> 
     <div class="intro"> 
     <h1>Isn't it great?</h1> 
     <p>Just as you expected!</p> 
     <div id="colors2"></div> 
     <div id="colors3"></div> 
     </div> 
    </div> 
    </div> 

</body> 

</html> 
+0

你的codepen看起來對我來說工作正常,你的要求是什麼? –

+0

如果你能看到第一頁,紅線擴展應該打開其中的一半,下半部分出現在左邊的動畫中,我被困在它上面。 – ibrahim

+0

基於BuiltWith搜索,它們似乎使用skrollr,歷史記錄js和greensock。 – rawnewdlz

回答

0

我想pagepiling.js可能是錯誤的方向,因爲它只是一個動畫頁面上,而不是兩個頁面之間的動畫。

我過去處理過的東西的方式是使用PJAX插件,如Barba.JS,它允許您在站點導航事件之間添加動畫過渡。 Barba通過手動更改URL,爲新頁面抓取新內容以及在舊頁面和新頁面之間執行轉換(您可以爲Cuberto這樣的元素創建動畫)來劫持頁面更改。

讓我知道這是否有用,或者如果我錯過了這一點,我會嘗試相應地更新我的答案!

編輯:剛纔意識到這是一個七個月的問題,但希望這對別人有幫助!