Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

css-bubbles-tutorial/index.html

Go to file
 
 
Cannot retrieve contributors at this time
329 lines (285 sloc) 15.7 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Bubbles Animation Tutorial</title>
<link href="css/bubble.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="bg-image">
<div class="content">
<h1>Css bubbles animation </h1>
<div id="bubble-wrap">
<div class="bubble one"></div>
<div class="bubble two"></div>
<div class="bubble three"></div>
<div class="bubble four"></div>
<div class="bubble five"></div>
<div class="bubble six"></div>
<div class="bubble seven"></div>
<div class="bubble eight"></div>
<div class="bubble nine"></div>
<div class="bubble ten"></div>
<div class="bubble eleven"></div>
<div class="bubble twelve"></div>
<div class="bubble thirteen"></div>
</div>
</div>
<div id="scroll" class="demo">
<a href="#bg-color"><span></span></a>
</div>
</div>
<div id="bg-color">
<div class="grid-container">
<header>
<h2>Basic Overview:</h2>
<ul>
<li>In order to create <b>CSS Animations</b>, we have to learn the basics of <code style="background-color: rgb(196, 223, 240); font-weight: bolder;">@keyframes</code> and it’s <b>animation properties</b>.</li>
<li> As you can see above, I used <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">@keyframes</code> for the bubbles, scroll arrow and the color-changing title. </li>
<li>Along with introducing each concept, I will provide examples from how the bubbles were created so we can understand CSS Animations along with a mini tutorial on creating the bubble animations!</li>
</ul>
<hr style=" border-top: 5px dashed rgb(152, 202, 233);">
<h2>Definitions:</h2>
<ol>
<li><b> Keyframes</b> - define the stages and styles of the animation.</li>
<li><b> Animation Properties</b> - assign the <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">@keyframes</code> to a specific CSS element and define <em>how</em> it is animated.
</li>
</ol>
</header>
<nav>
<h3>Let’s talk about <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">@keyframes</code> :</h3>
<p><code style="background-color: rgb(166, 211, 240);font-weight: bolder;">@keyframes</code> properties are:</p>
<ul style="text-align: center;">
<li> <b>A name</b> of our choosing (<b><em>bubblesAnimation</em></b> in this case).</li>
<li><b>Stages:</b> <em>0%-100%</em>; from <em>(starting point 0%)</em> and to <em>(ending point 100%).</em></li>
<li><b>CSS styles:</b> the style that you would like to apply for each stage.</li>
</ul>
<figure>
<figcaption style="text-align: center;"><em>*Click on image to enlarge*</em></figcaption>
</figure>
<img id="myImg" src="img/keyframes.jpg" alt="screenshot" />
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">&times;</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01" alt="modal">
</div>
<figure>
<figcaption><b>*Underwater bubbles usually move upwards so if you are doing an outdoor scene, then you can switch the numbers so the bubbles move downwards!</b></figcaption>
</figure>
<p>As you see the bubbles start out at <b>0%</b> towards the bottom of the aquarium background image, hence their starting position is <b>70px</b> from the top <em>(also can use %)</em>. <b>100%</b> is the ending point where the bubbles disappear from the screen so a negative <b>100%</b> margin-top indicates this action.</p>
<hr style=" border-top: 5px dashed rgb(152, 202, 233);">
<p>Adding another <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">@keyframes</code> for floating effect:</p>
<img id="sides" src="img/sides.jpg" alt="screenshot" />
<p id="para">Each bubble will sway side to side from <b>0% to 100%</b> over a space of <b>50px.</b> This example uses <b>margin-left</b> but you can also do <b>margin-right</b> if you want. If I were to set a larger px size like <b>100px</b> for example, then the bubbles would be swaying very widely.</p>
<p>If we don't do this, then the bubbles will just float in a straight line with no side movement.</p>
</nav>
<article>
<h3>Let’s talk about <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">animation</code> properties:</h3>
<p>Animation properties must be added in order for your animation to work. Animation properties do two things:</p>
<ol>
<li>They assign the <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">@keyframes</code> to the elements that you want to animate.</li>
<li>They define <em>how</em> it is animated.</li>
</ol>
<h3>Animation properties:</h3>
<ul>
<li><code style="background-color: rgb(196, 223, 240);font-weight: bolder;"> animation-name</code> <b>: </b>
<code> @keyframes</code> name (I did <b><em>bubblesAnimation</em></b>).</li>
<li><code style="background-color: rgb(196, 223, 240);font-weight: bolder;"> animation-duration</code> <b>:</b> the time frame length, the total duration of the animation from start to the end. </li>
<li><code style="background-color: rgb(196, 223, 240);font-weight: bolder;"> animation-timing-function</code><b>: </b> sets the animation speed ( <em>linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier </em>).</li>
<li><code style="background-color: rgb(196, 223, 240);font-weight: bolder;"> animation-delay</code> <b>: </b> the delay before our animation will start. </li>
<li><code style="background-color: rgb(196, 223, 240);font-weight: bolder;"> animation-iteration-count</code> <b>: </b> how many times it will iterate through animation.</li>
<li><code style="background-color: rgb(196, 223, 240);font-weight: bolder;"> animation-direction</code> <b>: </b> gives you the ability to change the loop direction, from start to end, or from end to start, or both.</li>
</ul>
</article>
<div class="shorthand">
<h3><b>Shorthand Syntax:</b></h3>
<p>This is the animation property shorthand order (as I used for the bubbles) for a more concise and organized code structure: </p>
<p style="background-color: rgb(216, 215, 215); padding: 30px;">
<code>animation: <b>[animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction];</b></code>
</p>
<p><b>Example using syntax for one of the bubbles:</b></p>
<figure>
<figcaption style="text-align: center;"><em>*Click on image to enlarge*</em></figcaption>
</figure>
<img id="short" src="img/short.jpg" alt="screenshot"/>
<!-- The Modal -->
<div id="myModel" class="model">
<!-- The Close Button -->
<span class="closee">&times;</span>
<!-- Modal Content (The Image) -->
<img class="model-content" id="img02" alt="modal">
</div>
<p><b>Code explanation:</b></p>
<ul>
<li>The animation will run for <b>35s</b> with a <b>2s</b> animation delay before it starts. </li>
<li>The <b>timing functions</b> of the bubbles are <em>linear</em> as they move upwards at a constant rate and I set the <b>iteration count</b> to <em>infinite</em> as it will continue to play over and over.</li>
<li> The side to side movement of the bubbles is labeled as <em><b>sides</b></em> which is separated with a comma as it is another keyframe besides <b><em>bubblesAnimations</em></b>. </li>
<li><em><b>Ease-in-out</b></em> means the bubbles will start slowly, speed up, and then slow down towards the end. </li>
<li><b>Alternate</b> means the animation will play from beginning to end, then back to the beginning, and so on.</li>
<li>The bubble is scaled <b>2%</b> to the <em>left</em> and <b>5%</b> from the <em>top</em> and other bubbles have varying positions based on your preference.</li>
<li>The bubble size is determined in the <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">transform</code> property. I scaled this one to <b>(0.27)</b> (this is a very tiny bubble while my largest one is scaled at <b>(0.9)</b>).</li>
</ul>
</div>
<div class="vendor">
<h4><b>Adding Vendor Prefixes:</b></h4>
<p>Also you probably noticed the <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">-webkit-</code> and <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">-moz-</code> prefixes which have identical code to the <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">animation</code> prefix. These are just browser-specific prefixes for browser support:</p>
<ul>
<li>Chrome & Safari: <code style="background-color: rgb(196, 223, 240);font-weight: bolder;"> -webkit-</code></li>
<li>Firefox: <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">-moz-</code></li>
<li>Opera: <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">-o-</code></li>
<li>Internet Explorer: <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">-ms-</code></li>
</ul>
</div>
<div class="classes">
<h4 style="text-align: center;"><b>Bubble classes in HTML:</b></h4>
<img id="div" src="img/class.jpg" alt="screenshot"/>
<p>I choose to have 13 different classes for the bubbles but it is up to you how many bubbles your would like! </p>
</div>
<div class="wrap">
<h4 style="text-align: center;"><b>Bubble wrap in HTML:</b></h4>
<img id="wrap" src="img/wrap.jpg" alt="screenshot"/>
<p>The <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">z-index</code> property set to <b>-1</b> ensures that our bubbles will appear behind our main title.
</div>
<div class="final">
<h3>Shadows, shape and dimensions of the Bubble:</h3>
<figure>
<figcaption style="text-align: center;"><em>*Click on image to enlarge*</em></figcaption>
</figure>
<img id="final" src="img/final.jpg" alt="screenshot"/>
<!-- The Modal -->
<div id="myMode" class="mode">
<!-- The Close Button -->
<span class="closeee">&times;</span>
<!-- Modal Content (The Image) -->
<img class="mode-content" id="img03" alt="modal">
</div>
<p>The last step is design our bubbles and make them look pretty!
As you can see, we set a <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">class="bubble"</code> to every bubble so this piece of code will apply to each one of them. </p>
<p><b>Code explanation:</b></p>
<ul>
<li>The <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">border-radius</code> is set to <b>50%</b> for the round shape. </li>
<li>The <b>height</b> and <b>width</b> is 200px by 200px (although all are scaled to be different sizes, this just makes sure we get a perfect circle).</li>
<li>The <code style="background-color: rgb(196, 223, 240);font-weight: bolder;">box-shadow</code> is set to a rgba color and the shadow around the bubbles is a greyish color to give more definition.</li>
<li>The <b>inset</b> function is great to add an inner shadow for the bubble. I went for a light lavender shade for a reflection complementing the colorful aquarium background.</li>
</ul>
</div>
<main>
<h4>Works cited and helpful articles:</h4>
<ul>
<li> <a href="https://thoughtbot.com/blog/css-animation-for-beginners" target="blank">
<em>CSS Animation for beginners</em></a>
</li>
<li> <a href="https://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation--cms-21068" target="blank">
<em>A Beginner’s Introduction to CSS Animation</em></a>
</li>
<li> <a href="https://www.w3schools.com/css/css3_animations.asp" target="blank">
<em>CSS Animations- w3schools.com</em></a>
</li>
<li> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations" target="blank">
<em>CSS Animations- developer.mozilla.org</em></a>
</li>
<li> <a href="https://www.freecodecamp.org/news/a-simple-css-animation-tutorial-8a35aa8e87ff/" target="blank">
<em>A Simple CSS Animation Tutorial</em></a>
</li>
<li> <a href="https://flaviocopes.com/css-animations/" target="blank">
<em>A CSS Animations Tutorial</em></a>
</li>
<li> <a href="https://css-tricks.com/almanac/properties/a/animation/" target="blank">
<em>CSS-tricks.com</em></a>
</li>
</ul>
</main>
<footer>
<h4>Video tutorials and inspiration for CSS bubbles:</h4>
<ul>
<li> <a href="https://www.youtube.com/watch?v=QtDwAcHDVfw&t=368s" target="blank">
<em>Youtube tutorial (7 min</em></a>
</li>
<li> <a href="https://www.youtube.com/watch?v=ETXba6QOzYg&t=180s" target="blank">
<em>Youtube tutorial (15 min)</em></a>
</li>
<li> <a href="https://www.youtube.com/watch?v=1fawYSmTdcU" target="blank">
<em>Youtube tutorial (7 min)</em></a>
</li>
<li> <a href="https://www.youtube.com/watch?v=zHUpx90NerM&t=275s" target="blank">
<em>CSS Animation Crash Course (36 min)</em></a>
</li>
<li> <a href="https://codepen.io/bh/pen/JBlCc" target="blank">
<em>CodePen</em></a>
</li>
<li> <a href="https://codepen.io/matchboxhero/pen/LzdgOv" target="blank">
<em>CodePen</em></a>
</li>
<li> <a href="https://codepen.io/Mark_Bowley/pen/mEtqj" target="blank">
<em>CodePen</em></a>
</li>
<li> <a href="https://codepen.io/jonitrythall/pen/bivaG" target="blank">
<em>CodePen</em></a>
</li>
</ul>
</footer>
<div class="mahnoor">
<p style="text-align: center;"> DMD 3470 &copy; Mahnoor Afteb</p>
</div>
</div>
</div>
<!--JavaScript for Modal Images!-->
<script>
///////////////////////////////////////////////////////
// First modal image on Keyframe//
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
/*captionText.innerHTML = this.alt;*/
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
///////////////////////////////////////////////////////
// Second modal image on Shorthand syntax//
var model = document.getElementById("myModel");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("short");
var modelImg = document.getElementById("img02");
img.onclick = function(){
model.style.display = "block";
modelImg.src = this.src;
/*captionText.innerHTML = this.alt;*/
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closee")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
model.style.display = "none";
}
///////////////////////////////////////////////////////
// Third modal image on Dimensions of bubble//
var mode = document.getElementById("myMode");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("final");
var modeImg = document.getElementById("img03");
img.onclick = function(){
mode.style.display = "block";
modeImg.src = this.src;
/*captionText.innerHTML = this.alt;*/
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeee")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
mode.style.display = "none";
}
</script>
</body>
</html>