JPEG画質を設定することができますが、背景画像が透明画で扱うことができません
PNG24は、IEブラウザの低いバージョンでサポートすることができない、画像が不鮮明になり、背景が色で塗りつぶされますが、あなたは、JSは、それがIEのブラウザで正常に表示させることができる手段をPNG24使用することができます
PNG8飽和劣っPNG24
WBMPのビットマップ形式、頻繁に使用されていません

詳細カット

スライスツールは、複数の画像とワンタイムキー生成を切る切断が完了した後、ファイルをクリックすることができます - ウェブ形式のために保存し、保存します。それは自動的に私たちはただ絵をカットされた画像のフォルダを生成しますが、実際の開発は、多くの場合、達成することができ、同じ効果に非常に多くの図、ユースCSSスタイルをカットする必要がないので、それは非効率的です。

フォントの設定

私たちのコンピュータは、ドラフトデザインにフォントを使用しない場合は、フォントをダウンロードすることができ、コントロールパネルを開く - フォント、私たちのコンピュータ上のフォントファイルへのドラッグが正常に新しいフォントをインストールし、そしてちょうどPhotoshopのを再起動しますあなたは、フォントを使用することができます。

概要

切断計画の最適化

3秒の法則

以上3秒以上のユーザー負荷のWebページならば、彼は、ページを閉じ失うトラフィックに私たちをリードします。

また、リソースを集中的に、そしてできるだけので、Web開発絵絵として。

代わりにスタイルタイル張りの効果色の画像を使用しての

いくつかのイメージがマップ自体をタイル状にしている場合、それは単に1ピクセルおよびストレージに幅を設定し、CSSで参照設定実際の幅はタイル張りすることができます。

CSSスタイルの効果を達成するために使用することができ、あなたは、ディスプレイに画像がありません。

生産スプライトマップ

そして、私たちが望む表示領域、このように位置決め手段、透明な背景のPNGで使用するリソースを集中的に、より焦点を絞った絵を減らすために使う「スプライトマップ」、リソースは画像だけ一度にロードされています。

フォントのアイコン

代わりに、テキスト形式で写真を使用して、多くのアイコンライブラリを使用すると、画像の使用を置き換えることができ、たくさんの写真を達成することができます。

ショートカットを使用します

実際の開発プロセスは、アジャイル開発は、開発をスピードアップし、開発効率を向上させることができるショートカットキーを、使用することを学ぶために、主要な生産力です。

クラスのショートカットを操作します

削除レイヤー：削除

マージレイヤー：Ctrlキー+ E

ツールのショートカット

モバイル：V

カッティング：C

ショートカットの失敗

いくつかのショートカットが入力ソフトウェアとQQプログラムがかかるかもしれ

図援助カット

マークマン

すぐに色、フォントの委託、フォントとテキストの数字の間の距離を測定するために、私たちを助けることができます

TinyPNG

圧縮された画像、PNGのサイズ

フロントエンドの自動化

シニアフロントエンドのために、あなたはすぐにスプライト図を生成することができます。

フライヤープログラム

フロントエンドの開発プロセス

→視覚的な相互作用要件分析を行うためのプロダクトマネージャーは、ビジュアルデザイン、インタラクティブなアニメーションデザイン→メイクフロントエンドフロントエンド開発の静的なページの開発、アニメーションの開発を行います

前準備作業の開発

ビジュアルデザイン案PSD

デザインノートアイコン

図PSカット

図スプライト（http://alloyteam.github.io/gopng/）

ページコンテンツとスタイル

開発スキル

降順

BEM開発モデル

BEMは、ブロック（ブロック）、要素（エレメント）は、修飾子（修飾子）を表します

モジュール（接頭辞なし、複数のワード - 接続）

要素（モジュール後の要素は、__に接続され、複数のレベルを有することができます）

修飾された（元素又は特定のモジュールの状態は、状態名と接続_を使用して状態値を有していなければならない）、このようなハイライトラベルのステータスとして]

中心の方法の概要

テキストの垂直方向の中心

テキスト行の高さは、容器の同じ高さに設定されています

.item{
    height:38px;
    line-height:38px;
}

上下中央に親要素のブロック要素

