Skip to content

Instantly share code, notes, and snippets.

@joe-bro-1

joe-bro-1/expanding-flex-cards.markdown

Created May 3, 2023 08:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joe-bro-1/75a1c8fa2b5d703cd0318b3c22020863 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joe-bro-1/75a1c8fa2b5d703cd0318b3c22020863 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joe-bro-1 created this gist May 3, 2023.
    9 changes: 9 additions & 0 deletions expanding-flex-cards.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    Expanding flex cards
    --------------------
    ![](https://i.imgur.com/W6mroTN.gif)

    Edit 9th October 2021: Added theme switcher

    A [Pen](https://codepen.io/z-/pen/OBPJKK) by [Zed Dash](https://codepen.io/z-) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/OBPJKK).
    64 changes: 64 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    <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>
    5 changes: 5 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    $(".option").click(function(){
    $(".option").removeClass("active");
    $(this).addClass("active");

    });
    2 changes: 2 additions & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458.js"></script>
    164 changes: 164 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,164 @@
    $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;
    }
    }
    }
    }
    }
    }
    5 changes: 5 additions & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet" />
    <link href="https://static.fontawesome.com/css/fontawesome-app.css" rel="stylesheet" />
    <link href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
    <link href="https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458.scss?theme" rel="stylesheet" />