多くの Web サイトでは、オプションを変更して画像をカスタマイズできます。
たとえば、このバービーの Web サイトでは、独自のバービー人形を作成できます。さまざまなヘアスタイルや服装をクリックすると、メインの画像が更新されます。
他の洋服のウェブサイトも同様のことをしています。
Java Script または Jquery でこれを行う方法を示すチュートリアルはありますか?
理想的には、さまざまな状況でコードを再利用できるテンプレートを探しています。
いくつかのチュートリアルを見つけましたが、それらはすべて PHP を使用しています: Bokehman - この Web サイトでは Javascript を使用していると書かれていますが、実際には PHP を使用しています。
Javascript は実際にはファイルの書き込みをサポートしていないので、画像を保存するには PHP ソリューションを使用する必要があります。ただし、イメージを作成するための何かを探しているだけです。この段階では、節約については気にしません。
これが私が最後にやった方法です。
1) アセットごとに個別の CSS クラスを作成します。
複数の変数で構成されるアセットのクラスを連結します。.input選択フォームの画像アセットを表示する親クラスを作成します。.preview完成したアバターに画像アセットを表示する子クラスを作成する
例えば
.skin-brown .preview .preview-body {
background-image(<<image-asset>>);
}
.input .input-skin-brown {
background-image(<<image-asset>>);
}
.input .input-hair-style-1 {
background-image(<<image-asset>>);
}
.hair-style-1.hair-colour-black .preview .preview-hair {
background-image(<<image-asset>>);
}
2) HTML を作成します。デフォルトのアセット オプションをラッパー要素に割り当てます。
例えば
<div id="wrapper" class="hair-style-1 hair-colour-black skin-brown">
<div class="inputs">
Put your input FORM here. Use a HTML form element.
</div>
<div class="preview">
The finished avatar goes here.
<div class="preview-hair"></div>
<div class="preview-eyes"></div>
<div class="preview-body"></div>
</div>
</div>
3) 入力フォームのオプションがクリックされたときに、Jquery を使用してラッパー上のクラスを操作します。
たとえば、ユーザーが hair-style-2 をクリックすると、ラッパーの hair-style-1 クラスが hair-style-2 に変更されます。
これについて別の質問があります: jQuery: クラスの位置に基づいてクラスをスワップします
本質的にはそれだけです。css クラスを作成し、Jquery コードを記述してクラスの動作を切り替えると、実際には非常に簡単です。すべての入力をフォームとして保存するため、ユーザーが送信をクリックしたときに値を別のプロセスに送信できます。
チップ：
1) SASS/SCSS を使用して css を記述します。 配列を作成し、それを sass でループできるため、css の維持が容易になります。ここで質問があります: Sass: Using two @each lists in SCSS CSS - SASS: Using @each based mixins to generate multiple backgrounds
2) CSS スプライトの使用を避ける。 スプライトは読み込み時間の短縮に大いに役立ちますが、スプライトを維持しようとすると夢中になると思います (関連するアセットによって異なります)。それを維持するためのツールがありますが、これは特殊なケースであるため、ツールがうまく機能するとは思いません。
3) ロード速度が問題
ユーザーがアバター要素をクリックすると、CSS のロード中に短い遅延が発生します。ユーザーはクリックが登録されていないと考えているため、これは問題です。これを回避するには、を使用する非表示の div を作成しますdisplay:none。次に、CSS3 の複数の背景プロパティを使用して、すべてのアセットをこの DIV に (背景として) 添付します。この方法では、すべてのアセットが最初に読み込まれるため、ユーザーがクリックしたときに遅延が発生することはありません。繰り返しますが、これには SASS ループと配列を使用します。配列はすべてのアセットを非表示の DIV に自動的に追加するためです。
4) クラスとアセットの名前は慎重に考えてください。 コードを理解しやすいと思ったので、最初はわかりやすい名前 (haircolourblack、hairstylebob など) を使用しました。ただし、後から考えると、番号付きの名前 (haircolour1、haircolor1) を使用しておけばよかったと思います。なぜなら、アセットが変更された場合に問題が発生する可能性があるからです (さらに、番号を使用すると、複数のアバターに対してコードを簡単に維持できます)。繰り返しますが、SASS アレイを使用して、これのメンテナンスを削減します。
5) クラス接頭辞を使用します
(例:.preview .preview-eyeの代わりに.preview .eyeまたは.preview .preview-hair-styleの代わりに.preview .hair )。この理由は、多くの名前が非常に一般的であり、おそらくページの複数の場所で使用されるためです (.preview セクションと .input セクションの両方)。プレフィックスを使用すると、特定のクラスをターゲットにするのが簡単になります。[class*="preview-"]さらに、 orを使用[class*="input-"] して、プレフィックスのすべてのメンバーをターゲットにすることができます。多くの共有クラスでコードを[class*="-hair-"]散らかす必要はありません (たとえば、各ヘア要素に個別のヘア クラスを適用する必要なく、すべてのヘア要素を取得します。
6) SVG を考慮する 画像アセットに SVG を使用する場合、ファイルを小さく保つことができ、任意のサイズに拡大できます。SVG ブラウザーの互換性に注意してください ( http://caniuse.com/svg )
7) CSS の背景サイズを考慮する を
使用background-size: containして画像アセットをスケーリングすることもできます。これにより、同じ画像を .preview インスタンスと .input インスタンスの両方で簡単に再利用できます。ただし、互換性の問題もあります。
主にそれを構築する方法に関するリソースがないため、それは困難なプロジェクトのように思えます. しかし、分解してみると、実はとても簡単です。問題になるのは主にコードのメンテナンスなので、必ず計画を立ててください。