Dynamic image implementation in Watch Demo

  • Resolved edubellomo

    (@edubellomo)


    1 year, 11 months ago

    Hi Mark,

    thanks again for making this tool available. I have a question that might be trivial but allow me that as a wordpress novice. In your Watch demo, when clicking through the different Bezels, the images jump in from left to right or viceversa. How did you obtain such effect?

    Thanks,

    Eduardo

    • This topic was modified 1 year, 11 months ago by edubellomo.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Marc Lacroix

    (@marcusig)

    Hi there,

    This is done using a bit of CSS.

    Firs I added a class to the bezel layer:

    Then used this CSS to setup the transition:

    .mkl_pc .mkl_pc_container .mkl_pc_viewer .mkl_pc_layers img.bezel:not(.active) {
                transform: translateX(calc(-50% - 300px)) translateY(-50%);
}

.mkl_pc .mkl_pc_container .mkl_pc_viewer .mkl_pc_layers img.bezel.active ~ img.bezel:not(.active) {
                transform: translateX(calc(-50% + 300px)) translateY(-50%);
}

    Marc

    Thread Starter edubellomo

    (@edubellomo)

    Ace! thanks!

    Thread Starter edubellomo

    (@edubellomo)

    Closed!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Dynamic image implementation in Watch Demo’ is closed to new replies.