負の要素の高さの上部マージン上半分から親への位置決め要素に対して、子要素が絶対位置に設定され、高さのTOP50％

.father{
    position:relative;
}
.child{
    position:absolute;
    height:38px;
    top:50%;
    margin-top:-19px;
}

水平中心ブロック要素

.item{
    width:38px;
    margin:0 auto;
}

ページの動的効果

CSSアニメーションの背景

DIV：次のような新しい選択、最後の子（divの下の最後の直接の子ノード）
-webkit列カウント：のようなマルチコラムレイアウト、3（再び浮遊する必要はありません）
フィレ：bordder半径
勾配背景：背景画像：-webkit-勾配（ライナー、0％、0％、100％、0％、から（＃1 2A8BBE）乃至（＃1 FE280E））。
transfrom
トランジション
アニメーション

CSSのアニメーション二つの方法

遷移：すべて1（完了したすべてのセレクタ要素が1S内で変動）
-webkit-アニメーション：岩2S無限簡単・イン・アウト.5s。

アニメーションのテスト・スクリプトツール

アナログモジュールのページを切り替えるには、マウスでクリックしてください

方法でスタイルの要素にクラス名を削除、追加することによって、全体的な話の状態をアニメーション化

テストスクリプトの概要

トラバーサルの二種類、] [アレイを通してオブジェクトを{}、トラバース

取得要素querySelector（素子）

文字列の傍受SUBSTR、文字列置換置き換えます

CSSアニメーションの概要

複雑なアニメーションの建設

CSSの擬似クラスとトリガアニメーションを使用して

Webページのインタラクティビティ

アニメーションフレームを使用してフレームアニメーションが定義されます→

カバードバックグラウンドモード

.bg{
    background-size:cover;
}

仕事

点数

ビューポートの先頭にページがロードされ、トップダウンのフローティングナビゲーションバー

変換変換ナビゲーションバーとの最初のデフォルトのスタイルトップナビゲーションバーからセット自体が非常に否定的です。ページがロードされると、ナビゲーションバーを追加するためのinitスタイルを、まだトップは0であるから距離を変換するように設定する翻訳する使用。トランジション効果2つのスタイル、最高レベルの位置と設定ナビゲーションバーが固定され、z屈折率を有する遷移。

<!-- 基本样式 -->
.header__wrap{
	width: 100%;
	height: 60px;
	position: fixed;    <!-- 固定在视口顶部 -->    
	margin: 0 auto;
	background:linear-gradient(rgba(0,0,0,.8),rgba(255,255,255,0));    <!-- 渐变效果 -->
	z-index: 999;
}
<!-- 动画效果 -->
<!-- 默认样式 -->
.header__wrap{
	transition: all 1s;
	transform: translate(0,-60px);    <!-- 用translate进行相对定位，使页面载入前默认在视口顶部以上，不可见 -->
}
<!-- init样式 -->
.header__wrap_animate_init{
	transform: translate(0,0);    <!-- 用translate进行相对定位，使页面载入时过渡至视口顶部 -->
}
<!-- done样式 -->
.header__wrap_animate_done{
	transform: translate(0,0);    <!-- 这句是为了不让元素样式在后来整体页面元素状态切换中受到影响 -->
}
<!-- 滚动滑动条时导航栏变色 -->
.header__wrap_status_black{
	background-color: rgba(0,0,0,.5);
}

ページがロードされると、自動再生アニメーションの最初の画面

イベントは発生しませんだけでロードされた、スクロールバーがスクロールする、それはとてもページが完成読み込み動画を再生するための最初の画面を持って作る、あなたが最初に最初に必要な、onscroll最初の画面で実行を呼び出すように機能しなくなりますので、スクリーン要素は、JSファイルで行われる最初の画面の機能を呼び出し、次に事前のinit状態に配置され、そして。

//载入页面时将所有屏幕设置为init状态，除了screen-1
window.οnlοad=function(){
	for(k in screenAnimateElements){
		if(k==='.screen-1') continue;	//第一屏不在这里初始化，而是在css中加上init样式，并通过setTimeout来切换成done
		setScreenAnimateInit(k);
	}
    //获取滚动条高度
	var top=document.body.scrollTop;
    //第一屏
	if(top>0&&top<1*640-150){
		playScreenAnimationDone('.screen-1');
		switchNavItemsAcitve(0);
		navTip.style.left=40+'px';
	}
    //...
	
}
//调用setTimeout函数，载入页面0.2s后将第一屏由init切换成done（init是在css文件中设置好了的）
setTimeout(function(){
	playScreenAnimationDone('.screen-1');
},200)

実際には、もっと簡単な方法は、上から直接、画面表示最初の条件> 0 TOP> = 0、最初のパネルを分離する機能を呼び出す必要はない行うことが可能にあり、初期化CSSに必要ではありません分離するために、第1パネル部材をINITに設定するが、他のスクリーンのような初期化する初期化機能の使用にロードされたときのようになります。

window.οnlοad=function(){
	for(k in screenAnimateElements){
		if(k==='.screen-1') continue;	//第一屏不在这里初始化，而是在css中加上init样式，并通过setTimeout来切换成done
		setScreenAnimateInit(k);
	}
	var top=document.body.scrollTop;
    //top>=0就可以在页面刚载入时就将init切换成done
	if(top>=0&&top<1*640-150){
		playScreenAnimationDone('.screen-1');
		switchNavItemsAcitve(0);
		navTip.style.left=40+'px';
	}
	//...
}

ページがロードされると、ナビゲーションバーの能動素子は、最初のデフォルトです

最初の要素はSTATUS_ACTIVEスタイル（テキストのハイライト）に配置され、CSSファイル内の最初の要素の位置に設けられたスライドドアを有します。

cssファイルの設定にも限り0がセットにswitchNavItemsActive（0）と呼ばれている=トップは、同じ効果を得ることができますよう、できるわけではありません。

window.οnlοad=function(){
	for(k in screenAnimateElements){
		if(k==='.screen-1') continue;	//第一屏不在这里初始化，而是在css中加上init样式，并通过setTimeout来切换成done
		setScreenAnimateInit(k);
	}
	var top=document.body.scrollTop;
	if(top>=0&&top<1*640-150){    //重点是这里的top=0
		playScreenAnimationDone('.screen-1');    
		switchNavItemsAcitve(0);    //文字highlight
		navTip.style.left=40+'px';    //滑动门滑至第一个元素的位置
	}
	//...
	
}

異なる画面を入力する際に、自動的に適切なアニメーションを再生
異なる画面に入ると、ナビゲーションバー/シラバスでの能動素子が変わります

/* 播放屏内的元素动画的函数 */
var playScreenAnimationDone=function(screenCls){
	//播放动画，改init为done
	var screen=document.querySelector(screenCls);	//获取当前屏对象
	var animateElements=screenAnimateElements[screenCls];	//需要设置动画的元素
	for (var i=0;i<animateElements.length;i++) {
		var element=document.querySelector(animateElements[i]);	//遍历当前屏的所有元素
		var baseCls=element.getAttribute('class');	//先取出初始的class名（含init样式）
		element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
        //把init样式替换成done样式
 	}
}

//获取导航栏元素
var navItems=getAllElem('.header__nav-item');
//获取大纲元素
var outlineItems=getAllElem('.outline__item');

//删除所有元素的active样式，再给当前元素设置active样式
var switchNavItemsAcitve=function(index){
	for(var i=0;i<navItems.length;i++){
		delCls(navItems[i],'header__nav-item_status_active');
		delCls(outlineItems[i],'outline__item_status_active');
	}
	addCls(navItems[index],'header__nav-item_status_active');
	addCls(outlineItems[index],'outline__item_status_active');
}


/* 在载入时调用样式init方法 */
window.οnlοad=function(){
	for(k in screenAnimateElements){
		if(k==='.screen-1') continue;	
        //第一屏不在这里初始化，而是在css中加上init样式，并通过setTimeout来切换成done
		setScreenAnimateInit(k);
	}
	var top=document.body.scrollTop;
    //根据滚动条高度来判断当前位于哪个屏幕，并调用相应的done函数和switchNavItemsActive函数，改变滑动门位置
	if(top>=0&&top<1*640-150){
		playScreenAnimationDone('.screen-1');
		switchNavItemsAcitve(0);
		navTip.style.left=40+'px';
	}
	else if(top>=1*640-150&&top<2*640-150){
		playScreenAnimationDone('.screen-2');
		switchNavItemsAcitve(1);
		navTip.style.left=(40+1*101)+'px';
	}
	else if(top>=2*640-150&&top<3*640-150){
		playScreenAnimationDone('.screen-3');
		switchNavItemsAcitve(2);
		navTip.style.left=(40+2*101)+'px';
	}
	else if(top>=3*640-150&&top<4*640-150){
		playScreenAnimationDone('.screen-4');
		switchNavItemsAcitve(3);
		navTip.style.left=(40+3*101)+'px';
	}
	else{
		playScreenAnimationDone('.screen-5');
		switchNavItemsAcitve(4);
		navTip.style.left=(40+4*101)+'px';
	}
	
}

対応する画面に移動して、タブナビゲーションの概要やラベルをクリックすると、

var setJump=function(i,lib){
	var item=lib[i];
	item.οnclick=function(){
		document.body.scrollTop=i*640;    //滚动条高度的写入
	}
}

for(var i=0;i<navItems.length;i++){
	setJump(i,navItems);
}
for(var i=0;i<outlineItems.length;i++){
	setJump(i,outlineItems);
}

マウスが要素ナビゲーションを移動させると、スライドドアは、マウスが除去されると、スライドドアが現在の画面に対応するバックナビゲーション要素をスライド要素をスライド

//获取滑动门元素
var navTip=getElem('.header__nav-tip');
//初始位置有偏移，先进行调整
navTip.style.left=40+'px';
var setTip=function(index,lib){
	lib[index].οnmοuseοver=function(){
        //鼠标滑入，定位至相应的导航标签
        navTip.style.left=(40+index*101)+'px';
	}
    //鼠标移出，找到当前页面对应的导航标签，将滑动门移至该标签下
	var activeIndex=0;
	lib[index].οnmοuseοut=function(){
		for(var i=0;i<lib.length;i++){
            /* 找到当前选中的元素，是被激活的元素 */
            if(getCls(lib[i]).indexOf('header__nav-item_status_active')>-1)	
            {
                activeIndex=i;
                break;
            }
		navTip.style.left=(40+activeIndex*101)+'px';
	}
}
//给每个导航元素添加滑动事件
for(var i=0;i<navItems.length;i++){
	setTip(i,navItems);
}

概要

マウスを使って、外出先現在のマウスのナビゲーションタブ（インデックスの関数に渡された）に入るマウス、修正にスライドします：スライディングドア位置がnavTip.style.leftによって制御され、それがアクティブであることの違いですnavTip.style.leftは、スライドドアは、タブ（タブトラバーサルナビゲーションに対応したナビゲーション画面に現在の裏面のうちマウスは、インデックス値を注意して設けられている現在アクティブなパターン要素を見つけたとき、マウスの意味の範囲内の位置にスライドされ、唯一の場所でスライドドアたびに、複数のスライドドアを表示されないように変更navTip.style.left）は、これらの操作はnavTip.style.leftにあるため、変更すること。アクティブのみ現在の画面scrollTopスプライトに基づいて決定すること。

改善します

希望スクロールバー、ナビゲーション、アウトライン画面に入る、それはなくなった後に有効にするには、唯一のinitいったん→を行うのではなく、アニメーションを再生することができます

改善する方法

画面のすべての領域にスクロールバーが、それがされる場合は、他の画面を再度初期化状態に設定され、スクロールバーがこれらの領域に再び画面を移動するときにのみ、それが完了状態に状態を初期化します。個人的に私は、これは少し面倒だと思うが、より良い方法のない考えはありません。

完成マップ

jupeiii

公開された35元の記事・ウォンの賞賛2 ・ビュー1366

プライベートの手紙の懸念

フロントの基礎 - 総合実際のケース

図PSカット

準備作業カットフィギュア

ツールの紹介

バージョンを選択

キャッシュパスを変更します

デフォルトの単位を変更します。

Photoshopのプリセット

一般的なツール

レイヤーパネルを使用して

補助による図補助切断線