Skip to content

Instantly share code, notes, and snippets.

View hideya's full-sized avatar

hideya hideya

  • self-employed
  • tokyo
View GitHub Profile
@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';
window.addEventListener("load", function() {
var perfData = window.performance.timing;
var renderTime = perfData.domComplete - perfData.domLoading;
console.log(renderTime);
});
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');
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";
});
})();
}
document.addEventListener("DOMContentLoaded", function() {
var elems = document.getElementsByClassName("fadein-after-load");
for (var i = 0; i < elems.length; i++) {
(function() {
var elem = elems.item(i);
elem.style.transition = "";
elem.style.opacity = 0;
window.addEventListener("load", function() {
var duration = elem.getAttribute("data-duration");
duration = duration || "0.5s";
document.addEventListener("DOMContentLoaded", function() {
var elems = document.getElementsByClassName("fadeout-as-scroll");
for (var i = 0; i < elems.length; i++) {
(function() {
var elem = elems.item(i);
var wh = window.innerHeight;
var start = parseInt(elem.getAttribute("data-start"));
start = start || wh * 0.1;
var end = parseInt(elem.getAttribute("data-end"));
end = end || wh * 0.5;
document.addEventListener('DOMContentLoaded', function() {
if (calledWithin(60)) {
return;
}
var elems = document.getElementsByClassName('fadein-firsttime');
for (var i = 0; i < elems.length; i++) {
(function() {
var elem = elems.item(i);
elem.style.transition = '';
elem.style.opacity = 0;