Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including jj-parallax-card with all npm packages installed. Try it out:

var jjParallaxCard = require("jj-parallax-card")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

jj-parallax-card v1.0.4

jj-parallax-card is a Vue component to mimic Apple-tv style card. You can modify its size, light effect, and add any other components in its background and foreground to create your own 3d-card(yes youc could embed another parallax card into it). And absolutely it can handle all events like a normal html element, like click and hover.And you can even make it acts completely like a 3d button.

###jj-parallax-card for Vue

jj-parallax-card is a Vue component to mimic Apple-tv style card. You can modify its size, light effect, and add any other components in its background and foreground to create your own 3d-card(yes youc could embed another parallax card into it). And absolutely it can handle all events like a normal html element, like click and hover. And you can even make it acts completely like a 3d button.

Thanks the implementation idea from codepen

####💕GIF:

jj-parallax-card-demo

demo

demo

How To Use

  1. install jj-parallax-card via npm

    npm i jj-parallax-card

  2. Import it into your vue component.

    import JJParallaxCard from 'jj-parallax-card'
    
    components: {
        'jj-parallax-card':JJParallaxCard,
      },
    
  3. use it in your code

    <jj-parallax-card></jj-parallax-card>
    

    after set the size of the jj-parallax-card, you could set some properties to do some customisation. Here are the properties and actions you can set

    Property-nameTypeDescription
    light-colorStringa hex string to set the light color, default value is white. if you don't want to have a Reflective-light-layer, just set this property to 'transparent'
    click-effectBooleanTure if the card can be clicked down. Set it to true when you want the parallax card acts like a button. Default value is false
    Action-nameDescription
    clickTrigged when clicked that card.

    your code will be like this

    <jj-parallax-card lightColor="white" :click-effect="true" style="float:left; width: 300px; height: 300px;" @click="click"></jj-parallax-card>
    
  4. Use slot to set the background and foreground view of the parallax-card

    jj-parallax-card-img-1

    TypeSample
    slot="front" //this slot will be inserted into the foreground<img slot="content" src="" alt="">
    slot="content" //this slot will be inserted into the background<div slot="front"></div?

    and off course you can add any components into the slot. Including embedded jj-paralllax-card component like in the gif.

    Your code will be like this

    <jj-parallax-card lightColor="white" style="float:left; width: 300px; height: 300px;" @click="click">
          <img slot="content" src="background.png" alt="">
          <div slot="front">
            <img style="width: 100px; height: 100px;" src="front.png" alt="">
          </div>
    </jj-parallax-card>
    

    Demo

    demo are in the 'demo' zip.

    Remember to npm install

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free