Skip to content

Instantly share code, notes, and snippets.

View khuongyolo's full-sized avatar
🏠
Working from home

Kuon Yolo khuongyolo

🏠
Working from home
0 followers · 1 following
  • 19:42 (UTC +09:00)
View GitHub Profile
@khuongyolo
khuongyolo / index.html
Created November 10, 2021 03:09
Scrolling Terrain and Shooting Stars
<canvas id="bgCanvas"></canvas>
@khuongyolo
khuongyolo / index.pug
Created January 29, 2022 09:03
[Pure CSS] - One page scroll
// Inputs
input(type="radio" name="item" checked)#section1
input(type="radio" name="item")#section2
input(type="radio" name="item")#section3
input(type="radio" name="item")#section4
// Navigation
nav.nav
- for(var i = 1; i < 5; i++)
@khuongyolo
khuongyolo / index.html
Created January 29, 2022 09:20
One Page Navigation CSS Menu
<div class="ct" id="t1">
<div class="ct" id="t2">
<div class="ct" id="t3">
<div class="ct" id="t4">
<div class="ct" id="t5">
<ul id="menu">
<a href="#t1"><li class="icon fa fa-bolt" id="uno"></li></a>
<a href="#t2"><li class="icon fa fa-keyboard-o" id="dos"></li></a>
<a href="#t3"><li class="icon fa fa-rocket" id="tres"></li></a>
<a href="#t4"><li class="icon fa fa-dribbble" id="cuatro"></li></a>
@khuongyolo
khuongyolo / fork-highlight-active-nav-link-on-page-scroll-plain-js.markdown
Created January 29, 2022 12:42
FORK: Highlight Active Nav Link On Page Scroll (Plain JS)

FORK: Highlight Active Nav Link On Page Scroll (Plain JS)

THIS IS A FORK: of the original by Danilo Bilanoski, updated to allow the sections to be placed inside a relative parent. See the JS file comments for details.

ORIGINAL: Simple Vanilla Javascript solution to highlight an active menu item / navigation link when scrolling the page without the need for jQuery. Idea is to watch scroll position and add a certain CSS class to active menu item when you scroll to corresponding section.

A Pen by khuongyolo on CodePen.

License.

@khuongyolo
khuongyolo / full-screen-responsive-scrolling-page.markdown
Created February 7, 2022 22:26
full-screen responsive scrolling page
@khuongyolo
khuongyolo / fullpage-js.markdown
Created February 9, 2022 01:59
fullPage.js
@khuongyolo
khuongyolo / css-filter-cards.markdown
Created February 10, 2022 13:45
CSS Filter Cards
@khuongyolo
khuongyolo / contact-us-ui-challenge.markdown
Created February 11, 2022 13:52
Contact Us - UI Challenge
@khuongyolo
khuongyolo / comic-style-border.markdown
Created February 12, 2022 04:10
"comic style" border
@khuongyolo
khuongyolo / index.html
Created February 12, 2022 04:35
Mechanical Keyboard
<head>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body>
<div class="keyboard">
<div class="row">
<div class="key key__esc">
<i data-feather="x"></i>
</div>
<div class="key key__symbols">