ctg-stakr

stakrJS

An expandable content stacks component.

Html (demo)

<div id="staks">
  <section id="img-0" class="stak stak__image" style="background: url(https://source.unsplash.com/random/x900) no-repeat center center; background-size:cover;"></section>
  <section id="con-0" class="stak stak__content"><header></header><main></main><footer></footer></section>
  <section id="con-1" class="stak stak__content"><header></header><main></main><footer></footer></section>
  <section id="img-1" class="stak stak__image" style="background: url(https://source.unsplash.com/random/x901) no-repeat center center; background-size:cover;"></section>
  <section id="cont-2" class="stak stak__content"><header></header><main></main><footer></footer></section>
</div>

Javascript (demo)

import Stakr from '@calltheguys/ctg-stakr';

document.addEventListener('DOMContentLoaded', () => {
	console.log('Expanded Stack Grid...');

  const options = {
    autoStak: true,
    reverseExpand: false,
    expandedHeight: 0.8, // 1 = 100vh
    heights: {
      contentExpanded: 0.8,
      contentRetracted: 0.3,
    },
    expandableStaks: {
      image: false,
      content: true,
    },
    classes: {
      stak: 'stak',
      image: 'stak__image',
      content: 'stak__content',
      scrollContainer: 'stak__content-items',
      expanded: '--expanded'
    },
    scrollTopOnExpand: true,
    expandDelay: 60,
    expandDuration: 500,
    backToTopSpeed: 300,
    easings: {
      expand: 'easeInSine',
      retract: 'easeInSine'
    }
  };

  const myStak = new Stakr('#staks', options);
  console.log('myStak is now ready:', myStak);

  // Test destroy
  // setTimeout(function(){
  //   myStak.unStakm();
  // }, 5000);
});

CSS (demo)

body {
  color: black;;
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
}

#staks {
  position: relative;
  width: 100%;
  display:flex;
  flex-direction: column;
}

tak {
  box-shadow: 0px -20px 19px rgba(0, 0, 0, 0.45);

	&__content {
		background: pink;
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		left: 0px;
		cursor: pointer;
		padding: 3rem;

    &:last-child {
      overflow-y: auto;
    }

    &:hover {
      header {
        transform: scaleY(2);
      }
      main {
        transform: translateY(-10px);
      }
    }

    header {
      position: absolute;
      height: 20px;
      background: pink;
      left:0;
      pointer-events: none;
      top:0;
      width: 100%;
      transition: transform 0.3s linear;
      overflow-y: visible;
    }

    main {
      transition: transform 0.3s linear;
      pointer-events: none;
    }

	}
	&--image,  &__image {
		height: 900px;
		position: relative;
		width: 100%;
		background: url("https://source.unsplash.com/random/x900") no-repeat center center; background-size:cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
	}
}

.stak__content-items {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  pointer-events:none;
	overflow-x: hidden;

	.card-item {
		/* width: 30vw; */
		flex-basis: calc(33% - 2rem);
		height: 400px;
		border: 1px solid $body-color;
		margin-bottom: 2rem;
		margin-right: 1rem;
	}
}