How to develop a mouse-following carousel with translate3d

Question

I wonder if you’ve ever seen such a merry-go-round, or if you had to develop such a one as you would? I need to implement it on a website but I’m having a hard time doing the part of the movement that occurs in the Hover following the mouse and if there is a specific name for this effect that I might be looking for. Thanks

The link I took for example is https://www.ypiyachts.com/ is at the bottom of the page. Thanks guys

Answer 1

The effect you’re looking for calls Tilt Hover Effect, unfortunately I could not import his library to show a functional case similar to what you are showing in the example.

Here you can find more examples: https://tympanus.net/Development/TiltHoverEffects/

You will have to import the anime.js library and the structure looks like this:

html

<a href="#" class="tilter tilter--2">
<figure class="tilter__figure">
    <img class="tilter__image" src="https://via.placeholder.com/200" alt="img03" />
    <div class="tilter__deco tilter__deco--shine"><div></div></div>
    <div class="tilter__deco tilter__deco--overlay"></div>
    <figcaption class="tilter__caption">
        <h3 class="tilter__title">Helen Portland</h3>
        <p class="tilter__description">Seattle</p>
    </figcaption>
    <svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
        <path d="M20.5,20.5h260v375h-260V20.5z" />
    </svg>
</figure>

css

    .tilter {
    position: relative;
    display: block;
    flex: none;
    width: 300px;
    height: 415px;
    margin: 1.5em 2.5em;
    color: #fff;
    perspective: 1000px;
}

.tilter * {
    pointer-events: none;
}

.tilter:hover,
.tilter:focus {
    color: #fff;
    outline: none;
}

.tilter__figure,
.tilter__image {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.tilter__figure > * {
    transform: translateZ(0px); /* Force correct stacking order */
}

.tilter__figure {
    position: relative;
}

.tilter__figure::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    box-shadow: 0 30px 20px rgba(35,32,39,0.5);
}

.tilter__deco {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.tilter__deco--overlay {
    background-image: linear-gradient(45deg, rgba(226, 60, 99, 0.4), rgba(145, 58, 252, 0.4), rgba(16, 11, 192, 0.4));
}

.tilter__deco--shine div {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
}

.tilter__deco--lines {
    fill: none;
    stroke: #fff;
    stroke-width: 1.5px;
}

.tilter__caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 4em;
}

.tilter__title {
    font-family: 'Abril Fatface', serif;
    font-size: 2.5em;
    font-weight: normal;
    line-height: 1;
    margin: 0;
}

.tilter__description {
    font-size: 0.85em;
    margin: 1em 0 0 0;
    letter-spacing: 0.15em;
}

js

Initialize:

new TiltFx(el, [options]);

The options:

var options = {
    movement: {
        // The main wrapper.
        imgWrapper : {
            translation : {x: 10, y: 10, z: 30},
            rotation : {x: 0, y: -10, z: 0},
            reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
        },
        // The SVG lines element.
        lines : {
            translation : {x: 10, y: 10, z: [0,70]},
            rotation : {x: 0, y: 0, z: -2},
            reverseAnimation : {duration : 2000, easing : 'easeOutExpo'}
        },
        // The caption/text element.
        caption : {
            rotation : {x: 0, y: 0, z: 2},
            reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
        },
        // The overlay element.
        overlay : {
            translation : {x: 10, y: -10, z: 0},
            rotation : {x: 0, y: 0, z: 2},
            reverseAnimation : {duration : 2000, easing : 'easeOutExpo'}
        },
        // The shine element.
        shine : {
            translation : {x: 100, y: 100, z: 0},
            reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
        }
    }
}