Code PHP && Ứng Dụng: Css Load

Hiển thị các bài đăng có nhãn Css Load. Hiển thị tất cả bài đăng

Thứ Sáu, 17 tháng 10, 2025

Hiệu Ứng Load Sản Phẩm Khi Cuộn / Rê Chuột

**** HTML

<!DOCTYPE html>

<head>

<title>Hiệu Ứng Load Sản Phẩm Khi Cuộn / Rê Chuột</title>

<style>

body {

font-family: "Segoe UI", Arial, sans-serif;

background: #f5f5f5;

margin: 0;

padding: 20px;

}

h1 {

text-align: center;

color: #333;

margin-bottom: 30px;

}

.product-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

gap: 20px;

max-width: 1200px;

margin: 0 auto;

}

.product-item {

background: #fff;

border-radius: 12px;

overflow: hidden;

box-shadow: 0 2px 8px rgba(0,0,0,0.1);

transition: transform 0.4s, box-shadow 0.3s;

cursor: pointer;

}

.product-item:hover {

transform: scale(1.05);

box-shadow: 0 10px 25px rgba(0,0,0,0.2);

}

.product-item img {

width: 100%;

height: 220px;

object-fit: cover;

opacity: 0;

transition: opacity 0.6s ease;

}

.product-item img.loaded {

opacity: 1;

}

.product-info {

padding: 10px 15px;

text-align: center;

}

.product-info h3 {

font-size: 16px;

color: #333;

margin: 8px 0;

}

.price {

color: #e74c3c;

font-weight: bold;

}

</style>

</head>

<body>

<h1>Hiệu Ứng Load Sản Phẩm Khi Cuộn / Rê Chuột</h1>

</div>

</div>

</div>

for(let i=4; i<=500; i++){

document.write(`

</div>

</div>`);

}

</script>

</div>

document.addEventListener("DOMContentLoaded", function() {

const lazyImages = document.querySelectorAll("img.lazy");

// Lazy load khi cuộn gần hình

const observer = new IntersectionObserver(entries => {

entries.forEach(entry => {

if (entry.isIntersecting) {

const img = entry.target;

img.src = img.dataset.src;

img.onload = () => img.classList.add("loaded");

observer.unobserve(img);

}

});

}, { rootMargin: "200px" });

lazyImages.forEach(img => observer.observe(img));

// Nếu rê chuột vào – load ngay

document.querySelectorAll('.product-item').forEach(item => {

item.addEventListener('mouseenter', () => {

const img = item.querySelector('img.lazy');

if (img && !img.src.includes(img.dataset.src)) {

img.src = img.dataset.src;

img.onload = () => img.classList.add("loaded");

}

});

</script>

</body>

</html>

Thứ Ba, 24 tháng 9, 2024

Load button & hover button

Link: saigoncm.com.vn

**** HTML

<ul>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

****CSS

:root {

--social-pc-vertical: 100px;

--social-pc-horizontal: 10px;

--social-mb-vertical: 100px;

--social-mb-horizontal: 10px;

--social-pc-display: block;

--social-mb-display: block;

--fb-fp: #0674E8;

--fb-ms: #0080F7;

--fb-share: #0080F7;

--twitter-page: #41B6E4;

--twitter-share: #41B6E4;

--yt-page: #D92E2E;

--ins-page: #AA168B;

--pinterest-page: #B7081B;

--email-page: #1B9AC3;

--skype-page: #14A7DE;

--phone-page: #2CBB00;

--sms-page: #F0C823;

--zalo-page: #0088FF;

}

#tnContact{

max-width: 230px;

margin: 0;

padding: 0;

display: flex;

flex-direction: column;

position: fixed;

bottom: 3%;

left: 2%;

z-index: 9999;

}

#tnContact li{

list-style-type: none;

width: 40px;

height: 40px;

padding: 0;

margin-bottom: 10px;

white-space: nowrap;

}

#tnContact li a{

display: inline-block;

width: 40px;

height: 40px;

line-height: 44px;

margin-right: 15px;

text-align: center;

border-radius: 99px;

}

#tnContact li a i{

font-size: 18px;

color: #fff;

}

#tnContact li .iconzalo img{

width: 24px;

height: 24px;

vertical-align: middle;

}

#tnContact li .label{

position: relative;

visibility: hidden;

cursor: pointer;

color: #fff;

padding: 10px 10px 13px 10px;

border-radius: 0 99px 99px 0;

font-size: 13px;

}

#tnContact li .label:before{

content: "";

top: 0px;

left: -15px;

position: absolute;

display: block;

width: 0;

height: 0;

border-top: 20px solid transparent;

border-right: 15px solid #189eff;

border-bottom: 18px solid transparent;

}

#tnContact li:hover .label{visibility: visible;}

/* Background Icon & Label */

