[해피CGI][cgimall] Expanding flex cards - 카드형식의 배너

카드형식의 배너로 슬라이드 배너/ 네비게이션 등 활용도가 높을뿐 아니라
트렌디한 디자인으로 사이트 사용시 디자인 및 유용성이 높습니다.

HTML 소스

<div class="options">

   

 

      <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="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="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="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="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>

 

Photos from Victor of Valencia on tumblr

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");

   

});