Phantom

One day I found a interesting design from Dribbble. It is a carousel with phantom slide effect. I like that effect so much and wondering is it possible to wrap as a web component ? After a few survey with CSS mask and trigonometric function. All puzzle has been collect and resolved.

Allow me to introduce <msc-phantom /> for you.

<msc-phantom /> will show you interesting slide effect after some simple config setting. You could take a quick look in the following demo.

Basic Usage

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

Required Script

<script 
    async
    name="msc-phantom"
    src="https://your-domain//pack-loader.js"
    data-required="https://your-domain/class-msc-phantom.js,https://your-domain/wcl.js">
</script>

Structure

Here comes two init ways for different situations. Either way is fine, developers could pick one they like.

- Put the config inside <msc-phantom /> as its child. This one could be used for data has already collected. (such as server-side prepared)

<msc-phantom width="1.71" height="1" slide="1" duration="3000" direction="normal" autoplay>
  <script type="application/json">
    {
      "width": 1.75,
      "height": 1,
      "slide": 1,
      "duration": 2000,
      "queue": [
        {
          "img": "https://picsum.photos/id/1016/1050/600?grayscale",
          "loc": "#1",
          "target": "_blank",
          "aria-label": "msc-phantom #1",
          "alt": "photo #1016 from https://picsum.photos"
        },
        {
          "img": "https://picsum.photos/id/1064/1050/600?grayscale",
          "loc": "#2",
          "target": "_blank"
        },
        {
          "img": "https://picsum.photos/id/1076/1050/600?grayscale",
          "loc": "#3",
          "target": "_blank"
        }
      ]
    }
  </script> 
</msc-phantom>

- Client trigger. (need to prepare a web service for config fetch.)

Note: when init with this way, response data interface must follow <msc-phantom />'s format.

<msc-phantom
  width="1.71"
  height="1"
  config="your-web-service-address"
>
</msc-phantom>

Web Service response format

{
  "width": 1.75, // optional
  "height": 1, // optional
  "slide": 1, // optional
  "duration": 2000, // optional (in milliseconds)
  "direction": "reverse", // optional
  "autoplay": true, // optional
  "queue": [
    {
      "img": "https://picsum.photos/id/1016/1050/600?grayscale",
      "loc": "#1",
      "target": "_blank",
      "aria-label": "msc-phantom #1", // optional
      "alt": "photo #1016 from https://picsum.photos" // optional
    },
    {
      "img": "https://picsum.photos/id/1064/1050/600?grayscale",
      "loc": "#2",
      "target": "_blank"
    },
    {
      "img": "https://picsum.photos/id/1076/1050/600?grayscale",
      "loc": "#3",
      "target": "_blank"
    },
    {
      "img": "https://picsum.photos/id/111/1050/600?grayscale",
      "loc": "#4",
      "target": "_blank"
    },
    {
      "img": "https://picsum.photos/id/191/1050/600?grayscale",
      "loc": "#5",
      "target": "_blank"
    }
  ]
}

The following <msc-phantom /> is client trigger demo.

Style Customization

<msc-phantom /> uses CSS variables to hook transition duration & indicator width. That means developer could easy change it into the lookup you like.

<style>
msc-phantom {
  --transition-duration: 0.8s;
  --indicator-width: 32px;
}
</style>

Attributes

<msc-phantom /> supports some attribute to let it become more convenience & useful.

width

Set <msc-phantom />'s width ratio. Default is 1.

<msc-phantom
  width="1.71"
  height="1"
>
  ...
</msc-phantom>

height

Set <msc-phantom />'s height ratio. Default is 1.

<msc-phantom
  width="1.71"
  height="1"
>
  ...
</msc-phantom>

duration

Set <msc-phantom />'s cool time. This attribute will be active when autoplay is on. Default is 5000.(in milliseconds)

<msc-phantom
  duration="5000"
>
  ...
</msc-phantom>

direction

Set <msc-phantom />'s transition direction. Developers could select normal or reverse. Default is normal.

<msc-phantom
  direction="reverse"
>
  ...
</msc-phantom>

slide

Set <msc-phantom />'s current slide. Default is 1.

<msc-phantom
  slide="3"
>
  ...
</msc-phantom>

autoplay

Set <msc-phantom /> into autoplay mode or not.

<msc-phantom
  autoplay
>
  ...
</msc-phantom>

Properties

Mathod

Event