Skip to content

Instantly share code, notes, and snippets.

View hideya's full-sized avatar

hideya hideya

29 followers · 8 following
  • self-employed
  • tokyo
View GitHub Profile
@hideya
hideya / SVG-filter-shiny-metal-demo.html
Last active August 13, 2025 20:32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Filter Demo -- Bumpy Metal Surface</title>
<style>
* {
margin: 0;
padding: 0;
@hideya
hideya / simple-SVG-filter-examples.html
Created August 7, 2025 00:49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple SVG Filter Examples</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
@hideya
hideya / terminal-colors.js
Created August 6, 2025 06:17
console.log('\x1b[1mBright\x1b[0m');
console.log('\n')
// Basic foreground colors (30-37)
console.log('\x1b[30mBlack\x1b[0m');
console.log('\x1b[31mRed\x1b[0m');
console.log('\x1b[32mGreen\x1b[0m');
console.log('\x1b[33mYellow\x1b[0m');
console.log('\x1b[34mBlue\x1b[0m');
console.log('\x1b[35mMagenta\x1b[0m');
@hideya
hideya / smooth-scroll-anchors.js
Last active February 15, 2019 07:07
Automatically make all anchors to an ID'ed in-page element to smooth-scroll
// Automatically make all anchors to an ID'ed in-page element to smooth-scroll
window.addEventListener('load', function(event) {
var duration = 300; // ms
var bias = 0; // px
var header = document.getElementsByTagName('header')[0];
if (header) {
bias = -header.getBoundingClientRect().height - 40;
}
var anchors = document.getElementsByTagName("a");
@hideya
hideya / scroll-to-element.js
Created September 18, 2018 14:15
Smooth scroll to a specified DOM element
// based on https://gist.github.com/andjosh/6764939
function scrollToElem(target, duration) {
var start = window.pageYOffset;
var to = target.getBoundingClientRect().top;
var change = to - start;
var currentTime = 0;
var increment = 20;
function animateScroll(){
currentTime += increment;
@hideya
hideya / flex-wrap-anim.js
Last active April 25, 2023 05:49
CSS Flex Wrap Animation (code assumes no change in items except xy coords): https://codepen.io/hideya/pen/Jamabx
window.addEventListener('load', function(event) {
var targetClassName = 'flex-wrap-anim';
var defaultDuration = '0.3s';
var dummyList = [];
function addDummy(item, duration) {
var top = item.offsetTop;
var left = item.offsetLeft;
setTimeout(function() {
item.style.position = 'absolute';
@hideya
hideya / check-html-page-rendering-performance.js
Last active May 16, 2018 05:59
window.addEventListener("load", function() {
var perfData = window.performance.timing;
var renderTime = perfData.domComplete - perfData.domLoading;
console.log(renderTime);
});
@hideya
hideya / set-get-cookie.js
Last active May 16, 2018 03:51
@hideya
hideya / remain-scrolled-across-page-reload.js
Last active May 23, 2018 01:24
document.addEventListener("DOMContentLoaded", function() {
var storage = window.sessionStorage;
try {
if (window.location.pathname.includes('#')) {
storage.removeItem('scroll-x');
storage.removeItem('scroll-y');
return;
}
var x = storage.getItem('scroll-x');
var y = storage.getItem('scroll-y');
@hideya
hideya / fade-out-elements-after-page-load-completion.js
Last active May 16, 2018 03:48
document.addEventListener("DOMContentLoaded", function() {
var elems = document.getElementsByClassName("hide-after-load");
for (var i = 0; i < elems.length; i++) {
(function() {
var elem = elems.item(i);
window.addEventListener("load", function() {
elem.style.display = "none";
});
})();
}