Canvas의 Material Design 바람 버튼
Canvas로 Material Design풍 버튼(버튼을 누르면 반투명한 원이 펼쳐지는 애니메이션의 녀석)을 구현하고 있는 사람이 있었으므로, 소스를 사경+조금 만져 보았다.
Canvas의 Material Design 바람 버튼
표본 소스
이하, 해독한 소스의 정리.
HTML
<h1>Material Design Buttons</h1>
<section class="container">
<button class="btn color material-design" data-color="#004740">Button1</button>
<button class="btn btn-round color material-design" data-color="#ffffff">Button2</button>
<button class="btn btn-border color material-design" data-color="#004740">Button3</button>
<button class="btn btn-border btn-round color material-design" data-color="#00897b">Button4</button>
</section>
CSS
* {
box-sizing: border-box;
outline: none;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body {
font-family: 'Open Sans', sans-serif;
font-size: 100%;
font-weight: 300;
line-height: 1.5em;
text-align: center;
backgrorund: #FFF;
}
h1 {
color: #666666;
font-size: 2rem;
line-height: 1.5em;
margin:2em 0 2em 0;
}
$color: #00897b;
.btn {
border: none;
color: white;
overflow: hidden;
margin: 1rem;
padding: 0;
text-transform: uppercase;
width: 150px;
height: 40px;
&.color {
background-color: $color;
}
}
.btn-border {
&.color {
background-color: transparent;
border: 2px solid $color;
color: $color;
}
}
.btn-round {
border-radius: 10em;
}
.material-design {
position: relative;
canvas {
opacity: 0.25;
position: absolute;
top: 0;
left: 0;
}
}
.container {
display: flex; //Flexboxコンテナーを作る
flex-direction: row; //HTMLの書き順で、左から右に配置
flex-wrap: wrap; //折り返しを許可
justify-content: center; //水平方向:中央揃え
align-items: flex-start; //垂直方向の:上揃え
align-content: center; //行:中央揃え
margin: 0 auto;
max-width: 46rem;
}
글꼴
Google 웹 글꼴 사용 => Open Sans Light 300
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body {
font-family: 'Open Sans', sans-serif;
}
Flexbox
상하 중앙 배치와 반응형 조정에 편리한 사람.
(=평소 IE를 무시하고 쓸 수 있는 것이 그렇게 없기 때문에 매번 쓰는 법을 잊어버리는 녀석)
참고 : 지금이야말로 미래! CSS3의 Flexbox를 기본에서 이해하고, 쓰러뜨리자! | 주식회사 LIG
JS
var canvas = {},
centerX = 0, //押されたx座標位置
centerY = 0, //押されたy座標位置
color = '', //描画色
containers = document.getElementsByClassName('material-design'),
context = {},
element = {},
radius = 0,
//requestAnimationFrame()でアニメーションさせる
//未対応のブラウザにはsetTimeout()
requestAnimFrame = function () {
return (
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
);
} (),
init = function () {
containers = Array.prototype.slice.call(containers); //オブジェクトを配列に変換
for (var i = 0; i < containers.length; i += 1) {
canvas = document.createElement('canvas');
containers[i].appendChild(canvas);
canvas.addEventListener('click', press, false);
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
},
//押されたときの処理
press = function (event) {
color = event.toElement.parentElement.dataset.color; // data-colorの値を取得
element = event.toElement;
context = element.getContext('2d');
radius = 0; //円の大きさを初期値に
centerX = event.offsetX; //押されたx座標位置
centerY = event.offsetY; //押されたy座標位置
context.clearRect(0, 0, element.width, element.height); //矩形をクリア
draw();
},
//描画更新処理
draw = function () {
context.beginPath(); //描画開始
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); //正円の描画
context.fillStyle = color;
context.fill(); //パス図形を描画
radius += 8; //円の描画スピード
if (radius <= element.width) {
requestAnimFrame(draw); //矩形の幅を超えるまで円を描画
} else {
context.clearRect(0, 0, element.width, element.height);
}
};
init();
Reference
이 문제에 관하여(Canvas의 Material Design 바람 버튼), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/matsui-a/items/bb0dca64ac5564b5099d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<h1>Material Design Buttons</h1>
<section class="container">
<button class="btn color material-design" data-color="#004740">Button1</button>
<button class="btn btn-round color material-design" data-color="#ffffff">Button2</button>
<button class="btn btn-border color material-design" data-color="#004740">Button3</button>
<button class="btn btn-border btn-round color material-design" data-color="#00897b">Button4</button>
</section>
* {
box-sizing: border-box;
outline: none;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body {
font-family: 'Open Sans', sans-serif;
font-size: 100%;
font-weight: 300;
line-height: 1.5em;
text-align: center;
backgrorund: #FFF;
}
h1 {
color: #666666;
font-size: 2rem;
line-height: 1.5em;
margin:2em 0 2em 0;
}
$color: #00897b;
.btn {
border: none;
color: white;
overflow: hidden;
margin: 1rem;
padding: 0;
text-transform: uppercase;
width: 150px;
height: 40px;
&.color {
background-color: $color;
}
}
.btn-border {
&.color {
background-color: transparent;
border: 2px solid $color;
color: $color;
}
}
.btn-round {
border-radius: 10em;
}
.material-design {
position: relative;
canvas {
opacity: 0.25;
position: absolute;
top: 0;
left: 0;
}
}
.container {
display: flex; //Flexboxコンテナーを作る
flex-direction: row; //HTMLの書き順で、左から右に配置
flex-wrap: wrap; //折り返しを許可
justify-content: center; //水平方向:中央揃え
align-items: flex-start; //垂直方向の:上揃え
align-content: center; //行:中央揃え
margin: 0 auto;
max-width: 46rem;
}
글꼴
Google 웹 글꼴 사용 => Open Sans Light 300
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body {
font-family: 'Open Sans', sans-serif;
}
Flexbox
상하 중앙 배치와 반응형 조정에 편리한 사람.
(=평소 IE를 무시하고 쓸 수 있는 것이 그렇게 없기 때문에 매번 쓰는 법을 잊어버리는 녀석)
참고 : 지금이야말로 미래! CSS3의 Flexbox를 기본에서 이해하고, 쓰러뜨리자! | 주식회사 LIG
JS
var canvas = {},
centerX = 0, //押されたx座標位置
centerY = 0, //押されたy座標位置
color = '', //描画色
containers = document.getElementsByClassName('material-design'),
context = {},
element = {},
radius = 0,
//requestAnimationFrame()でアニメーションさせる
//未対応のブラウザにはsetTimeout()
requestAnimFrame = function () {
return (
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
);
} (),
init = function () {
containers = Array.prototype.slice.call(containers); //オブジェクトを配列に変換
for (var i = 0; i < containers.length; i += 1) {
canvas = document.createElement('canvas');
containers[i].appendChild(canvas);
canvas.addEventListener('click', press, false);
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
},
//押されたときの処理
press = function (event) {
color = event.toElement.parentElement.dataset.color; // data-colorの値を取得
element = event.toElement;
context = element.getContext('2d');
radius = 0; //円の大きさを初期値に
centerX = event.offsetX; //押されたx座標位置
centerY = event.offsetY; //押されたy座標位置
context.clearRect(0, 0, element.width, element.height); //矩形をクリア
draw();
},
//描画更新処理
draw = function () {
context.beginPath(); //描画開始
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); //正円の描画
context.fillStyle = color;
context.fill(); //パス図形を描画
radius += 8; //円の描画スピード
if (radius <= element.width) {
requestAnimFrame(draw); //矩形の幅を超えるまで円を描画
} else {
context.clearRect(0, 0, element.width, element.height);
}
};
init();
Reference
이 문제에 관하여(Canvas의 Material Design 바람 버튼), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/matsui-a/items/bb0dca64ac5564b5099d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
var canvas = {},
centerX = 0, //押されたx座標位置
centerY = 0, //押されたy座標位置
color = '', //描画色
containers = document.getElementsByClassName('material-design'),
context = {},
element = {},
radius = 0,
//requestAnimationFrame()でアニメーションさせる
//未対応のブラウザにはsetTimeout()
requestAnimFrame = function () {
return (
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
);
} (),
init = function () {
containers = Array.prototype.slice.call(containers); //オブジェクトを配列に変換
for (var i = 0; i < containers.length; i += 1) {
canvas = document.createElement('canvas');
containers[i].appendChild(canvas);
canvas.addEventListener('click', press, false);
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
},
//押されたときの処理
press = function (event) {
color = event.toElement.parentElement.dataset.color; // data-colorの値を取得
element = event.toElement;
context = element.getContext('2d');
radius = 0; //円の大きさを初期値に
centerX = event.offsetX; //押されたx座標位置
centerY = event.offsetY; //押されたy座標位置
context.clearRect(0, 0, element.width, element.height); //矩形をクリア
draw();
},
//描画更新処理
draw = function () {
context.beginPath(); //描画開始
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); //正円の描画
context.fillStyle = color;
context.fill(); //パス図形を描画
radius += 8; //円の描画スピード
if (radius <= element.width) {
requestAnimFrame(draw); //矩形の幅を超えるまで円を描画
} else {
context.clearRect(0, 0, element.width, element.height);
}
};
init();
Reference
이 문제에 관하여(Canvas의 Material Design 바람 버튼), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/matsui-a/items/bb0dca64ac5564b5099d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)