CSS 및 JavaScript로 제작된 대화형 기어 모양 개체입니다.
29682 단어 cssjavascript
A gear or cogwheel is a rotating machine part having cut teeth or, in the case of a cogwheel, inserted teeth (called cogs), which mesh with another toothed part to transmit torque.
본고에서 나는 어떻게 상호작용식 톱니바퀴 모양의 대상을 구축하는지 보여줄 것이다.
이 생각을 잡기 위해 톱니바퀴를 순환적으로 놓인 톱니바퀴로 봅시다.
모든 치아는 형상과 높이와 같은 특징을 가지고 있다.
상술한 데이터를 고려하여 우리는 이러한 대상을 구축할 것이다.
HTML
배치의 정적 부분은 매우 간단하다.우리는 우리가 대상을 설정하고 채울 용기만 정의할 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Gear</title>
</head>
<body>
<div id="container"></div>
</body>
</html>
동적 부품에는 다음과 같은 이빨이 포함됩니다.
<div
class="tooth"
style="height: 5vmin; width: 14.5vmin; transform: rotateZ(315deg) translateX(15vmin);"
></div>
그리고 중앙 부분의 뚜껑:
<div class="cover"></div>
Part of teeth parameters is calculated by JavaScript, while the rest of the settings are defined by CSS.
CSS
우선, 우리는 하나의 위치에서 데이터를 변경함으로써 대상을 조정할 수 있도록 기본 설정을 정의할 것이다.
:root {
--smokey: #f5f5f5;
--darky: #262625;
--thickness: 0.1vmin;
--half: 50%;
--border: var(--thickness) solid var(--smokey);
--border-radius: var(--half);
}
용기
용기는 톱니바퀴를 포함할 뿐만 아니라 톱니바퀴 주체의 바깥쪽 가장자리도 충당한다.
#container {
position: relative;
display: flex;
border: var(--border);
justify-content: center;
align-items: center;
border-radius: var(--border-radius);
}
용기의 원형을 형성하기 위해서 우리는 경계 반경을 50%로 설정한다.그 밖에 우리는 국경 규칙을 응용할 것이다.
가리다
커버는 단일 기어 아웃라인을 생성하는 데 도움을 줍니다.이 생각을 이해하기 위해서 우리는 층층이 구조를 살펴보자.
1층은 테두리가 있는 용기다.
다음 층에는 치아 그룹이 포함되어 있다.각 이빨의 안쪽 부분은 용기 안에 놓여 있다.따라서 하나의 대강을 만듭니다.
마지막 층에는 치아의 내부를 숨기는 덮어쓰기 요소가 포함되어 있다.
따라서 객체를 해당 레이어에 배치하고 정확한 배경색을 설정하여 불필요한 부분을 숨기고 단일 아웃라인을 생성할 수 있습니다.
톱니바퀴는 매개 변수가 변경된 후에 다시 재건되기 때문에, 특히 커버 컴포넌트는 적당한 z 인덱스 값을 설정해야 한다.
다음과 같이 요약해 보겠습니다.
#container .cover {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: var(--darky);
border-radius: var(--border-radius);
z-index: 1;
}
기어가 축에 설치되어야 한다고 가정하십시오.
이어서 우리는 착륙 구멍을 추가할 것이다.
레이아웃이 간단하도록 cover 요소 앞에 위조 요소를 사용합니다.
#container .cover::before {
width: var(--half);
height: var(--half);
border-radius: var(--border-radius);
content: "";
border: var(--border);
}
To center our landing hole we use the flex properties of the cover element.
이빨
우리 형상의 마지막이지만 가장 중요하지 않은 원소는 치아가 아니다.
대부분의 설정은 JavaScript 섹션에서 발생하지만 여전히 일부 CSS 규칙이 있습니다.
우선, 치원소는 절대적인 위치를 가지고 있다.그 다음으로 우리는 프레임 크기 CSS 규칙을 이용하여 레이아웃을 파괴하지 않습니다.
#container .tooth {
position: absolute;
box-sizing: border-box;
}
재미를 위해 나는 정사각형, 원형, 삼각형 세 가지 치아 모양을 추가했다.
모든 형상은 before 위조 원소를 통해 구축된다.
광장.
이것은 기본 형식이기 때문에 단독 클래스 이름이 없습니다.
이것은 테두리가 있는 정사각형으로 절대적인 위치를 가진다.
#container .tooth::before {
position: absolute;
width: 100%;
height: 100%;
border: var(--border);
content: "";
background: var(--darky);
}
동그라미
원의 경우 경계 반지름 기술을 적용합니다.
#container .tooth.circle::before {
border-radius: var(--border-radius);
}
삼각형
정사각형을 삼각형으로 만들려면 45도 회전하기만 하면 됩니다.
#container .tooth.triangle::before {
transform: rotateZ(45deg);
}
JavaScript
핵심 변수 글로벌 저장소.컨테이너의 DOM 참조, 기어의 반지름, 치수, 기어의 높이 및 모양, 프로파일 두께 및 기어 회전 각도와 같은 개체의 모든 매개변수를 정의합니다.
API는 함수 세트로 구성됩니다.그 중 일부는 매우 기본적인 것으로 사용자의 입력을 처리하기 위한 것이다: setteth, setHeight, setShape와 setAngle.다음은 이러한 함수의 예입니다.
/**
* set modifier for tooth height
* @param {number} value tooth height modifier
*/
function setHeight(value) {
height = value;
update();
}
특히 setThickness 함수는 CSS 변수의 값-두께:
/**
* set thickness
* @param {number} value thickness value
*/
function setThickness(value) {
document.documentElement.style.setProperty(
"--thickness",
`${value / 10}vmin`
);
}
장비를 구축하는 중재 기능은 명칭 업데이트가 있습니다.
우리는 그것을 몇 단계로 나누어 무슨 일이 일어났는지 이해할 것이다.
조작하기 전에 우리는 기본 설정을 계산할 것이다.
우선, 우리는 용기의 사이즈를 알아야 한다.이어서 우리는 치아의 기본 파라미터의 값을 찾아낼 것이다.
// calculate the container dimensions
const size = `${radius * 3}vmin`;
// calculate the angle between teeth
const step = 360 / teeth;
// calculate the base dimension of the tooth
const side = (2 * Math.PI * radius) / (teeth * (Math.PI / 2));
// calculate the tooth displacement
const displacement = radius * 1.5;
// calculate the height multiplier
const multiplier = (height - 1) / 10;
다음은 용기를 설정하는 것입니다.
// setup container
container.style.width = size;
container.style.height = size;
container.style.margin = `${radius * 2}vmin`;
container.style.transform = `rotate(${angle}deg)`;
container.innerHTML = null;
이제 이빨을 그려봅시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Gear</title>
</head>
<body>
<div id="container"></div>
</body>
</html>
<div
class="tooth"
style="height: 5vmin; width: 14.5vmin; transform: rotateZ(315deg) translateX(15vmin);"
></div>
<div class="cover"></div>
Part of teeth parameters is calculated by JavaScript, while the rest of the settings are defined by CSS.
우선, 우리는 하나의 위치에서 데이터를 변경함으로써 대상을 조정할 수 있도록 기본 설정을 정의할 것이다.
:root {
--smokey: #f5f5f5;
--darky: #262625;
--thickness: 0.1vmin;
--half: 50%;
--border: var(--thickness) solid var(--smokey);
--border-radius: var(--half);
}
용기
용기는 톱니바퀴를 포함할 뿐만 아니라 톱니바퀴 주체의 바깥쪽 가장자리도 충당한다.
#container {
position: relative;
display: flex;
border: var(--border);
justify-content: center;
align-items: center;
border-radius: var(--border-radius);
}
가리다
커버는 단일 기어 아웃라인을 생성하는 데 도움을 줍니다.이 생각을 이해하기 위해서 우리는 층층이 구조를 살펴보자.
1층은 테두리가 있는 용기다.
다음 층에는 치아 그룹이 포함되어 있다.각 이빨의 안쪽 부분은 용기 안에 놓여 있다.따라서 하나의 대강을 만듭니다.
마지막 층에는 치아의 내부를 숨기는 덮어쓰기 요소가 포함되어 있다.
따라서 객체를 해당 레이어에 배치하고 정확한 배경색을 설정하여 불필요한 부분을 숨기고 단일 아웃라인을 생성할 수 있습니다.
톱니바퀴는 매개 변수가 변경된 후에 다시 재건되기 때문에, 특히 커버 컴포넌트는 적당한 z 인덱스 값을 설정해야 한다.
다음과 같이 요약해 보겠습니다.
#container .cover {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: var(--darky);
border-radius: var(--border-radius);
z-index: 1;
}
이어서 우리는 착륙 구멍을 추가할 것이다.
레이아웃이 간단하도록 cover 요소 앞에 위조 요소를 사용합니다.
#container .cover::before {
width: var(--half);
height: var(--half);
border-radius: var(--border-radius);
content: "";
border: var(--border);
}
To center our landing hole we use the flex properties of the cover element.
이빨
우리 형상의 마지막이지만 가장 중요하지 않은 원소는 치아가 아니다.
대부분의 설정은 JavaScript 섹션에서 발생하지만 여전히 일부 CSS 규칙이 있습니다.
우선, 치원소는 절대적인 위치를 가지고 있다.그 다음으로 우리는 프레임 크기 CSS 규칙을 이용하여 레이아웃을 파괴하지 않습니다.
#container .tooth {
position: absolute;
box-sizing: border-box;
}
모든 형상은 before 위조 원소를 통해 구축된다.
광장.
이것은 기본 형식이기 때문에 단독 클래스 이름이 없습니다.
이것은 테두리가 있는 정사각형으로 절대적인 위치를 가진다.
#container .tooth::before {
position: absolute;
width: 100%;
height: 100%;
border: var(--border);
content: "";
background: var(--darky);
}
동그라미
원의 경우 경계 반지름 기술을 적용합니다.
#container .tooth.circle::before {
border-radius: var(--border-radius);
}
삼각형
정사각형을 삼각형으로 만들려면 45도 회전하기만 하면 됩니다.
#container .tooth.triangle::before {
transform: rotateZ(45deg);
}
JavaScript
핵심 변수 글로벌 저장소.컨테이너의 DOM 참조, 기어의 반지름, 치수, 기어의 높이 및 모양, 프로파일 두께 및 기어 회전 각도와 같은 개체의 모든 매개변수를 정의합니다.
API는 함수 세트로 구성됩니다.그 중 일부는 매우 기본적인 것으로 사용자의 입력을 처리하기 위한 것이다: setteth, setHeight, setShape와 setAngle.다음은 이러한 함수의 예입니다.
/**
* set modifier for tooth height
* @param {number} value tooth height modifier
*/
function setHeight(value) {
height = value;
update();
}
특히 setThickness 함수는 CSS 변수의 값-두께:
/**
* set thickness
* @param {number} value thickness value
*/
function setThickness(value) {
document.documentElement.style.setProperty(
"--thickness",
`${value / 10}vmin`
);
}
장비를 구축하는 중재 기능은 명칭 업데이트가 있습니다.
우리는 그것을 몇 단계로 나누어 무슨 일이 일어났는지 이해할 것이다.
조작하기 전에 우리는 기본 설정을 계산할 것이다.
우선, 우리는 용기의 사이즈를 알아야 한다.이어서 우리는 치아의 기본 파라미터의 값을 찾아낼 것이다.
// calculate the container dimensions
const size = `${radius * 3}vmin`;
// calculate the angle between teeth
const step = 360 / teeth;
// calculate the base dimension of the tooth
const side = (2 * Math.PI * radius) / (teeth * (Math.PI / 2));
// calculate the tooth displacement
const displacement = radius * 1.5;
// calculate the height multiplier
const multiplier = (height - 1) / 10;
다음은 용기를 설정하는 것입니다.
// setup container
container.style.width = size;
container.style.height = size;
container.style.margin = `${radius * 2}vmin`;
container.style.transform = `rotate(${angle}deg)`;
container.innerHTML = null;
이제 이빨을 그려봅시다.
/**
* set modifier for tooth height
* @param {number} value tooth height modifier
*/
function setHeight(value) {
height = value;
update();
}
/**
* set thickness
* @param {number} value thickness value
*/
function setThickness(value) {
document.documentElement.style.setProperty(
"--thickness",
`${value / 10}vmin`
);
}
// calculate the container dimensions
const size = `${radius * 3}vmin`;
// calculate the angle between teeth
const step = 360 / teeth;
// calculate the base dimension of the tooth
const side = (2 * Math.PI * radius) / (teeth * (Math.PI / 2));
// calculate the tooth displacement
const displacement = radius * 1.5;
// calculate the height multiplier
const multiplier = (height - 1) / 10;
// setup container
container.style.width = size;
container.style.height = size;
container.style.margin = `${radius * 2}vmin`;
container.style.transform = `rotate(${angle}deg)`;
container.innerHTML = null;
// create tooth
const tooth = document.createElement("div");
tooth.className = `tooth ${shape}`;
// set size for the triangle-shaped tooth
if (shape === "triangle") {
const length = `${(side / 2) * multiplier}vmin`;
tooth.style.height = length;
tooth.style.width = length;
} else {
// set size for the square and circle-shaped teeth
tooth.style.height = `${side}vmin`;
tooth.style.width = `${side * multiplier}vmin`;
}
// place the tooth
tooth.style.transform = `rotateZ(${i *
step}deg) translateX(${displacement}vmin)`;
// append tooth to the container
container.appendChild(tooth);
마지막으로 표지 요소를 추가합니다.
// restore cover
const cover = document.createElement("div");
cover.className = "cover";
container.appendChild(cover);
/**
* update the gear
*/
function update() {
if (container) {
// calculate the container dimensions
const size = `${radius * 3}vmin`;
// calculate the angle between teeth
const step = 360 / teeth;
// calculate the base dimension of the tooth
const side = (2 * Math.PI * radius) / (teeth * (Math.PI / 2));
// calculate the tooth displacement
const displacement = radius * 1.5;
// calculate the height multiplier
const multiplier = (height - 1) / 10;
// setup container
container.style.width = size;
container.style.height = size;
container.style.margin = `${radius * 2}vmin`;
container.style.transform = `rotate(${angle}deg)`;
container.innerHTML = null;
// draw teeth
for (var i = 0; i < teeth; i++) {
// create tooth
const tooth = document.createElement("div");
tooth.className = `tooth ${shape}`;
// set size for the triangle-shaped tooth
if (shape === "triangle") {
const length = `${(side / 2) * multiplier}vmin`;
tooth.style.height = length;
tooth.style.width = length;
} else {
// set size for the square and circle-shaped teeth
tooth.style.height = `${side}vmin`;
tooth.style.width = `${side * multiplier}vmin`;
}
// place the tooth
tooth.style.transform = `rotateZ(${i *
step}deg) translateX(${displacement}vmin)`;
// append tooth to the container
container.appendChild(tooth);
}
// restore cover
const cover = document.createElement("div");
cover.className = "cover";
container.appendChild(cover);
}
}
코드 펜
결론
이제 너는 톱니바퀴 모양의 물체를 어떻게 만드는지 알게 되었다.
본고의 컨트롤은 소개하지 않았지만 API를 사용하여 치수, 대상의 회전 각도, 치수의 높이 설정, 치수의 세 가지 모양 중에서 선택하고 윤곽의 두께를 설정할 수 있습니다.
Reference
이 문제에 관하여(CSS 및 JavaScript로 제작된 대화형 기어 모양 개체입니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/peacefullatom/the-interactive-gear-shaped-object-made-with-css-and-javascript-2n8f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이제 너는 톱니바퀴 모양의 물체를 어떻게 만드는지 알게 되었다.
본고의 컨트롤은 소개하지 않았지만 API를 사용하여 치수, 대상의 회전 각도, 치수의 높이 설정, 치수의 세 가지 모양 중에서 선택하고 윤곽의 두께를 설정할 수 있습니다.
Reference
이 문제에 관하여(CSS 및 JavaScript로 제작된 대화형 기어 모양 개체입니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/peacefullatom/the-interactive-gear-shaped-object-made-with-css-and-javascript-2n8f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
