Fork me on GitHub

<palindrom-bunny>

Custom element that shows a jumping puppet bunny

How to use


<palindrom-bunny>
    <img src="src/puppet.png">
    <!-- This is an image of the bunny that is included with this package. You can also use any other image. -->
</palindrom-bunny>

<style>
    palindrom-bunny {
        width: 100%;
        position: fixed;
        background: #EEE;
        left: 75px; /*for margin from the viewport edges, this should be more than img margin-left*/
        top: 132px;
        width: calc(100vw - 150px); /*for equal margin from the viewport edges, this should (100vw - 2*left) */
    }

    palindrom-bunny img {
        width: 107px; /*for crispness on Hi-DPI, this should be half of the image natural width*/
        height: 145px; /*for crispness on Hi-DPI, this should be half of the image natural height*/
        margin-left: -53px; /*for horizontal centering, this should be half of the img width*/
    }
</style>

Credits