Skip to content

Instantly share code, notes, and snippets.

@taskinoz

taskinoz/TwitchSocial.html

Last active February 27, 2020 03:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save taskinoz/cdbb2a54a3eea5b7104d50d3216de0d7 to your computer and use it in GitHub Desktop.
Save taskinoz/cdbb2a54a3eea5b7104d50d3216de0d7 to your computer and use it in GitHub Desktop.
Download ZIP
Show Twitter and Twitch icons in the bottom corners intermittently
Raw
TwitchSocial.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Social</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style media="screen">
html,
body{
padding: 0;
margin: 0;
border: 0;
overflow: hidden;
}
.socials{
font-family: Arial;
font-size: 20px;
position: absolute;
bottom: 0;
left: 0;
}
.social{
display: inline-block;
padding: 5px 10px;
animation: slideoutLeft 100s infinite;
transform: translateY(200px);
transform: translateX(-300px);
}
@keyframes slideoutLeft {
0%{
transform: translateY(200px);
}
40%{
transform: translateY(200px);
}
45%{
transform: translateY(0px);
}
55%{
transform: translateX(0px);
}
60%{
transform: translateX(-300px);
}
100%{
transform: translateX(-300px);
}
}
@keyframes slideoutRight {
0%{
transform: translateY(200px);
}
40%{
transform: translateY(200px);
}
45%{
transform: translateY(0px);
}
55%{
transform: translateX(0px);
}
60%{
transform: translateX(300px);
}
100%{
transform: translateX(300px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="socials">
<div class="social"><i class="fa fa-twitter" aria-hidden="true"></i> taskinoz</div>
<div class="social"><i class="fa fa-twitch" aria-hidden="true"></i> taskinoz</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment