½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
Infinite Gallery Hall : happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > CSS > ±âŸȿ°ú > Infinite Gallery Hall »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
HTML
PHP
Api
CSS
ASP
mysql
2022
Slide
jquery
¸ÞÀϸµ
¸ðµâ
°¶·¯¸®
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
Infinite Gallery Hall
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù ±âŸȿ°ú
´Ù¿î·Îµå Ƚ¼ö 0 ȸ
°£´Ü¼³¸í °¡·Î ½ºÅ©·Ñ·Î º¼ ¼ö ÀÖ´Â °¶·¯¸® µðÀÚÀÎ ÀÔ´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ
 °¡·Î·Î ½ºÅ©·Ñ ÇØ¼­ º¼ ¼ö ÀÖ´Â °¶·¯¸® ÀÔ´Ï´Ù.
 
¹Ì¼ú°ü µðÀÚÀÎÀ¸·Î ´Ù¾çÇÑ ÀÛǰÀ» º¼ ¼ö ÀÖ½À´Ï´Ù.
ÀÚ¼¼ÇÑ ³»¿ëÀº µ¥¸ð¸¦ Âü°íÇØÁֽñ⠹ٶø´Ï´Ù.


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;
        }
 

 

³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð Àǰ߳²±â±â
µî·ÏµÈ ÀǰßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöŰ
 94302067 º¸ÀÌ´Â µµ¹è¹æÁö۸¦ ÀÔ·ÂÇϼ¼¿ä.