Skip to content

Instantly share code, notes, and snippets.

View Thajas's full-sized avatar

Thajas

View GitHub Profile
@Thajas
Thajas / book-flip-page-turn.markdown
Created February 11, 2021 07:36
book flip page turn
@Thajas
Thajas / book-flip-page-turn.markdown
Created February 11, 2021 07:27
book flip page turn
@Thajas
Thajas / index.html
Created February 11, 2021 07:25
Rotating Words using CSS Animations
<body>
<header>
<h1>Rotating words using CSS Animations</h1>
</header>
<section class="wrapper">
<h2 class="sentence">Janie is a lovely girl and she is very
<div class="slidingVertical">
<span>Amazing.</span>
<span>Beautiful.</span>
@Thajas
Thajas / index.html
Created February 11, 2021 07:25
Pure CSS text basic animations
<body>
<div class='line'>
<h2 class='flipX'>flip vertical</h2>
</div>
<div class="line">
<h2 class='lineUp'>line up</h2>
</div>
<div class='line'>
<h2 class='flipY'>flip horizontal</h2>
</div>
@Thajas
Thajas / index.html
Created February 11, 2021 07:21
Rotating Words using CSS Animations
<body>
<header>
<h1>Rotating words using CSS Animations</h1>
</header>
<section class="wrapper">
<h2 class="sentence">Janie is a lovely girl and she is very
<div class="slidingVertical">
<span>Amazing.</span>
<span>Beautiful.</span>
@Thajas
Thajas / coin-flip-donate-button.markdown
Created February 11, 2021 07:17
Coin Flip Donate Button

Coin Flip Donate Button

A simple idea that ended up being really hard to pull off. No 3D elements or transformations are used in this experiment, only 2D elements and some clever math to give the illusion of a 3D coin with real thickness. I'm happy with the results given the limitations of HTML and CSS.

The coin flipping is actually randomized too -- if you press the button a few times you'll see.

A Pen by Cooper Goeke on CodePen.

License.

@Thajas
Thajas / image-scroll-on-hover.markdown
Created January 30, 2021 09:57
Image Scroll On Hover
@Thajas
Thajas / index.html
Created January 26, 2021 13:44
Voyage Slider | GSAP
<div class="app">
<div class="cardList">
<button class="cardList__btn btn btn--left">
<div class="icon">
<svg>
<use xlink:href="#arrow-left"></use>
</svg>
</div>
@Thajas
Thajas / daily-ui-003-landing-page.markdown
Created January 26, 2021 13:41
Daily UI #003 - Landing Page
@Thajas
Thajas / daily-ui-001-sign-up.markdown
Created January 26, 2021 13:38
Daily UI #001 - Sign Up