[Tin tức] BÀI 05. DÀN TRANG VỚI ELEMENTOR

✨ Còn nhiều video tuyệt chiêu thiết kế web với Elementor tại . Xem ngay !!!

✨ Anh em có nhu cầu dùng Plugin Elementor và bộ JetPlugin (Crocoblock) có KEY CHÍNH HÃNG thì liên hệ mình nha, giá thân thương.

☘️ Tham gia Group Elementor – WordPress [ Hỏi-Đáp ] để cùng thảo luận các chủ đề về website nhé :

——————————-
⚡ Mic ghi âm của mình bị trục trặc, nên clip này âm thanh hơi nhỏ, các bạn chịu khó đeo tai phone để nghe nhé !

⚡code icon chuột scroll
HTML: (phần mô tả này youtube ko cho viết có đấu ngoặc nhọn, mình xóa dấu ngoặc nhọn ở mấy thẻ div , anh em chịu khó viết lại như trong hình , ở video , ngắn mà phải ko )

div class=”scroll-downs”
div class=”mousey”
div class=”scroller” /div
/div
/div

———-
CSS:

.scroll-downs {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

width :34px;
height: 55px;
}
.mousey {
width: 3px;
padding: 10px 15px;
height: 35px;
border: 2px solid #fff;
border-radius: 25px;
opacity: 0.75;
box-sizing: content-box;
}
.scroller {
width: 3px;
height: 10px;
border-radius: 25%;
background-color: #fff;
animation-name: scroll;
animation-duration: 2.2s;
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
animation-iteration-count: infinite;
}
@keyframes scroll {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(15px); opacity: 0;}
}
transform: scale(1) translateY(-20px);
}
30% {
opacity: 1;
transform: scale(1) translateY(-20px);
}
36% {
opacity: 1;
transform: scale(0.9) translateY(5px);
}
44% {
opacity: 0;
transform: scale(0.4) translateY(40px);
}
45%, 49% {
opacity: 0;
transform: scale(0.4) translateY(-20px);
}
58%, 59.99% {
opacity: 1;
transform: scale(1) translateY(-20px);
}
60% {
opacity: 1;
transform: scale(1) translateY(-20px);
}
66% {
opacity: 1;
transform: scale(0.9) translateY(5px);
}
74% {
opacity: 0;
transform: scale(0.4) translateY(40px);
}
75%, 79% {
opacity: 0;
transform: scale(0.4) translateY(-20px);
}
88%, 100% {
opacity: 1;
transform: scale(1) translateY(-20px);
}
}
@keyframes nudgeMouse {
0% {
transform: translateY(0);
}
20% {
transform: translateY(8px);
}
30% {
transform: translateY(0);
}
50% {
transform: translateY(8px);
}
60% {
transform: translateY(0);
}
80% {
transform: translateY(8px);
}
90% {
transform: translateY(0);
}
}
@keyframes nudgeText {
0% {
transform: translateY(0);
}
20% {
transform: translateY(2px);
}
30% {
transform: translateY(0);
}
50% {
transform: translateY(2px);
}
60% {
transform: translateY(0);
}
80% {
transform: translateY(2px);
}
90% {
transform: translateY(0);
}
}
@keyframes colorText {
21% {
color: #4e5559;
}
30% {
color: #ffffff;
}
51% {
color: #4e5559;
}
60% {
color: #ffffff;
}
81% {
color: #4e5559;
}
90% {
color: #ffffff;
}
}

———————-
⚡ Tình đời ý đạo:

————–
* NHEO – Kênh chia sẻ kiến thức đồ họa, thiết kế website và những điều tốt đẹp trong cuộc sống.
– Hãy LIKE & đăng ký kênh (Subscribe) để cập nhật nhiều video mới nhất từ NHEO, cũng như giúp mình có thêm động lực để cho ra nhiều video thiết thực khác.
Theo dõi chúng tôi tại:
Group Facebook :
Website :

Xin cảm ơn các bạn !