HOME  >   HTML5 CANVAS  >   HTML5 how to Design House Decoration Tools
HTML5 how to Design House Decoration Tools
BY Todd7 Dec,2020
Tags:

This is a house decoration tool based on HTML5 and CSS3. The tool provides different materials and colors for each part of the house. Click the corresponding material to switch the material of the corresponding part to the selected one. This tool is similar to the character image changing tool, which can change the clothes of each part of the character. In addition, the knowledge point of this tool is to use CSS3 to achieve 3D animation effects. When you move the mouse, you can see all sides of the house.

Advertisement

HTML5 how to Design House Decoration Tools
HTML Body Code
<div class="thamb-wrapper">
	<div class="fronton-controll controll">
		<h2>Fronton color</h2>
		<div style="background-color: #C86526" class="thamb t-fronton"></div>
		<div style="background-color: #4E6457" class="thamb t-fronton"></div>
		<div style="background-color: #DFB46F" class="thamb t-fronton"></div>
		<div style="background-color: #CCCCCC" class="thamb t-fronton"></div>
		<div style="background-color: #6F4431" class="thamb t-fronton"></div>
		<div style="background-color: #A26B70" class="thamb t-fronton"></div>
		<div style="background-color: #813515" class="thamb t-fronton"></div>
		<div style="background-color: #9e8f70" class="thamb t-fronton"></div>
		<div style="background-color: #2d5b45" class="thamb t-fronton"></div>
		
	</div>
	<div class="roof-controll controll">
		<h2 class="roof">Roof Options</h2>
		<div style="background-image: url(http://fdsea.ru/img/roof_1.jpg)" class="thamb t-roof"></div>
		<div style="background-image: url(http://fdsea.ru/img/roof_2.jpg)" class="thamb t-roof"></div>
		<div style="background-image: url(http://fdsea.ru/img/roof_3.jpg)" class="thamb t-roof"></div>
		<div style="background-image: url(http://fdsea.ru/img/roof_4.jpg)" class="thamb t-roof"></div>
		<div style="background-image: url(http://fdsea.ru/img/roof_5.jpg)" class="thamb t-roof"></div>
		<div style="background-image: url(http://fdsea.ru/img/roof_6.jpg)" class="thamb t-roof"></div>
		<div style="background-image: url(http://fdsea.ru/img/roof_7.jpg)" class="thamb t-roof"></div>
	</div>
	<div class="wall-controll controll">
		<h2 class="roof">Wall Options</h2>
		<div style="background-image: url(http://fdsea.ru//img/brick.jpg);" class="thamb t-wall"></div>
		<div style="background-image: url(http://fdsea.ru//img/brick_1.jpg);" class="thamb t-wall"></div>
		<div style="background-image: url(http://fdsea.ru//img/brick_2.jpg)" class="thamb t-wall"></div>
		<div style="background-image: url(http://fdsea.ru//img/brick_3.jpg)" class="thamb t-wall"></div>
		<div style="background-image: url(http://fdsea.ru//img/log_1.jpg)" class="thamb t-wall"></div>
		<div style="background-image: url(http://fdsea.ru//img/log_2.jpg)" class="thamb t-wall"></div>
		<div style="background-image: url(http://fdsea.ru//img/log_3.jpg)" class="thamb t-wall"></div>
		<div style="background-image: url(http://fdsea.ru//img/log_4.jpg)" class="thamb t-wall"></div>
	</div>
</div>                        
Css Code
body {
  perspective: 1600px;
  position: relative;
  font-family: "Raleway", sans-serif;
  background-color: #dcedc8;
}

h1 {
  position: fixed;
  transform: rotate(-90deg);
  top: 400px;
  left: -130px;
  font-size: 1.3em;
}

.block {
  width: 200px;
  height: 200px;
  border: 1px solid #f2e8c9;
  background-repeat: repeat;
  transform-origin: 50% 50%;
  position: absolute;
  top: 5%;
  left: 35%;
  font-size: 3em;
  transform-style: preserve-3d;
}
.block .side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.block .block__front {
  text-align: center;
  line-height: 200px;
  background-color: #DFB46F;
  z-index: 1;
  background-size: 100%;
  background-image: url(http://fdsea.ru/img/roof_7.jpg);
}                        
Js Code
var wrapper = document.querySelector('.thamb-wrapper'),
    roof = document.querySelectorAll('.block__front'),
    wall = document.querySelectorAll('.wall'),
    home = document.querySelector('.home'),
    houseWrapper = document.querySelector('.home-wrapper'),
    fronton = document.querySelector('.fronton'),
    coord = void 0;

function setPattern(plates, targetBackground) {
	Array.from(plates).forEach(function (v) {
		return v.style.backgroundImage = targetBackground.style.backgroundImage;
	});
}

wrapper.addEventListener('click', function (e) {
	var targSt = e.target;
	if (targSt.classList.contains('t-roof')) {
		setPattern(roof, targSt);
	} else if (targSt.classList.contains('t-wall')) {
		setPattern(wall, targSt);
	} else if (targSt.classList.contains('t-fronton')) {
		fronton.style.borderBottomColor = targSt.style.backgroundColor;
	}
}, false);

houseWrapper.addEventListener('mousemove', function (e) {
	coord = { x: e.offsetX, y: e.offsetY };
	home.style.transform = 'rotateY(' + coord.x / 5 + 'deg) rotateX(' + -coord.y / 20 + 'deg) translate(-50%, -50%)';
});                        

Advertisement