{"id":5667,"date":"2018-07-24T21:21:15","date_gmt":"2018-07-24T21:21:15","guid":{"rendered":"https:\/\/www.crimsondesigns.com\/blog\/?p=5667"},"modified":"2023-11-15T16:07:46","modified_gmt":"2023-11-15T16:07:46","slug":"subtle-animations-css-javascript","status":"publish","type":"post","link":"https:\/\/www.crimsondesigns.com\/blog\/subtle-animations-css-javascript\/","title":{"rendered":"Subtle Animations with CSS & JavaScript: Intro"},"content":{"rendered":"

Are you curious about adding subtle animations to your website? Wondering if there are practical uses for them? Not sure if you know enough about CSS and JavaScript to pull it off? Then this beginner web design tutorial is for you.
\n<\/p>\n

Why add animations to your website?<\/h2>\n

Since the human eye is attracted to motion, animations can be the perfect tool to\u00a0draw attention to specific parts of a web page.<\/i>\u00a0They can provide visual clues, giving visitors hints about actions you\u2019d like them to take. You can also add subtle effects to elements such as logos, icons and buttons or create visual storytelling elements with parallax scrolling.<\/p>\n

But, animations\u00a0in the wrong place or at the wrong speed can also annoy users and distract them from their goal. Too many JavaScript animations can also slow page load times. There is such a thing as “too much of a good thing.”<\/strong> So keep them subtle and add them sparingly.<\/p>\n

How do you add subtle animations to a web page?<\/h3>\n

First things first. Lets talk about file linking. Most likely, you will link a web page to a separate CSS file and\/or a separate Javascript (JS) file. There are many tutorials where you can copy the CODE and paste the CSS into a .css<\/strong> file and JavaScript into a .js<\/strong> file and then link your web page to those files. You don\u2019t necessarily have to understand the code completely. But you do have to link the files correctly. It can be frustrating to read through a whole tutorial, follow the steps and then end up with an animation that just doesn\u2019t work.\u00a0(NOTE: It could also be your web browser. Be sure to check more than one.)<\/p>\n

What about Page Speed?<\/h3>\n

Before you go ahead and add CSS and Javascript files to your website, you\u2019ll also want to keep CSS and Javascript optimization<\/strong> in the back of your mind. The more files you link to and the larger those files are, particularly Javascript files, the slower your web page will be. But there are ways to combine CSS files, combine JS files, minify them and link to them in efficient ways.<\/p>\n

READ:\u00a0How to Optimize CSS and JS for Faster Sites.<\/a>\u00a0<\/b><\/p>\n

Should you use CSS or JavaScript?<\/h3>\n

\"css3In the past, CSS was only used to change simple properties of elements in a web page such as color and size. But now that CSS3 has come along, we can utilize CSS transitions<\/strong> and animations<\/strong> in fun and practical ways.<\/p>\n

You can\u00a0add animated effects to icons such as “thumbs up” buttons or use them to show users the progress of an action they just took.<\/p>\n

The CSS3 Animation Cheat Sheet<\/a><\/strong> is a great resource with a set of plug-and-play animations. You can add the CSS style sheet to your website and apply the premade CSS rules to the HTML elements you want animated.<\/p>\n

CSS Animations versus Javascript Animations<\/h3>\n

\"JavaScriptWith CSS3, you can do simple animations without any JavaScript at all. They are fast and lightweight. JavaScript can be used to control those CSS animations and make them even better. JavaScript can handle things that CSS can\u2019t such as when you need to stop, pause, slow down or reverse an animation. JavaScript often manipulates the CSS of your document in some way.<\/p>\n

They can work together as a team.<\/p>\n

Javascript is especially useful for scroll-based animations where content sections gradually appear as a visitor scrolls down a web page. \u00a0CSS animations will automatically start without you doing anything, but if you want to wait until the visitor SCROLLS DOWN a web page and reaches a certain section, you will need to add some JavaScript.\u00a0A JavaScript component like ScrollReveal.js<\/a><\/strong> can be applied to specific containers on a web page so only those elements animate.<\/p>\n

The Nitty-Gritty Details of CSS Animations<\/h3>\n

You can add a CSS style sheet to your website, link to that stylesheet and apply a CSS rule to the HTML elements you want animated.<\/p>\n

But how?<\/strong><\/p>\n

You must first understand HTML elements\u00a0and CSS rules.<\/p>\n

Already comfortable with HTML elements and CSS rules?<\/h4>\n

Skip ahead to PART II: Beginning CSS3 Animations.<\/a><\/strong><\/p>\n

\n

HTML Elements in a Nutshell<\/h4>\n

Examples of HTML elements: \u00a0div, h1, p
\nExamples of elements as tags: <div>, <h1>, <p><\/strong>
\nAn element becomes a tag when we use the angle brackets around it.<\/p>\n

The <div<\/b>> tag is a container unit that often surrounds other page elements and divides the HTML<\/b> document into sections. Web designers can apply CSS styles to <div<\/b>> elements. You can animate a <div><\/strong>\u00a0and make it fade in or move into the page from the left or right. You can do the same things with a <p> <\/strong>(paragraph).<\/p>\n

But, you do not want to have ALL of your <div><\/strong> and <p><\/strong> elements fade in. Let’s just choose one. We’ll give it a class called .fadeInRight<\/span> to make it special.<\/p>\n

In our HTML document, we will write: <div class=”fadeInRight”><\/strong><\/p>\n

\"HTML<\/p>\n

NOTE:\u00a0The class<\/b> attribute specifies a class name for an element. The class<\/b> attribute is mostly used to point to a class<\/b> in a CSS style sheet. It can also be used by a JavaScript\u00a0to make changes to HTML<\/b> elements with a specified class<\/b>.<\/p>\n

In our CSS style sheet, we will write:<\/p>\n

\n
.fadeInRight {\n...you can insert code here to animate this div...\n}\n<\/pre>\n<\/div>\n
(Now only the <div> element you gave the class\u00a0.fadeInRight<\/strong> will be animated.)<\/p>\n
Next, we will connect our HTML file to our CSS style sheet with a <link><\/strong> tag in the <head><\/strong> section of the web page.<\/p>\n
\"HTML<\/p>\n
EXAMPLES:<\/strong><\/p>\n
 #1: <\/strong><link rel=”stylesheet” type=”text\/css” href=”style.css<\/strong>“><\/p>\n
#2: <\/strong><link rel=”stylesheet” type=”text\/css” href=”css\/style.css<\/strong>“><\/p>\n
In the first example, our CSS style sheet is called “style.css<\/strong>” and is placed at the same level in our file structure as our web page.\u00a0In the second example, the css style sheet is placed in a folder called “css<\/strong>“.<\/p>\n
CSS Style Sheets in a Nutshell<\/h3>\n