| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 31 |
Tags
- #image
- 사이트제작
- #동영상
- #jQuery
- #cgimall
- 이미지
- 솔루션
- happycgi
- 해피CGI
- #웹솔루션
- php
- #CSS
- #홈페이지제작
- #해피CGI
- #솔루션
- #happycgi
- #뉴스
- 게시판
- javascript
- #업종별
- 해피씨지아이
- #홈페이지
- #쇼핑몰
- CGIMALL
- 홈페이지제작
- CSS
- 웹솔루션
- 홈페이지
- #이미지
- jquery
- Today
- Total
웹솔루션개발 26년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] Infinite Gallery Hall 본문
가로로 스크롤 해서 볼 수 있는 갤러리 입니다.
미술관 디자인으로 다양한 작품을 볼 수 있습니다.
자세한 내용은 데모를 참고해주시기 바랍니다.
자세한 내용은 데모를 참고해주시기 바랍니다.
HTML
|
<div class="logo">GALLERIE D'ART</div>
<div id="canvas-container"></div>
<div id="ui-layer">
<div class="slide-content" id="slide-0">
<span class="catalogue-number">01 / Collection</span>
<h1>Ethereal <br>Form</h1>
<div class="description">
Captured in the gentle light of early morning, this piece explores the boundaries between reality and abstraction. The soft textures invite the viewer to look closer, revealing layers of complexity hidden within the simplicity.
</div>
<div class="meta-grid">
<span class="meta-label">Artist</span> <span class="meta-value">Elena Varas</span>
<span class="meta-label">Year</span> <span class="meta-value">2023</span>
<span class="meta-label">Medium</span> <span class="meta-value">Oil on Linen</span>
</div>
</div>
<div class="slide-content" id="slide-1">
<span class="catalogue-number">02 / Collection</span>
<h1>Geometric <br>Silence</h1>
<div class="description">
A study in precision and balance. By stripping away organic chaos, the artist reveals the quiet mathematical purity that underlies nature. The composition demands a moment of stillness from its observer.
</div>
<div class="meta-grid">
<span class="meta-label">Artist</span> <span class="meta-value">Marcus Thorne</span>
<span class="meta-label">Year</span> <span class="meta-value">2024</span>
<span class="meta-label">Medium</span> <span class="meta-value">Acrylic & Graphite</span>
</div>
</div>
<div class="slide-content" id="slide-2">
<span class="catalogue-number">03 / Collection</span>
<h1>Fading <br>Horizons</h1>
<div class="description">
The horizon line serves as a metaphor for the future—always visible yet forever out of reach. The bleeding colors suggest the fluidity of memory and the inevitable passage of time.
</div>
<div class="meta-grid">
<span class="meta-label">Artist</span> <span class="meta-value">Isabella Rossi</span>
<span class="meta-label">Year</span> <span class="meta-value">2022</span>
<span class="meta-label">Medium</span> <span class="meta-value">Watercolor Wash</span>
</div>
</div>
<div class="slide-content" id="slide-3">
<span class="catalogue-number">04 / Collection</span>
<h1>The <br>Void</h1>
<div class="description">
A minimalist approach challenging the viewer to find meaning in emptiness. The texture of the canvas itself becomes the primary subject, inviting a purely tactile visual experience without distraction.
</div>
<div class="meta-grid">
<span class="meta-label">Artist</span> <span class="meta-value">Unknown</span>
<span class="meta-label">Year</span> <span class="meta-value">Late 20th C.</span>
<span class="meta-label">Medium</span> <span class="meta-value">Mixed Media</span>
</div>
</div>
</div>
|
CSS
|
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #f7f7f5;
font-family: 'Lato', sans-serif;
color: #111;
}
#canvas-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#ui-layer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}
.logo {
position: fixed;
top: 40px;
left: 50px;
font-family: 'Playfair Display', serif;
font-weight: 700;
letter-spacing: 2px;
font-size: 1rem;
text-transform: uppercase;
z-index: 10;
}
.slide-content {
position: absolute;
top: 25%;
left: 8%;
width: 30%;
max-width: 450px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease-out;
pointer-events: auto;
}
.slide-content.active {
opacity: 1;
transform: translateY(0);
}
h1 {
font-family: 'Playfair Display', serif;
font-weight: 400;
font-style: italic;
font-size: 4rem;
margin: 0 0 1.5rem 0;
line-height: 1;
color: #0d0d0d;
}
.catalogue-number {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 3px;
color: #999;
margin-bottom: 1.5rem;
display: inline-block;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}
.description {
font-size: 1.05rem;
font-weight: 300;
line-height: 1.8;
color: #444;
margin-bottom: 3rem;
text-align: justify;
}
.meta-grid {
display: grid;
grid-template-columns: 80px 1fr;
row-gap: 0.8rem;
border-top: 1px solid #e0e0e0;
padding-top: 1.5rem;
}
.meta-label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #888;
align-self: center;
}
.meta-value {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
font-style: italic;
color: #222;
}
.scroll-hint {
position: fixed;
bottom: 40px;
left: 50px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #aaa;
}
|
'웹프로그램밍 자료실 > 기타 자료' 카테고리의 다른 글
| [해피CGI][cgimall] Holographic Glitch CSS only (0) | 2026.05.07 |
|---|---|
| [해피CGI][cgimall] 투명 아이콘 버튼 Glassmorphism Icon Buttons (0) | 2026.05.06 |
| [해피CGI][cgimall] Claude Code Opus 4.6의 성능이 실제로 저하되는지를 감지하는 사이트 (0) | 2026.04.27 |
| [해피CGI][cgimall] CSS 프레임 워크 - tailwindcss 4.2 (0) | 2026.04.24 |
| [해피CGI][cgimall] CodePen Home CSS Border Corner Shape: Scoop, Notch, Squre-Cut 박스 모서리 깍기 (0) | 2026.03.13 |
'웹프로그램밍 자료실/기타 자료' Related Articles
more
Comments