핸드폰을 사용하면 간단한 알림메시지를 볼 수 있습니다.
이러한 기능을 Toast라고 불리는데(아이폰은 토스트라 불리우지 않을 수도 있습니다..ㅎ) 웹에서 간단하게 구현하기 위해 만들어 보았습니다.
구동모습은 아래와 같습니다.
flex 속성을 부여하였기 때문에 브라우저 크기에 맞추어서 알아서 가운데로 이동하여 줍니다.
물..론 익스플로러 사용자라면 동작을 안할 수도 있습니다..ㅠ
위 내용에 사용된 소스코드 입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
</style>
<body>
<div id="toast">
</div>
</body>
</html>
<script>
function toast (_id, message, option){
let mother = document.getElementById(_id);
if(mother.children.length && mother.children.length > 0) mother.removeChild(mother.firstChild); //초기화
let doc = document.createElement('div');
mother.appendChild(doc);
doc.innerText = message;
//부모노드 입니다.
let motherStyle = {display: 'flex',position: 'fixed',bottom: '1rem','justify-content': 'center', width: '100%', 'z-index':99999999, 'left':0,'text-align':'center'};
for(key in motherStyle) { //부모테그에 스타일을 적용 합니다.
mother.style[key] = motherStyle[key];
}
//자식노드 입니다.
let style = {opacity : 0, background : 'white', color : '#595959', padding : '1rem 3.5rem 1rem 3.5rem', 'border-radius':'1rem', 'width' : 'auto'};
if(option) style = {...style, option};
//자식노드에 스타일 적용 합니다.
for(key in style) {
doc.style[key] = style[key];
}
let max = false; //동작 완료여부 판별 변수 입니다.
let inter = setInterval(() => { //이벤트
let number = parseFloat(doc.style.opacity)+0.02;
if(max) number = parseFloat(doc.style.opacity)-0.02;
if(number >= 1){
setTimeout(() => {
max = true;
setTimeout(() => {
mother.style.display = 'none'; //none처리를 통해서 다른 영역이 선택가능하게 합니다.
clearInterval(inter); //이벤트 끝!
}, 3000);
}, 500);
}
doc.style.opacity = number;
}, 10)
}
toast('toast', `방문해 주셔서 감사합니다.
오늘도 즐겁고 행복한 하루 보내세요!`, {})
</script>
딱히 어려운 코드는 아니므로 기능을 수정하시는 데 어렵지는 않을 것 같습니다.
굳이 부모 노드에서 자식 노드를 다시 생성하지 않아도 되는데..
브라우저의 돔 접근을 최소화 하기 위해서는 조금 고민할 필요는 있겠습니다.
궁금한점이나 문의사항은 언제든지 연락주세요! 👻
반응형
'Javascript' 카테고리의 다른 글
| Jquery ajax 뒤로가기 (ajax 브라우저 뒤로가기) (0) | 2022.07.28 |
|---|---|
| 새로운 자바스크립트(타입스크립트) 런타임 환경, 디노(Deno) (0) | 2022.05.16 |
| 'import' is only available in ES6 (use 'esversion: 6'). (W119) (0) | 2022.03.16 |
| 브라우저 개발도구 이벤트 감지(javascript detect development tool working) (0) | 2022.02.24 |
| Javascript 비밀번호 정규식 검증하기 (0) | 2021.12.06 |
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)
댓글