Floating Icon section

Map SVG Animation

July 23, 2022

Team Slider Style 1

July 8, 2023

Published by Ujwal Joshi at July 24, 2022

HTML

 <section id="ns_floating_icons_main">
            <div class="ns_custom_para">
                <h2 class="ns_custom_para_h2">Integrate with all the systems you already use</h2>
                <p class="ns_custom_para_p">If you already have tools to manage customers, quotes, inventory, 
                    shipping, or accounting, you can use our prebuilt integrations to connect Stripe with hundreds of systems.<br><br>
                    Stripe also partners with dozens of the most popular ecommerce platforms and offers plug-ins to help you 
                    jumpstart your integration.</p>
            </div>
            <div class="ns_floating_container">
                <div class="ns_bubble x1">
                    <img src="Shippo.jpg" alt="">
                </div>
                <div class="ns_bubble x2">
                    <img src="Woocommerce_1.png" alt="">
                </div>
                <div class="ns_bubble x3">
                    <img src="Cratejoy.jpg" alt="">
                </div>
                <div class="ns_bubble x4">
                    <img src="Easypost.png" alt="">
                </div>
                <div class="ns_bubble x5">
                    <img src="TaxJar.png" alt="">
                </div>
                <div class="ns_bubble x6">
                    <img src="Shippo.jpg" alt="">
                </div>
                <div class="ns_bubble x7">
                    <img src="Cratejoy.jpg" alt="">
                </div>
                <div class="ns_bubble x8">
                    <img src="Shippo.jpg" alt="">
                </div>
                <div class="ns_bubble x9">
                    <img src="Woocommerce_1.png" alt="">
                </div>
                <div class="ns_bubble x10">
                    <img src="Easypost.png" alt="">
                </div>
            </div>
        </section>

CSS

#ns_floating_icons_main{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5px;
    height: 25vh;
	overflow: hidden;
    padding: 10em 15em;
    margin-top: 40px;
}
.ns_floating_container {
    position: relative;
    margin:0px 50px;
    bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	z-index: -1;
}
.ns_custom_para{
    padding-right: 5em;  
}
.ns_custom_para_h2{
    font-size: 30px;
    font-family: 'poppins';
}

/* KEYFRAMES */

@-webkit-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-moz-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-webkit-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@-moz-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

/* ANIMATIONS */

 .x1 {
    -webkit-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
    left: 40%;
    top: -140%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}
.x2 {
    -webkit-animation: animateBubble 40s linear infinite, sideWays 3s ease-in-out infinite alternate;
	-moz-animation: animateBubble 40s linear infinite, sideWays 3s ease-in-out infinite alternate;
	animation: animateBubble 40s linear infinite, sideWays 3s ease-in-out infinite alternate;
	
    left: 10%;
    top: 50%;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
}
.x3 {
    -webkit-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
    left: 90%;
    top: 107%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}
.x4 {
    -webkit-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
    left: 65%;
    top: -20%;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
}
.x5 {
    -webkit-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
    left: 10%;
    top: 125%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}
.x6 {
    -webkit-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
    left: 85%;
    top: -125%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}
.x7 {
    -webkit-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 15%;
    top: 245%;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
}
.x8 {
    -webkit-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 50%;
	top: 160%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}
.x9 {
    -webkit-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
    left: 12%;
    top: -37%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}
.x10 {
    -webkit-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
    left: 85%;
    top: 200%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}
/* image */
.ns_bubble {
	position: absolute;
}
.ns_bubble img{
    border-radius: 50%;
    width: 250px;
    height: 250px;
}

.ns_bubble:after {
	content: "";
    height: 180px;
	left: 10px;
	position: absolute;
	width: 180px;
}

Floating Icon section

Map SVG Animation

Team Slider Style 1

HTML

CSS

Ujwal Joshi

Related posts

Step Form

Map SVG Animation

Infinity Carousal

Leave a Reply Cancel reply