Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
CodeMyUI / index.html
Created Jan 30, 2017
Ken Burns effect - pure css
View index.html
<div class="image-wrap">
<img src="https://unsplash.it/900/700">
</div>
View index.html
<div class="entries">
<div class="entry">
<div class="title">2011</div>
<div class="body">
<p>Neque sunt voluptatibus repellat pariatur ut enim. Eveniet rerum suscipit eveniet amet dignissimos. Doloremque et distinctio quod molestiae ut.</p>
</div>
</div>
<div class="entry">
<div class="title">2012</div>
<div class="body">
View external scripts
https://code.jquery.com/jquery-2.2.4.min.js
@CodeMyUI
CodeMyUI / index.html
Created Feb 21, 2018
YGC V2 Timeline
View index.html
<section id="cd-timeline" class="cd-container">
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture">
</div>
<div class="cd-timeline-content">
<h2>Penta Consulting</h2>
<div class="timeline-content-info">
<span class="timeline-content-info-title">
<i class="fa fa-certificate" aria-hidden="true"></i>
View Colored Stem.markdown
@CodeMyUI
CodeMyUI / index.html
Created Feb 25, 2018
Mobile Menu Animation
View index.html
<div class="page">
<div class="page__demo">
<div class="page__container">
<span class="page__name">Mobile Menu Animation</span>
<span class="page__hint">
Works better on mobile devices. The hamburger button is comfortably available for a lefty and righty.
</span>
<a href="https://www.youtube.com/watch?v=org6Tmfp3PQ" rel="noopener noreferrer" target="_blank">YouTube video with the coding practice</a>
</div>
</div>
View animated-svg-avatar.markdown

Animated SVG Avatar

Created a login form with an SVG avatar that responds to the input in the email field. Used the GSAP TweenMax library + GSAP's MorphSVG plugin for the animating.

Email validation is very simple and crude just for the purposes of getting this prototype working.

A Pen by Darin on CodePen.

License.

@CodeMyUI
CodeMyUI / index.html
Created Jan 8, 2020
Todost - Todo// forked
View index.html
<html lang="en" >
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-57635392-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-57635392-5');
</script>
@CodeMyUI
CodeMyUI / index.html
Created Dec 13, 2019
WebGL enhanced javascript drag slider (performance improved - bonus)
View index.html
<!-- div that will hold our WebGL canvas -->
<div id="canvas"></div>
<div id="content">
<h1 id="title">Skylines</h1>
<!-- drag slider -->
<div id="planes">