Xbox Achievement Notification

Developer
Gus Alaniz
Size
3,318 Kb
Views
28,336
  1. Xbox Achievement Notification Previews
  2. Xbox Achievement Notification HTML Codes
  3. Xbox Achievement Notification CSS Codes
  4. Xbox Achievement Notification JS Codes

How do I make an xbox achievement notification?

This is a quick Xbox Achievement style notification but it's kinda sloppy right now with all the setTimeouts... Going to try and do this all with just CSS3 animations and transitions. . What is a xbox achievement notification? How do you make a xbox achievement notification? This script and codes were developed by Gus Alaniz on 25 October 2022, Tuesday.

Xbox Achievement Notification Previews
IQ Test

Xbox Achievement Notification - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Xbox Achievement Notification</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="achievement" class=""> <div class="circle"></div> <div class="copy"> <h4>Achievement Unlocked!</h4> <p>Here are some internet points!</p> </div>
</div>
<div class="refresh">again?</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Xbox Achievement Notification - Script Codes CSS Codes

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
body { background: #209DD2; font-family: Lato;
}
#achievement { width: 100px; height: 100px; border-radius: 50%; background: #fff; position: relative; transform: scale(0); transition: 250ms ease-in-out; margin: 40px auto; box-shadow: 0 3px 20px #1E7195;
}
#achievement.expand { transform: scale(1);
}
#achievement.expand .circle:before { animation: rotate 400ms linear;
}
#achievement.expand.widen { width: 380px; border-radius: 50px;
}
#achievement .circle { width: 80px; height: 80px; border-radius: 50%; background: #E4BF2B; position: absolute; top: 10px; left: 10px;
}
#achievement .circle:before { font-size: 50px; font-family: FontAwesome; display: inline-block; content: "\f005"; color: #fff; position: absolute; top: 15px; left: 17px; transform: scale(1); transition: 250ms ease-in-out;
}
#achievement .circle.rotate:before { animation: rotateBack 400ms linear;
}
#achievement .copy { opacity: 0; transition: 250ms ease-in-out; width: 240px; position: absolute; left: 100px; top: 35px;
}
#achievement .copy.show { opacity: 1; top: 25px;
}
#achievement .copy h4 { font-size: 22px; margin: 0;
}
#achievement .copy p { margin: 0;
}
.refresh { display: none; text-align: center; color: #fff; text-decoration: underline; font-size: 18px; cursor: pointer;
}
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}
@keyframes rotateBack { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); }
}

Xbox Achievement Notification - Script Codes JS Codes

function showAchievement() { $('#achievement .circle').removeClass('rotate'); // Run the animations setTimeout(function () { $('#achievement').addClass('expand'); setTimeout(function () { $('#achievement').addClass('widen'); setTimeout(function () { $('#achievement .copy').addClass('show'); }, 1000); }, 1000); }, 1000); // Hide the achievement setTimeout(function () { hideAchievement(); }, 4000);
}
function hideAchievement() { setTimeout(function () { $('#achievement .copy').removeClass('show'); setTimeout(function () { $('#achievement').removeClass('widen'); $('#achievement .circle').addClass('rotate'); setTimeout(function () { $('#achievement').removeClass('expand'); $('.refresh').fadeIn(300); }, 1000); }, 1000); }, 3000); $('.refresh').click(function () { showAchievement(); $(this).fadeOut(300); });
}
showAchievement();
Xbox Achievement Notification - Script Codes
Xbox Achievement Notification - Script Codes
Home Page Home
Developer Gus Alaniz
Username alanizdesign
Uploaded October 25, 2022
Rating 3
Size 3,318 Kb
Views 28,336
Do you need developer help for Xbox Achievement Notification?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gus Alaniz (alanizdesign) Script Codes
Name
IMessage Questions
Notification Corner Box
Toggle HTML on Click
A Thing
A Pen by Gus Alaniz
CSS3 Circle loader One Time around
Slide Up Through Feed
Super Simple CSS Sub Nav
SVG Rotating Circle Loader
Pie Circle Loader
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!