Day 11 | Demo Animation

Sử dụng HTML , CSS, JS  thiết kế chức năng mượt mà với Animation

				
					<body>
		<div class="control">
			<button class="success">Show Success</button>
			<button class="warning">Show Warning</button>
			<button class="error">Show Error</button>
		</div>
		<div id="toasts"></div>
		<script src="app.js"></script>
	</body>
				
			
				
					@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

body {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ecf0f1;
}

button {
	padding: 8px 16px;
	font-size: 18px;
	border-radius: 4px;
	border: none;
	outline: none;
	color: white;
	cursor: pointer;
	margin: 0 10px;
}

button.success {
	background-color: rgb(0, 128, 0);
}
button.warning {
	background-color: rgb(255, 165, 0);
}
button.error {
	background-color: rgb(255, 0, 0);
}

#toasts {
	position: fixed;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
}

.toast {
	padding: 20px;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 10px;
	animation: show_slide 1s ease forwards;
	display: flex;
	align-items: center;
	border-left: 6px solid;
}

.toast.success {
	background-color: rgba(0, 128, 0, 0.4);
	border-color: rgb(0, 128, 0);
}

.toast.warning {
	background: rgba(255, 165, 0, 0.4);
	border-color: rgb(255, 165, 0);
}

.toast.error {
	background-color: rgba(255, 0, 0, 0.4);
	border-color: rgb(255, 0, 0);
}

.toast i {
	font-size: 28px;
	color: white;
}

.toast .msg {
	padding: 0 20px;
	font-size: 16px;
	color: white;
}

.countdown {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	z-index: 1;
	animation: countdown 4s linear forwards;
}

.toast.success .countdown {
	background-color: rgb(0, 128, 0);
}

.toast.warning .countdown {
	background-color: rgb(255, 165, 0);
}

.toast.error .countdown {
	background-color: rgb(255, 0, 0);
}

@keyframes countdown {
	20% {
		width: 100%;
	}
	100% {
		width: 0;
	}
}

@keyframes show_slide {
	0% {
		transform: translateX(100%);
	}
	40% {
		transform: translateX(-10%);
	}
	80% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-10px);
	}
}

@keyframes hide_slide {
	0% {
		transform: translateX(-10px);
	}
	40% {
		transform: translateX(0%);
	}
	80% {
		transform: translateX(-10%);
	}
	100% {
		transform: translateX(120%);
	}
}

				
			
				
					const buttonShows = document.querySelectorAll('.control button')
buttonShows.forEach((btn) => {
	btn.addEventListener('click', (e) => {
		createToast(e.target.getAttribute('class'))
	})
})

const toasts = {
	success: {
		icon: '<i class="fas fa-check-circle"></i>',
		msg: 'This is a success message !',
	},
	error: {
		icon: '<i class="fas fa-exclamation-triangle"></i>',
		msg: 'This is a error message !',
	},
	warning: {
		icon: '<i class="fas fa-exclamation-circle"></i>',
		msg: 'This is a warning message !',
	},
}

function createToast(status) {
	let toast = document.createElement('div')
	toast.className = `toast ${status}`

	toast.innerHTML = `
    ${toasts[status].icon}
    <span class="msg">${toasts[status].msg}</span>
    <span class="countdown"></span>
    `
	document.querySelector('#toasts').appendChild(toast)

	setTimeout(() => {
		toast.style.animation = 'hide_slide 1s ease forwards'
	}, 4000)
	setTimeout(() => {
		toast.remove()
	}, 6000)
}

				
			
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :

HTML : HTML căn bản cho người mới bắt đầu

CSS : CSS căn bản cho người mới bắt đầu

JS: Javascript cho người mới bắt đầu 

 
 
 

Leave a Reply

Your email address will not be published. Required fields are marked *