.iconfb , .label.fb{background: #3b5999}

.iconzalo , .label.zalo{background: #008df2}

.iconsms , .label.sms{background: #00c300;}

.iconcall , .label.call{background: #383838}

.fb.label:before{ border-right-color: #3b5999!important}

.zalo.label:before{ border-right-color: #008df2!important}

.sms.label:before{ border-right-color: #00c300!important}

.call.label:before{ border-right-color: #383838!important}

.wp-caption .wp-caption-text {

padding: .4em;

font-size: .9em;

background: #ffffff00;

font-style: italic;

}

/***Icon-Top*******************/

.button.icon.circle {

padding-left: 0;

padding-right: 0;

/*bottom: 150px;*/

bottom: 50px;

z-index: 999999;

}

.button.icon {

margin-left: .12em;

margin-right: .12em;

min-width: 3.5em;

padding-left: .6em;

padding-right: .6em;

display: inline-block;

}

.is-outline:hover, .primary.is-outline:hover {

color: #fff;

background-color: #446084;

border-color: #446084;

}

.is-outline:hover {

-webkit-box-shadow: none !important;

box-shadow: none !important;

}

.button.is-outline, input[type='submit'].is-outline, input[type='reset'].is-outline, input[type='button'].is-outline {

border: 2px solid currentColor;

background-color: transparent;

}

.button.is-outline {

line-height: 3.19em;

}

a.plain {

color: currentColor;

-webkit-transition: color .3s, opacity .3s, -webkit-transform .3s;

transition: color .3s, opacity .3s, -webkit-transform .3s;

-o-transition: color .3s, opacity .3s, transform .3s;

transition: color .3s, opacity .3s, transform .3s;

transition: color .3s, opacity .3s, transform .3s, -webkit-transform .3s;

}

a:active, a:hover {

outline-width: 0;

}

.back-to-top {

margin: 0;

opacity: 0;

bottom: 20px;

right: 20px;

pointer-events: none;

-webkit-transform: translateY(30%);

-ms-transform: translateY(30%);

transform: translateY(30%);

}

.z-1 {

z-index: 21;

}

.circle {

border-radius: 999px !important;

-o-object-fit: cover;

object-fit: cover;

}

.bottom {

bottom: 0;

}

.fixed {

position: fixed !important;

z-index: 12;

}

.is-outline {

color: silver;

}

.is-outline:hover{

background: #c7bdbd;

border-color: #c1c1c1;

color: #fff;

}

.back-to-top i {

font-size: 1.5em;

position: relative;

top: 3px;

left: 11px;

}

.back-to-top.active {

opacity: 1;

pointer-events: inherit;

-webkit-transform: translateY(0);

-ms-transform: translateY(0);

transform: translateY(0);

}

</div>

/*01: Image size*/

/*.image:hover {

-webkit-transform:scale(1.2); transform:scale(1.2);

}

.image {

-webkit-transition: all 0.7s ease; transition: all 0.7s ease;

}*/

/*03: Zoom out

.container:hover .image {

-webkit-transform:scale(1); transform:scale(1);

}

.container {

overflow:hidden;

}

.image {

-webkit-transform:scale(1.3); transform:scale(1.3); -webkit-transition: all 0.7s ease; transition: all 0.7s ease;

}*/

/*Zoom in*/

/*.content:hover .image {

-webkit-transform:scale(1.3); transform:scale(1.3);

}

.content {

overflow:hidden;

}

.image {

-webkit-transition: all 0.7s ease; transition: all 0.7s ease;

}*/

/*04: Border radius and shadow effect*/

/*.image:hover {

border-radius:50%; box-shadow: 0 10px 6px -6px grey;

}

.image {

-webkit-transition: all 0.7s ease; transition: all 0.7s ease;

}*/

/*05: Border radius distortion*/

/*.image:hover {

border-top-left-radius: 120px; border-bottom-right-radius: 120px; border-top-right-radius: 15px; border-bottom-left-radius: 15px;

}

.image {

border-bottom-left-radius: 120px; border-top-right-radius: 120px; border-bottom-right-radius: 15px; border-top-left-radius: 15px; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;

}*/

/*.image:hover {

-webkit-transform: rotate(45deg); transform: rotate(45deg);

}

.image {

-webkit-transition: all 0.7s ease; transition: all 0.7s ease;

}*/

.social-contact-item a {

display: block;

width: 60px;

height: 60px;

line-height: 60px;

text-align: center;

font-size: 31px;

border-radius: 50%;

overflow: hidden;

box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);

transition: all 0.3s;

}

.social-contact-fb{

background-color: #0080f7 !important;

color: #fff !important;

}

a.social-contact-zalo{

background-color: var(--zalo-page);

color: #fff;

}

a.social-contact-zalo:hover{

background-color: #fff;

color: var(--zalo-page);

}

a.social-contact-zalo img {

width: 50px;

filter: brightness(0) invert(1);

}

a.social-contact-zalo:hover img{

width: 50px;

filter: brightness(1) invert(0);

}

a.social-contact-phone{

background-color: #2cbb00;

color: #fff;

}

a.social-contact-phone:hover {

background-color: #fff;

color: #2cbb00;

}

a.social-contact-fb:hover {

background-color: #fff !important;

color: #0080f7 !important;

}

.foot-icon > ul {

display: flex;

justify-content: center;

list-style: none;

z-index: 999;

max-width: fit-content;

}

.foot-icon > ul > li {

padding: 0 10px;

}

.foot-icon {

position: fixed;

bottom: 30px;

left: 0;

right: 0;

z-index: 9999;

text-align: -webkit-center;

}

/**load-top**********/

@media (min-width: 601px) {

.social-contact-box.social-bottomRight {

right: var(--social-pc-horizontal);

bottom: var(--social-pc-vertical);

}

.social-contact-box {

position: fixed;

display: var(--social-pc-display);

z-index: 999999;

}

.fadeInUp {

animation-name: fadeInUp;

}

.animated {

animation-duration: 1s;

animation-fill-mode: both;

}

@keyframes fadeInUp{

from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}

/*.fadeInUp{animation-name:fadeInUp}*/

@keyframes fadeInUpBig{from{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:none}}.fadeInUpBig{animation-name:fadeInUpBig}

menu ngang

Thứ Sáu, 17 tháng 10, 2025

Hiệu Ứng Load Sản Phẩm Khi Cuộn / Rê Chuột

Thứ Ba, 24 tháng 9, 2024

Load button & hover button