30-days-of-code
A code challenge where I code everyday for a month and learn new design tricks/animations everyday!
DAY 1
21 July 2017
THE PARALLAX SCROLLING EFFECT
Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.
DAY 2
22 July 2017
3D HOVER PLANE EFFECT
The element seems to be moving back and forth while hovering over the screen.
DAY 3
23 July 2017
PAPER CUT-OUT EFFECT
Text effect which appears like a paper cut-out.
DAY 4
24 July 2017
TEXT CLIPPING MASK
Or knockout text.
DAY 5
25 July 2017
TWINKLING STARS
Stars twinkling in the background using jQuery.
DAY 6
26 July 2017
3D TEXT
Typography effect to give text a 3rd dimension using multiple shadows. Also, how to outline text in a similar fashion.
DAY 7
27 July 2017
NEON TEXT
It is what it sounds like, neon!
DAY 8
28 July 2017
CLOCK
Digital clock using JavaScript's date object.
DAY 9
29 July 2017
HTML5 AUDIO
How to add background music to your websites using html5 audio.
DAY 10
30 July 2017
MAXIMIZE-MINIMIZE
Tab maximize, minimize and close effect!
DAY 11
31 July 2017
PARTICLES.JS
A lightweight JavaScript library by Vincent Garreau for creating particles.
DAY 12
1 August 2017
HTML5 DOM INPUT COLOR
Color picker input object.
DAY 13
2 August 2017
BASIC CALCULATOR
Basic calculator in JavaScript.
DAY 14
3 August 2017
SKETCHPAD
A very very very basic sketchpad.
DAY 15
4 August 2017
GLITCH
Glitchy text using css animations.
DAY 16
5 August 2017
POPUP
Popup on button click.
DAY 17
6 August 2017
BLUR
Text blur effect using text-shadow property.
DAY 18
7 August 2017
DROPDOWN MENU
Menu drops down on button click.
DAY 19
8 August 2017
GOOGLE CHARTS
Interactive charts and data tools.
DAY 20
9 August 2017
TOOLTIP
The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element.
DAY 21
10 August 2017
TRIANGLIFY.JS
Algorithmically generated triangle art.
DAY 22
11 August 2017
IMAGE MAGNIFICATION
Image magnification on hover.
DAY 23
12 August 2017
ELEGANT SHADOW
Text shadow effect.
DAY 24
13 August 2017
CARD FOLD DOWN
Card Fold Down Effect with Dynamic Height.
DAY 25
14 August 2017
TABS
Tabs are a great way of grouping lots of content into a very small space.
DAY 26
15 August 2017
PRELOADER
Page preloader icon.
DAY 27
16 August 2017
ACCORDION
Accordions are useful when you want to toggle between hiding and showing large amount of content.
DAY 28
17 August 2017
SIDE NAVIGATION BAR
Navigation bar which slides in from left.
DAY 29
18 August 2017
ANIMATED SIGNATURE
Animating Your Own SVG Signature.
DAY 30
19 August 2017
ANIMATED CUBE
Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser.