이것이 결국 내가 한 것입니다.
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를 사용합니다. jQuery: Swap Classes based on Class position
: 사용자가 헤어 스타일 2를 클릭하면
는, 래퍼의 헤어 스타일-1 클래스는 이것에 대해 별도의 질문이 헤어 스타일이
로 변경됩니다 예를 들어,
그게 전부입니다. 작성된 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가로드되는 동안 약간의 지연이 있습니다. 사용자가 자신의 클릭이 등록되지 않았다고 생각할 때 이것은 문제입니다. 이 문제를 해결하려면 display:none을 사용하는 숨겨진 div를 만듭니다. 그런 다음 CSS3 다중 배경 특성을 사용하여 모든 자산을이 DIV에 (배경으로) 첨부하십시오. 이렇게하면 모든 자산이 처음에로드되므로 사용자가 클릭 할 때 지연이 발생하지 않습니다. 어레이가 숨겨진 DIV에 모든 자산을 자동으로 추가하기 때문에 SASS 루프와 어레이를 다시 사용하십시오.
4) 클래스 및 자산 이름에 대해 매우 신중하게 생각하십시오. 처음에는 코드를 이해하기 쉬울 것이라고 생각하면서 원래 친숙한 이름 (예 : haircolourblack, hairstylebob)을 사용했습니다. 그러나 추후에 자산이 변경되면 상황이 까다로워 질 수 있으므로 번호가 매겨진 이름 (haircolour1, hairstyle1)으로 갔으면합니다. (숫자를 사용하면 여러 아바타에 대한 코드를 쉽게 유지 관리 할 수 있습니다). 다시 SASS 배열을 사용하여이 유지 관리 작업을 줄입니다.
5)를 사용하여 클래스 (예를 들어, .preview .preview-eye 대신 .preview .eye 또는 .preview .preview-hair-style 대신 .preview .hair의) 접두사. 그 이유는 많은 이름이 매우 일반적이어서 페이지의 여러 위치 (예 : .preview 및 .input 섹션 모두)에 사용되기 때문입니다. 접두어를 사용하면 특정 클래스를 대상으로 지정하는 것이 더 쉽습니다. 게다가 당신은 쓰레기로 공유 클래스의 많은 (예 : [class*="-hair-"] 모발 요소에 적용되는 별도의 헤어 클래스를 필요로하지 않고 모든 머리 요소를 얻을 것이다.
와 코드를하지 않고, 접두사의 모든 구성원을 대상으로 [class*="preview-"] 또는 [class*="input-"]을 사용할 수 있습니다 6) SVG 고려 이미지 애셋에 SVG를 사용하는 경우 파일을 작게 유지하면 모든 크기로 확장됩니다. SVG 브라우저 호환성을주의해야합니다 고려 (http://caniuse.com/svg)
7) .preview 및 .input 모두 동일한 이미지를 재사용하기 쉽게 만들 수 있습니다 또한 이미지 자산을 확장 할 수 background-size: contain을 사용할 수 있습니다 CSS 배경 크기, 인스턴스. 그러나 호환성 문제도 있습니다.
빌드하는 방법에 대한 리소스가 없기 때문에 이것은 대단한 프로젝트처럼 보입니다. 그러나 당신이 그것을 무너 뜨리는다면, 실제로는 꽤 쉽습니다. 주로 코드 유지 관리가 문제이므로 계획을 세워야합니다!
내가 여기에 도달했습니다.이것은 내가 원하는 것이지만, 불행히도 대답이 없습니다. 모든 전문가들은 제발 .... – zamil
@zamil, 죄송합니다. 나는 대답을 게시했다 (나는 옛날에 그것을 타이핑 한 것을 기억한다). 나는 그것을 곧 게시 할 것이다. –
@zamil 아래에 게시했습니다. 의견에 질문을 게시하십시오. –