Bounce Card

Have you ever try iOS APP Store tab - "Today"'s card effect ? I like that effect so much and wonder how to develop it.

Allow me introduce <msc-bounce-card> to you. <msc-bounce-card> is a web component which built in bounce effect. All we need to do just put the content as its child and everything will be all set.

nulla facilisis hendrerit ultrices

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non iaculis felis. Sed suscipit venenatis mauris id iaculis. Cras at rutrum risus. Aliquam non sem quis quam hendrerit placerat vel eu enim. Sed sagittis dictum massa non vehicula. In sapien metus, posuere et augue id, tincidunt porttitor massa. Sed lobortis quam tellus, et malesuada augue accumsan fermentum. Donec accumsan ipsum eget ex elementum, vitae lobortis ex fermentum. Fusce iaculis, enim vel imperdiet malesuada, sem est suscipit enim, sit amet congue velit erat vitae nisl. Nulla facilisis hendrerit ultrices.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla diam tellus, ornare sit amet lacus sit amet, tincidunt aliquet libero. Suspendisse a congue risus. Aenean fermentum ligula nec purus congue pretium. Proin non leo convallis, ultricies libero feugiat, molestie eros. Ut gravida ipsum id tellus ultrices auctor. Aliquam eu porttitor libero. Proin feugiat vitae ex at aliquet. Nunc eget nisi elit. In sagittis, mi vitae interdum ultrices, tortor nibh varius quam, sit amet vestibulum purus arcu eu ex. Curabitur porttitor augue at augue posuere aliquam. Etiam vitae neque nulla. Ut massa nunc, feugiat ac odio sed, lacinia ornare ante. Sed ultrices suscipit ante, id viverra erat tempor sit amet. Nunc vel sapien molestie, tempus enim eu, blandit dolor.

In in eleifend nisl. Donec ligula massa, dignissim id ipsum sit amet, tincidunt dapibus diam. Pellentesque id sem libero. Praesent felis purus, sagittis nec tortor consectetur, fringilla venenatis purus. Ut sit amet sem suscipit, pulvinar mauris eu, tincidunt dui. Nullam et porta tellus, id auctor metus. Cras fermentum dictum nibh, in dignissim nisi gravida id. Sed finibus tristique elit vel vehicula. Pellentesque iaculis tellus quis ultricies pharetra. Nunc ante urna, vestibulum porta libero id, vulputate scelerisque nisl. Praesent ac velit et leo mollis tristique. Curabitur sed nunc convallis, feugiat neque ut, bibendum tortor. Fusce pretium bibendum congue. Vestibulum faucibus, lectus in aliquet scelerisque, odio nisi condimentum ligula, vel semper enim justo quis nibh. Pellentesque placerat, dolor vel tincidunt varius, orci ipsum viverra arcu, sit amet placerat risus nisl accumsan nisi. Nulla facilisi.

tempus enim eu, blandit dolor

pellentesque id sem libero

Demos

Layout: responsive

nulla facilisis hendrerit ultrices

Layout: fill

vestibulum porta libero id

Layout: fixed

ultricies non tellus

Layout: fixed-height

vestibulum porta libero id

Layout: intrinsic

vestibulum porta libero id

Basic Usage

<msc-bounce-card> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-bounce-card>'s html structure and everything will be all set.

Required Script

<script async
        src="https://your-domain/pack-msc-bounce-card.js">        
</script>

Structure

Put the content inside <msc-bounce-card> as its child. When <msc-bounce-card> has been clicked. It will display the content with the whole viewport size.

<msc-bounce-card layout="responsive" width="1" height="1.1">
  //content node
  <article>
    ...
  </article>
</msc-bounce-card>

JavaScript Instantiation

<msc-bounce-card> could also use JavaScript to create DOM element. Here comes some examples.

<script>
  var nodeAPI, nodeClasses;

  //use DOM api
  nodeAPI = document.createElement('msc-bounce-card');
  document.body.appendChild(nodeAPI);
  nodeAPI.appendChild(document.querySelector('.your-content-node'));

  //new Classes
  nodeClasses = new MscBounceCard();
  document.body.appendChild(nodeClasses);
  nodeClasses.appendChild(document.querySelector('.your-content-node'));
