Загрузка...
Анимированный раздел наград с иконками и свечением от курсора. Идеально для портфолио или сайта студии для демонстрации достижений.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Awards - Verd Architecture</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap"
rel="stylesheet">
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
body {
font-family: var(--font-body);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center
}
a {
color: inherit;
text-decoration: none
}
:root {
--color-bg: #0F0F0E;
--color-bg-elevated: #1A1917;
--color-bg-card: #22211E;
--color-surface: #2C2B27;
--color-copper: #C17F59;
--color-copper-light: #D4A07A;
--color-copper-bright: #E8B894;
--color-terracotta: #C4704E;
--color-gold: #C9A96E;
--color-gold-light: #DFC08A;
--color-sage: #8A9A7B;
--color-cream: #F5F0EB;
--color-cream-muted: #D9D2CA;
--color-text: #F5F0EB;
--color-text-muted: #9C9789;
--color-text-subtle: #6B675E;
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
.container {
max-width: 1320px;
margin: 0 auto;
padding: 0 clamp(1.5rem, 4vw, 3rem)
}
/* Cursor glow — contained inside section */
.section-glow {
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
pointer-events: none;
z-index: 0;
background: radial-gradient(circle, rgba(193, 127, 89, 0.06) 0%, transparent 70%);
transform: translate(-50%, -50%);
transition: opacity 0.3s;
will-change: left, top;
opacity: 0;
}
.awards:hover .section-glow {
opacity: 1
}
/* Awards */
.awards {
padding: clamp(3rem, 5vw, 5rem) 0;
border-top: 1px solid rgba(193, 127, 89, 0.08);
border-bottom: 1px solid rgba(193, 127, 89, 0.08);
background: var(--color-bg);
position: relative;
overflow: hidden;
}
/* Noise texture — scoped to awards */
.awards::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.025;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
background-repeat: repeat;
}
.awards-grid {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(3rem, 6vw, 6rem);
flex-wrap: wrap;
}
.award-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
text-align: center;
opacity: 0.5;
transition: opacity 0.4s;
}
.award-item:hover {
opacity: 1
}
.award-icon {
font-size: 2rem;
color: var(--color-copper-light);
}
.award-item span {
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-subtle);
}
/* Stagger variant: pop with bounce (awards) */
.stagger-pop>* {
opacity: 0;
transform: scale(0.5);
transition: opacity 0.5s var(--ease-out-expo), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stagger-pop.visible>*:nth-child(1) {
transition-delay: 0s
}
.stagger-pop.visible>*:nth-child(2) {
transition-delay: 0.06s
}
.stagger-pop.visible>*:nth-child(3) {
transition-delay: 0.12s
}
.stagger-pop.visible>*:nth-child(4) {
transition-delay: 0.18s
}
.stagger-pop.visible>*:nth-child(5) {
transition-delay: 0.24s
}
.stagger-pop.visible>* {
opacity: 1;
transform: scale(1)
}
@media(max-width:768px) {
.awards-grid {
gap: 2rem
}
}
</style>
</head>
<body>
<section class="awards" id="awardsSection">
<div class="section-glow" id="awardsGlow"></div>
<div class="container">
<div class="awards-grid stagger-pop">
<div class="award-item reveal-child">
<div class="award-icon"><span class="iconify" data-icon="solar:cup-star-bold"></span></div>
<span>AIA Gold Medal 2024</span>
</div>
<div class="award-item reveal-child">
<div class="award-icon"><span class="iconify" data-icon="solar:medal-ribbons-star-bold"></span></div>
<span>Pritzker Nominee</span>
</div>
<div class="award-item reveal-child">
<div class="award-icon"><span class="iconify" data-icon="solar:verified-check-bold"></span></div>
<span>LEED Platinum x12</span>
</div>
<div class="award-item reveal-child">
<div class="award-icon"><span class="iconify" data-icon="solar:earth-bold"></span></div>
<span>UN Habitat Award</span>
</div>
<div class="award-item reveal-child">
<div class="award-icon"><span class="iconify" data-icon="solar:star-circle-bold"></span></div>
<span>Dezeen Studio of Year</span>
</div>
</div>
</div>
</section>
<script>
(function(){
'use strict';
const obs = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } });
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.stagger-pop').forEach(el => obs.observe(el));
/* Cursor Glow */
const section=document.getElementById('awardsSection');
const glow=document.getElementById('awardsGlow');
if(window.matchMedia('(pointer:fine)').matches){
let mouseX=0,mouseY=0,glowX=0,glowY=0;
section.addEventListener('mousemove',e=>{
const rect=section.getBoundingClientRect();
mouseX=e.clientX-rect.left;
mouseY=e.clientY-rect.top;
});
function animateGlow(){
glowX+=(mouseX-glowX)*0.08;
glowY+=(mouseY-glowY)*0.08;
glow.style.left=glowX+'px';
glow.style.top=glowY+'px';
requestAnimationFrame(animateGlow);
}
animateGlow();
}
})();
</script>
</body>
</html>