½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > HTML > HTML °­ÀÇ > Expanding flex cards - Ä«µåÇü½ÄÀÇ ¹è³Ê »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
HTML
ASP
mysql
CSS
Mobile
image
jquery
slide
¸Þ´º
�޴�
2023
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
Expanding flex cards - Ä«µåÇü½ÄÀÇ ¹è³Ê
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù HTML °­ÀÇ
´Ù¿î·Îµå Ƚ¼ö 50 ȸ
°£´Ü¼³¸í Expanding flex cards - Ä«µåÇü½ÄÀÇ ¹è³Ê
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ

Ä«µåÇü½ÄÀÇ ¹è³Ê·Î ½½¶óÀÌµå ¹è³Ê/ ³×ºñ°ÔÀÌ¼Ç µî È°¿ëµµ°¡ ³ôÀ»»Ó ¾Æ´Ï¶ó
Æ®·»µðÇÑ µðÀÚÀÎÀ¸·Î »çÀÌÆ® »ç¿ë½Ã µðÀÚÀÎ ¹× À¯¿ë¼ºÀÌ ³ô½À´Ï´Ù.


HTML ¼Ò½º

<div class="options">

   <div class="option active" style="--optionBackground:url(https://66.media.tumblr.com/6fb397d822f4f9f4596dff2085b18f2e/tumblr_nzsvb4p6xS1qho82wo1_1280.jpg);">

      <div class="shadow"></div>

      <div class="label">

         <div class="icon">

            <i class="fas fa-walking"></i>

         </div>

         <div class="info">

            <div class="main">Blonkisoaz</div>

            <div class="sub">Omuke trughte a otufta</div>

         </div>

      </div>

   </div>

   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg);">

      <div class="shadow"></div>

      <div class="label">

         <div class="icon">

            <i class="fas fa-snowflake"></i>

         </div>

         <div class="info">

            <div class="main">Oretemauw</div>

            <div class="sub">Omuke trughte a otufta</div>

         </div>

      </div>

   </div>

   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5af3f8303456e376ceda1517553ba786/tumblr_o4986gakjh1qho82wo1_1280.jpg);">

      <div class="shadow"></div>

      <div class="label">

         <div class="icon">

            <i class="fas fa-tree"></i>

         </div>

         <div class="info">

            <div class="main">Iteresuselle</div>

            <div class="sub">Omuke trughte a otufta</div>

         </div>

      </div>

   </div>

   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5516a22e0cdacaa85311ec3f8fd1e9ef/tumblr_o45jwvdsL11qho82wo1_1280.jpg);">

      <div class="shadow"></div>

      <div class="label">

         <div class="icon">

            <i class="fas fa-tint"></i>

         </div>

         <div class="info">

            <div class="main">Idiefe</div>

            <div class="sub">Omuke trughte a otufta</div>

         </div>

      </div>

   </div>

   <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg);">

      <div class="shadow"></div>

      <div class="label">

         <div class="icon">

            <i class="fas fa-sun"></i>

         </div>

         <div class="info">

            <div class="main">Inatethi</div>

            <div class="sub">Omuke trughte a otufta</div>

         </div>

      </div>

   </div>

</div>


<a href="http://victorofvalencia-blog.tumblr.com" target="_blank" class="credit">Photos from Victor of Valencia on tumblr</a>


CSS ¼Ò½º

$optionDefaultColours: #ED5565,#FC6E51,#FFCE54,#2ECC71,#5D9CEC,#AC92EC;


body {

   display:flex;

   flex-direction:row;

   justify-content:center;

   align-items:center;

   overflow:hidden;

   height:100vh;

   

   font-family: 'Roboto', sans-serif;

   transition:.25s;

   @include dark {

      background: #232223;

      color:white;

   }

   .credit {

      position: absolute;

      bottom:20px;

      left:20px;

      

      color:inherit;

   }

   .options {

      display:flex;

      flex-direction:row;

      align-items:stretch;

      overflow:hidden;


      min-width:600px;

      max-width:900px;

      width:calc(100% - 100px);

      

      height:400px;

      

      @for $i from 1 through 4 {

         @media screen and (max-width:798px - $i*80) {

            min-width:600px - $i*80;

            .option:nth-child(#{6-$i}) {

               display:none;

            }

         }

      }

      

      .option {

         position: relative;

         overflow:hidden;


         min-width:60px;

         margin:10px;

         //border:0px solid --defaultColor;


         background:var(--optionBackground, var(--defaultBackground, #E6E9ED));

         background-size:auto 120%;

         background-position:center;


         cursor: pointer;


         transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);


         @for $i from 1 through length($optionDefaultColours) {

            &:nth-child(#{$i}) {

               --defaultBackground:#{nth($optionDefaultColours, $i)};

            }

         }

         &.active {

            flex-grow:10000;

            transform:scale(1);

            

            max-width:600px;

            margin:0px;

            border-radius:40px;

            

            background-size:auto 100%;

            .shadow {

               box-shadow:inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;

            }

            .label {

               bottom:20px;

               left:20px;

               .info >div {

                  left:0px;

                  opacity:1;

               }

            }

            /*&:active {

               transform:scale(0.9);

            }*/

         }

         &:not(.active) {

            flex-grow:1;

            

            border-radius:30px;

            .shadow {

               bottom:-40px;

               box-shadow:inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;

            }

            .label {

               bottom:10px;

               left:10px;

               .info >div {

                  left:20px;

                  opacity:0;

               }

            }

         }

         .shadow {

            position: absolute;

            bottom:0px;

            left:0px;

            right:0px;

            

            height:120px;

            

            transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);

         }

         .label {

            display:flex;

            position: absolute;

            right:0px;


            height:40px;

            transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);

            .icon {

               display:flex;

               flex-direction:row;

               justify-content:center;

               align-items:center;

               

               min-width:40px;

               max-width:40px;

               height:40px;

               border-radius:100%;


               background-color:white;

               color:var(--defaultBackground);

            }

            .info {

               display:flex;

               flex-direction:column;

               justify-content:center;

               

               margin-left:10px;

               

               color:white;

               

               white-space: pre;

               >div {

                  position: relative;

                  

                  transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity .5s ease-out;

               }

               .main {

                  font-weight:bold;

                  font-size:1.2rem;

               }

               .sub {

                  transition-delay:.1s;

               }

            }

         }

      }

   }

}


JS ¼Ò½º

$(".option").click(function(){

   $(".option").removeClass("active");

   $(this).addClass("active");

   

});

 

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