</script>

Style Customization

<msc-bounce-card> uses CSS variables to style its interface. That means developer could easy change them into the lookup you like.

<style>
msc-bounce-card {
  --timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration: 650ms;
  --border-radius: 20px;
  --close: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCc+PHBhdGggZmlsbD0nI2ZmZicgZmlsbC1ydWxlPSdldmVub2RkJyBkPSdNMTIgMTAuNTg4TDYuNzAyIDUuMjlhMSAxIDAgMCAwLTEuNDA4LjAwNC45OTMuOTkzIDAgMCAwLS4wMDMgMS40MDhMMTAuNTkgMTJsLTUuMyA1LjI5N2ExIDEgMCAwIDAgLjAwNCAxLjQwOC45OTMuOTkzIDAgMCAwIDEuNDA4LjAwNEwxMiAxMy40MWw1LjI5OCA1LjNhMSAxIDAgMCAwIDEuNDEtMS40MTNMMTMuNDEzIDEybDUuMjk3LTUuMjk4YTEgMSAwIDAgMC0uMDA0LTEuNDA4Ljk5NC45OTQgMCAwIDAtMS40MDgtLjAwNEwxMiAxMC41ODh6Jy8+PC9zdmc+);;
}
</style>

Besides above, <msc-bounce-card> will add curtain-raising or curtain-call when expand or not. Developer could use these css hook to style your child content.

<style>
.curtain-raising article {
  background: #f00;
}
.curtain-raising article {
  background: #0f0;
}
</style>

Variants

<msc-bounce-card> supports some common state to let it become more convenience & useful.

Layout: responsive

Element sized to the width of its container element and resizes its height automatically to the aspect ratio given by width and height attributes. (demo)

<msc-bounce-card layout="responsive" width="1" height="1.1">
  //content node
  <article>
    ...
  </article>
</msc-bounce-card>

Layout: fill

Element takes the space available to it, both width and height. In other words, the layout of a fill element matches its parent. (demo)

<msc-bounce-card layout="fill">
  //content node
  <article>
    ...
  </article>
</msc-bounce-card>

Layout: fixed

Element has a fixed width and height with no responsiveness supported. (demo)

<msc-bounce-card layout="fixed" width="350" height="250">
  //content node
  <article>
    ...
  </article>
</msc-bounce-card>

Layout: fixed-height

Element takes the space available to it but keeps the height unchanged. (demo)

<msc-bounce-card layout="fixed-height" height="300">
  //content node
  <article>
    ...
  </article>
</msc-bounce-card>

Layout: nodisplay

Element not displayed.

<msc-bounce-card layout="nodisplay">
  //content node
  <article>
    ...
  </article>
</msc-bounce-card>

Layouts

Type Width/
height
required Behavior

responsive Yes Element sized to the width of its container element and resizes its height automatically to the aspect ratio given by width and height attributes.

fill No Element takes the space available to it, both width and height. In other words, the layout of a fill element matches its parent.

fixed Yes Element has a fixed width and height with no responsiveness supported.

fixed-height Height only Element takes the space available to it but keeps the height unchanged.

nodisplay No Element not displayed.

Type	Width/ height required	Behavior
`responsive`	Yes	Element sized to the width of its container element and resizes its height automatically to the aspect ratio given by width and height attributes.
`fill`	No	Element takes the space available to it, both width and height. In other words, the layout of a fill element matches its parent.
`fixed`	Yes	Element has a fixed width and height with no responsiveness supported.
`fixed-height`	Height only	Element takes the space available to it but keeps the height unchanged.
`nodisplay`	No	Element not displayed.

Properties

Property Name	Type	Description
`layout`	String	Setter/getter for msc-bounce-card's layout
`width`	String	Setter/getter for msc-bounce-card's width
`height`	String	Setter/getter for msc-bounce-card's height

Event

Event Signature	Description
`curtain-change`	Fired when element's curtain state is changed and committed.

Classes Static Properties

Property Name	Description
`MscBounceCard.observedAttributes`	Getter for msc-bounce-card's support attributes.
`MscBounceCard.observedLayouts`	Getter for msc-bounce-card's support layouts.