Social icon animation

index.html

<img class="me" src="https://www.taseenblog.ml/_next/static/media/author.325df90b.png" alt="" />

<div class="social">
  <a href="https://twitter.com/MDTaseenKhan"><i id="twitter" class="icon-twitter"></i></a>
  <a href="https://github.com/MohammadTaseenKhan"><i id="github" class="icon-github"></i></a>
  <!-- <i id="stack" class="icon-stackexchange"></i>-->
  <a href="https://www.linkedin.com/in/md-taseen-khan"><i id="linkedin" class="icon-linkedin-sign"></i></a>
  <a href="https://www.taseenblog.ml"> <i id="code" class="icon-code"></i></a>
  <a href="facebook.com/MDTaseenKhanBD"> <i id="plus" class="icon-facebook-sign"></i></a>
  <a href"https://crypto-chat-bd.vercel.app/private/MDTaseenKhan"> <i id="mail" class="fa-solid fa-dice-d20"></i> </a>
</div>

script.js

$(document).ready(function () {
  $("i").hide();
});

$(window).load(function () {
  $("i").show();

  var twitterPos = $("#twitter").position();
  var githubPos = $("#github").position();
  var stackPos = $("#stack").position();
  var linkedinPos = $("#linkedin").position();
  var codePos = $("#code").position();
  var plusPos = $("#plus").position();
  var mailPos = $("#mail").position();
  var imgPos = $(".me").position();

  $("i").css({
    position: "absolute",
    zIndex: "1",
    top: imgPos.top + 100,
    left: "47%"
  });

  setTimeout(function () {
    $("#twitter").animate(
      {
        top: twitterPos.top + 10,
        left: twitterPos.left - 10
      },
      500
    );
  }, 250);

  setTimeout(function () {
    $("#twitter").animate(
      {
        top: twitterPos.top,
        left: twitterPos.left
      },
      250
    );

    $("#github").animate(
      {
        top: githubPos.top + 10,
        left: githubPos.left - 6
      },
      500
    );
  }, 500);

  setTimeout(function () {
    $("#github").animate(
      {
        top: githubPos.top,
        left: githubPos.left
      },
      250
    );

    $("#linkedin").animate(
      {
        top: linkedinPos.top + 10,
        left: linkedinPos.left
      },
      500
    );
  }, 1000);

  setTimeout(function () {
    $("#linkedin").animate(
      {
        top: linkedinPos.top,
        left: linkedinPos.left
      },
      250
    );

    $("#code").animate(
      {
        top: codePos.top + 10,
        left: codePos.left + 3
      },
      500
    );
  }, 1250);

  setTimeout(function () {
    $("#code").animate(
      {
        top: codePos.top,
        left: codePos.left
      },
      250
    );

    $("#plus").animate(
      {
        top: plusPos.top + 10,
        left: plusPos.left + 6
      },
      500
    );
  }, 1500);

  setTimeout(function () {
    $("#plus").animate(
      {
        top: plusPos.top,
        left: plusPos.left
      },
      250
    );

    $("#mail").animate(
      {
        top: mailPos.top + 10,
        left: mailPos.left + 10
      },
      500
    );
  }, 1750);

  setTimeout(function () {
    $("#mail").animate(
      {
        top: mailPos.top,
        left: mailPos.left
      },
      250
    );
  }, 2000);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

social-icon-animation.markdown

Social icon animation

Experimenting with ways to display social links

A Pen by MohammadTaseenKhan on CodePen.

License.

style.scss

body {
  background-color: black;
}

.me {
  display: block;
  margin: 2em auto;
  margin-bottom: 3em;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}

.social {
  text-align: center;
  font-size: 2.5em;
  color: #555;
  overflow: hidden;

  a {
    color: inherit;
    text-decoration: none;
  }

  i {
    margin: 0.3em;
    cursor: pointer;
    transition: color 300ms ease, margin-top 300ms ease;
    transform: translateZ(0);

    &:hover {
      margin-top: -1px;
    }

    &#twitter:hover {
      color: #77ddf6;
    }

    &#github:hover {
      color: white;
    }

    &#linkedin:hover {
      color: #0177b5;
    }

    &#code:hover {
      color: #29a329;
    }

    &#stack:hover {
      color: #ed780e;
    }

    &#plus:hover {
      color: blue;
    }

    &#mail:hover {
      color: #f7b401;
    }
  }
}