Interaction : Floating effect like Slack.com

Hello,

How to reproduce the floating effect of the icons on the Slack homepage ?

Thank you,

Nicolas

2 Likes

Hi Nicolas, welcome to the forum :webflow_heart:

One way is to use this tutorial with Particles.js.

1 Like

Following! Would love to know as well

Bump! @PixelGeek any opinion from the master?

I have created a short tutorial on how to get it on your project…

2 Likes

Nicolas PM’d me about this, so if anyone ever remembes the old Slack homepage and still wants this solution, here’s the reply I’ve just sent to Nicolas, just so ppl can have the public solution as well

Yep, I just paid someone to do it for me, so here’s the solution:

Step 1. Select the page where you want this (in page, shortcut ‘p’), click the cog and under Custom Code, in the first field (‘inside tag’, NOT in ‘before tag’), paste this

    <style>

.particles-animation-wrapper{
overflow-x: hidden;
}
    .circle-right-0{
        animation: circle-0 10s linear infinite;
    }

    .circle-right-5{
        animation: circle-5 10s linear infinite;
    }

    .circle-right-10{
        animation: circle-10 10s linear infinite;
    }

    .circle-right-15{
        animation: circle-15 10s linear infinite;
    }

    .circle-right-20{
        animation: circle-20 10s linear infinite;
    }

    .circle-left-0{
        animation: circle-reverse-5 10s linear infinite;
    }

    .circle-left-5{
        animation: circle-reverse-5 10s linear infinite;
    }
    .circle-left-10{
        animation: circle-reverse-10 10s linear infinite;
    }
    .circle-left-15{
        animation: circle-reverse-15 10s linear infinite;
    }
    .circle-left-20{
        animation: circle-reverse-20 10s linear infinite;
    }

    @keyframes circle-0{
        0%{
            transform:rotate(0deg)
            translate(5px)
            rotate(0deg);

        }
        100%{
            transform:rotate(360deg)
            translate(5px)
            rotate(-360deg);
        }
    }

    @keyframes circle-5{
        0%{
            transform:rotate(0deg)
            translate(5px)
            rotate(0deg);

        }
        100%{
            transform:rotate(360deg)
            translate(5px)
            rotate(-360deg);
        }
    }

    @keyframes circle-10{
        0%{
            transform:rotate(0deg)
            translate(10px)
            rotate(0deg);

        }
        100%{
            transform:rotate(360deg)
            translate(10px)
            rotate(-360deg);
        }
    }

    @keyframes circle-15{
        0%{
            transform:rotate(0deg)
            translate(15px)
            rotate(0deg);

        }
        100%{
            transform:rotate(360deg)
            translate(15px)
            rotate(-360deg);
        }
    }

    @keyframes circle-20{
        0%{
            transform:rotate(0deg)
            translate(20px)
            rotate(0deg);

        }
        100%{
            transform:rotate(360deg)
            translate(20px)
            rotate(-360deg);
        }
    }

    @keyframes circle-reverse-0{
        0%{
            transform:rotate(0deg)
            translate(-5px)
            rotate(0deg);

        }
        100%{
            transform:rotate(360deg)
            translate(-5px)
            rotate(-360deg);
        }
    }

    @keyframes circle-reverse-5{
        0%{
            transform:rotate(0deg)
            translate(-5px)
            rotate(0deg);

        }
        100%{
            transform:rotate(360deg)
            translate(-5px)
            rotate(-360deg);
        }
    }

    @keyframes circle-reverse-10{
        0%{
            transform:rotate(0deg)
            translate(-10px)
            rotate(0deg);

        }
        100%{
            transform:rotate(360deg)
            translate(-10px)
            rotate(-360deg);
        }
    }

    @keyframes circle-reverse-15{
        0%{
            transform:rotate(0deg)
            translate(-15px)
            rotate(0deg);

        }
        100%{
            transform:rotate(360deg)
            translate(-15px)
            rotate(-360deg);
        }
    }

    @keyframes circle-reverse-20{
        0%{
            transform:rotate(0deg)
            translate(-20px)
            rotate(0deg);

        }
        100%{
            transform:rotate(360deg)
            translate(-20px)
            rotate(-360deg);
        }
    }

    #particles {
        width: 100%;
        height: 100%;
        position: relative;
        background-color: transparent;
        overflow: visible;
    }

    #particles img {
        max-width: 58px;
        height: auto;
        position: absolute;
    }

    #particles img:nth-child(1) {
        top: 10%;
        left: 10%;
    }

    #particles img:nth-child(2) {
        top: 20%;
        left: 20%;
    }

    #particles img:nth-child(3) {
        top: 5%;
        left: 40%;
    }

    #particles img:nth-child(4) {
        top: 30%;
        left: 70%;
    }

    #particles img:nth-child(5) {
        top: 80%;
        left: 90%;
    }

    #particles img:nth-child(6) {
        top: 80%;
        left: 30%;
    }

    #particles img:nth-child(7) {
        top: 90%;
        left: 10%;
    }

    #particles img:nth-child(8) {
        top: 60%;
        left: 40%;
    }

</style>

You can play with the numbers here (the translate, transform values)

Step 2. Place an Embed element (click CMD/CTRL+E for the Webflow search function, type embed, press enter) and paste this inside

<div id="particles">
    <img class="circle-right-0" src="https://legitcheck.app/wp-content/uploads/2019/10/Artboard.png">
    <img class="circle-left-15" src="xxx">
    <img class="circle-right-10" src="xxx">
    <img class="circle-right-20" src="xxx">
    <img class="circle-left-0" src="xxx">
    <img class="circle-left-5" src="xxx">
    <img class="circle-left-10" src="xxx">
    <img class="circle-left-20" src="xxx">
</div>

Instead of XXX you’ll need to place an URL to an image. So you have to host these pics somewhere. I hosted them on my WP instance, but initially just to test it out I hosted them on my Google Drive. However, Drive won’t work for the long term as I assume they’ll have some bandwidth limitation (so you pics can’t get requested many times)

All that’s left then is to edit the Embed element in your Webflow website. I, for instance, have two of these (on desktop), which take 25% and 25%. One’s on the left, one’s on the right. I’m editing all these on the actual Embed element (e.g. height: 90%, width: 25%, position:relative etc etc). Mobile’s different ofc and it’ll be up to you to edit these things

If you want to see my live instance, currently (until I’ll edit my website at some point in the future), it’s on https://legitcheck.app

1 Like

Here’s the solution. Thanks for sharing @chdaniel :clap: