Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML/CSS/JavaScript Developer Console Animation with Menu Hover Responses
<?php
// Get user name and/or IP
function get_user_data_processing_function(){
$name = [];
// Sanitize $_GET parameters to avoid XSS and other attacks
$urlName = preg_replace('/[^-a-zA-Z0-9_]/', '', $_GET['n']);
if($urlName){
// Get user name from URL variable
$name['name'] = $urlName;
}
// Get URL IP address if available
$ipaddress = '';
if (getenv('HTTP_CLIENT_IP'))
$ipaddress = getenv('HTTP_CLIENT_IP');
else if(getenv('HTTP_X_FORWARDED_FOR'))
$ipaddress = getenv('HTTP_X_FORWARDED_FOR');
else if(getenv('HTTP_X_FORWARDED'))
$ipaddress = getenv('HTTP_X_FORWARDED');
else if(getenv('HTTP_FORWARDED_FOR'))
$ipaddress = getenv('HTTP_FORWARDED_FOR');
else if(getenv('HTTP_FORWARDED'))
$ipaddress = getenv('HTTP_FORWARDED');
else if(getenv('REMOTE_ADDR'))
$ipaddress = getenv('REMOTE_ADDR');
else
$ipaddress = 'Hmmm... Mystery User';
$ipaddress = explode (',', $ipaddress);
$name['ip'] = $ipaddress[0];
return $name;
}
// Create page inputs with user info
add_action('wp_footer', 'getUserIP');
function getUserIP() {
$userData = get_user_data_processing_function();
echo '<input type="hidden" class="userIP" value="'.$userData["ip"].'" name="userIP" />';
echo '<input type="hidden" class="userName" value="'.$userData["name"].'" name="userName" />';
}
?>
// Typed function is using the library Typedjs: https://github.com/mattboldt/typed.js/
let homeConsoleIntro = document.getElementById('consoleText');
let typed = "";
if (homeConsoleIntro) {
typed = new Typed('#consoleText', {
strings: [
'^2000', 'Hello...^1000 ' + createName() + '^1000\n' +
'My name is Martin Kaiser^1000\n' +
"I'm a full stack developer^1000\n" +
'Based out of beautiful Vancouver, BC^2000\n',
'I write everything from HTML and CSS^1000, to PHP and JavaScript for frontend and backend (Node)^2000\n',
'Okay, let me load up my site locally on your device^500\n',
'npm install mk-amaze-web-stuff --save ^1000\n' +
'`installing components...` ^1000\n' +
'`Fetching from source...` ^2000\n' +
'`ERR!!!! ENOSPC No space left on device`^1000\n' +
'`ERR!!!! mk-amaze-web-stuff is simply to large for disk`^2000',
'hmmmmmmmmmmm^1000 (╯°□°)╯︵ ┻━┻^500',
'Well, go ahead and check out my online portfolio^1000\n',
"Apps^500, Snippets^500, Websites^500, Info^500, it's all great!\n^2000",
''
],
typeSpeed: 40,
backSpeed: 2,
loop: false
});
// Wait for animation to get 6s in before allowing hover changes in console
let waitForAnimation = true;
setTimeout(function() {
waitForAnimation = false;
console.log(waitForAnimation);
}, 6000);
// Arrays for menu item mouse hover responces
let choiceResponseCat = [" are a pretty great",
" with some tricky problem's solved",
" with cutting edge libraries",
" with more code than a N64 game",
" that show my skills",
" that expanded my code repertoire",
", most started with Hello World!",
"... npm run amazing-app"
];
let choiceResponseCatItem = [" has some nicely written code",
" is a bit complicated",
" had some tricky problem's",
" is pretty amazing",
" alert(complicatedCode)",
" took some brainstorming",
" gave me a new appreciation Stack Overflow",
" definitely started with Hello World!",
"... npm run amazing-app"
];
let lastArrayNumCheck = 0;
let otherResponse = "";
let hoverText = "";
let currentResponse = "";
let menuSelector = "";
let currentChoice = [", always a good choice"];
$(".sf-menu .menu-item").mouseenter(function() {
console.log(waitForAnimation);
if (!waitForAnimation) {
typed.destroy();
if ($(this).hasClass("cat")) {
menuSelector = "cat";
currentChoice = choiceResponseCat;
}
if ($(this).hasClass("cat-item")) {
menuSelector = "cat-item";
currentChoice = choiceResponseCatItem;
}
if ($(this).hasClass("design")) {
menuSelector = "design";
currentChoice = [", all the other bits"];
}
if ($(this).hasClass("about")) {
menuSelector = "about";
currentChoice = [", more about me!"];
}
if ($(this).hasClass("other")) {
menuSelector = "other";
currentChoice = [", always a good choice"];
}
var newPhrase = Math.random() * currentChoice.length;
if (newPhrase == lastArrayNumCheck && newPhrase !== 0) {
newPhrase = 0;
lastArrayNumCheck = newPhrase;
} else if (newPhrase == 0) {
newPhrase = 1;
lastArrayNumCheck = newPhrase;
}
hoverText = $(this, menuSelector).find("a").first().text();
currentResponse = hoverText + currentChoice[Math.floor(newPhrase)];
typed = new Typed('#consoleText', {
strings: [
currentResponse
],
typeSpeed: 7,
backSpeed: 2,
loop: false
});
}
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment