March 7, 2019 by Kayla

5 Code Resources to Use in Your Web Projects

Coding gives us the tool-set to create anything and everything our hearts and minds desire. While it is fun to play around with different types of code, it is good to have a resources of libraries you can use to bring that wow factor into your web projects. So here are my top 5 code libraries that I often use in all my website projects.

1. Hover.css

https://ianlunn.github.io/Hover/

A great collection of CSS3 powered hover effects that can be applied to any of your sites links, buttons, logos, SVG, featured images and so on. It is a go to staple of mine to give my links and buttons a extra special factor that is easy to add with a few HTML classes.

See the Pen Hover.css by Ian Lunn (@IanLunn) on CodePen.

2. Font Awesome

https://fontawesome.com/

If you are already a web programmer you most likely already know of or use Font Awesome but for those who don’t, this is your one stop shop for things icons. With the free version you have access to one version of every vector icon that they offer and for most that is more than enough. Once you are up and running with their library it is easy to add and alter the icon with size, colors, rotation, ext.

See the Pen Font Awesome Colored – Brand And Social Icons by Amey Raut (@ameyraut) on CodePen.

3. Scroll Out

https://scroll-out.github.io/

A effect used on many websites today is the animation that happen once a user scrolls down to the section. This could be a image sliding in from the left or a line of text that fades in. This JavaScript microlibrary does the work for you and detects scroll/resize changes in the browser and assigns attributes and live CSS Variables to the scrolling element and a list of targets. While this is one of the more complicated resources on this list, they provide easy to understand guides to help you through the process.

See the Pen Horizontal Scrolling with Scroll Out by Christopher Wallis (@notoriousb1t) on CodePen.

4. Animista (CSS Animations)

http://animista.net

A more unique resource, Animista allows you to create CSS animations with their front-end editor and will provide you with the necessary CSS class and keyframes you can place into your own project’s CSS file. Giving you easy animations to have that special wow factor on your site.

See the Pen Animista logo animation by Ana Travas (@anatravas) on CodePen.

5. Parallax.js

http://matthew.wagerfield.com/parallax/

The term ‘parallax’ became a big buzz word for anyone looking into web design & development. Usually when a client brings up parallax they are trying to describe parallax scrolling but one type that you will see every once and a while mentioned is parallax interactive image. This JavaScript library allows you to create layers which interact slightly different to mouse movement on the screen.

See the Pen #codepenchallange – Tribute to Ada Lovelace – Parallax interactive image by Kayla Wiest (@sakoi_) on CodePen.