HTML 5ショッピングモールケース

2481 ワード

使用する技術:fullpage.js-フルスクリーンスクロールプラグインが参照するファイル


 

 

HTML

いりぐちかんすう
$(function(){
    $('#fullpage').fullpage();
});

パラメータの :1,$(’#fullpage’).fullpage({navigation:true,コールバック })は、navigationが フォーマットであることをカンマで るjsonオブジェクトフォーマットに します.フォーマットに !scrollingSpeed:700、 が きいほど くなり、 をスクロールするのに する と できます.z-indexが きいほど、 の2、CSS(1)についてcssスタイルを するには、 するスタイルに じて、#fp-nav、cssの しいスタイルを し、スタイルの に します!important を する :まず を し、 を します(2) えleft:50%transform:translate X(-50%)-メリット:margin-leftの な を する はありません(3) background:rgba(0,0,0,0.3)の が さいほど、 (4) に して background:url()no-repeat center center;(5)2 の を くテクニックは1つのdivを し、divの は1 の に する.divでは、imgラベルを し、 の を パスで めします.(6) されたテクニックopacity:0;— でフェードアウトの を うため、display(7) で しないでください:スクロールする 、 はbackground-attachment:fixed// しくは:scroll:デフォルト 、 は に して して、 はページのスクロールに って して、つまり と はバインドします.fixed:バックグラウンドマップはビューポートに して されているので、ページのスクロールに ってバックグラウンドが かず、バックグラウンドがbodyに されていることに します.local: は の に して されており、inhert: されており、 も っていません.3、@keyframesアニメーション {0%{top:25%}50%{100%{}についてcssで び す:animation:アニメーション 3 s (linear)infinite;4、コールバック afterLoad:function(anchorLink,index)index: のページインデックスonLeave:function(index,nextIndex,direction)index: のページ;nextIndexはスクロールした「ページ」のシーケンス で する は にコールバック 5、jQuery(1)show に する:ある が れ、display:block(2)animate である.animate({“right”:370},1500,function(){…}) .animate({" ": }, (ミリ ),コールバック )(3) の の さvar k=$(window)を する.height(); 2 のソファーの :“ きいソファーの ”は“テレビ”の に して、それからすぐに します.8つのソファーが されます.ソファーの が され、 に します.
3 の のソファー:ソファーが 2 から ちた に、もとのソファーがなくなった :1 の いピクチャーで って 2 が 3 に がる 、ソファーは してそして 3 に かって い を って く を して です
var flag=trueの :アニメーションを し、スロットルバルブの .このように くと、アニメーションが したときにtrueとなり、サーバの な を らすことができます.
4 :