Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
updated midterm
  • Loading branch information
@jzc16101
jzc16101 committed Mar 10, 2020
1 parent ce9e915 commit eff263d
Show file tree
Hide file tree
Showing 10 changed files with 822 additions and 22 deletions.
21 changes: 15 additions & 6 deletions animated-card.html
View file
Expand Up @@ -40,16 +40,25 @@
<div class='indicator'></div>
<div class='inner'>
<div class='content'>
<h1 data-splitting='chars'>Nulla facilisi maecenas malesuada</h1>
<p>Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Integer tincidunt. Praesent turpis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit.</p>
<h1 data-splitting='chars'>Awesome CSS Animation</h1>
<p>This animation consists of a lot of transition and transform properties as discussed on "Defining CSS Animations". For example:(On next tab)</p>
</div>
<div class='content'>
<h1 data-splitting='chars'>Pellentesque commodo eros</h1>
<p>Morbi ac felis. Sed aliquam ultrices mauris. Quisque id odio. Cras sagittis. Fusce vulputate eleifend sapien.</p>
<h1 data-splitting='chars'>Awesome CSS Animation</h1>
<p>body #wrap {
-webkit-transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-delay: 2.16s;
transition-delay: 2.16s;
-webkit-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}</p>
</div>
<div class='content'>
<h1 data-splitting='chars'>Fusce risus nisl viverra</h1>
<p>Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Quisque id odio. Fusce fermentum.</p>
<h1 data-splitting='chars'>Awesome CSS Animation</h1>
<p>Hi again, its me!</p>
</div>
<div class='more'>
<b>&rarr;</b>
Expand Down
134 changes: 134 additions & 0 deletions css-animation-examples.html
View file

Large diffs are not rendered by default.

85 changes: 85 additions & 0 deletions css-animation-resources.html
View file
@@ -0,0 +1,85 @@
<!doctype html>
<html class="no-js" lang="">

<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/css-animation-resources.css">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/d4e127e2d0.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://kit.fontawesome.com/9c045b0ca9.js" crossorigin="anonymous"></script>

<meta name="theme-color" content="#fafafa">
</head>

<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->

<!-- Add your site or application content here -->
<header>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<div class="logo">CSS Animations</div>
<ul>
<li><a href="css-showcase-midterm.html">Defining CSS Animations</a></li>
<li><a href="css-animation-examples.html">CSS Animation Examples</a></li>
<li><a href="#">Resources</a></li>
</ul>
</nav>
</header>
<div id="dadbod">
<div id="white">
<h1>CSS Animation Resources</h1>
<a href="https://www.w3schools.com/css/css3_animations.asp"><h2>W3Schools.com</h2></a>
<p>Learn the basic principles of css animations. Try some out yourself with their examples and exercises. The topics that are covered include:</p>
<ul>
<li>@keyframes</li>
<li>animation-name</li>
<li>animation-duration-duration</li>
<li>animation-delay</li>
<li>animation-iteration-count</li>
<li>animation-direction</li>
<li>animation-timing-function</li>
<li>animation-fill-mode</li>
<li>animation</li>
</ul>
<a href="https://www.youtube.com/channel/UCRthRrv06q1iOl86-tTKJhg/featured"><h2>RedStapler on Youtube</h2></a>
<p>I found out about this Youtuber while conducting research for this project. Really great tutorials on not only CSS but web design and programming in general.</p>
<a href="https://www.creativebloq.com/inspiration/css-animation-examples"><h2>CreativeBloq.com</h2></a>
<p>Great resource for me on this project. There are 24 unique and really cool CSS animations. Each animation allows you to view not only the code but a website that is using it. Some even have a description underneath with a tutorial of how to do it yourself.</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><h2>MDN Web Docs</h2></a>
<P>Of course I had to use MDN. Similar to W3Schools but without the ability to try it yourself.</P>
<a href="https://css-tricks.com/almanac/properties/a/animation/"><h2>CSS-tricks.com</h2></a>
<P>Very extensive resource on CSS animations. Examples include link to edit code on CodePen. More resources available on the page as well as the browsers that support CSS animations.</P>
</div>
</div>
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>

</html>
19 changes: 10 additions & 9 deletions css-showcase-midterm.html
View file
Expand Up @@ -31,20 +31,21 @@
<div class="logo">CSS Animations</div>
<ul>
<li><a href="css-showcase-midterm.html">Defining CSS Animations</a></li>
<li><a href="#">CSS Animation Examples</a></li>
<li><a href="#">Resources</a></li>
<li><a href="css-animation-examples.html">CSS Animation Examples</a></li>
<li><a href="css-animation-resources.html">Resources</a></li>
</ul>
</nav>
<div class="section" id="grey">
<div class=greyhalf1>
<h1>Defining CSS Animations</h1>
<p>Web Developers use CSS to animate HTML elements. "An animation lets an element gradually change from one style to another.<br>
<p>Web Developers can use CSS to animate HTML elements.</p>
<h2 id="quote">"An animation lets an element gradually change from one style to another.<br>

You can change as many CSS properties you want, as many times you want.<br>

To use CSS animation, you must first specify some keyframes for the animation.<br>

Keyframes hold what styles the element will have at certain times (w3schools)."</p>
Keyframes hold what styles the element will have at certain times (w3schools)."</h2>
</div>
<div class="smiley">
<div class="emoji emoji--yay">
Expand Down Expand Up @@ -211,9 +212,9 @@
<p>You can use percentages and "from-to" statements in the @keyframes rule.</p>
<p>The <strong>animation-delay</strong> property creates a delay for the start of the animation.</p>
<p> The <strong>animation-iteration-count</strong> property specifies how many times the animation will run.</p>
<p>The <strong>animation-direction</strong>> property can be played in <strong>reverse</strong>, <strong>normal</strong>, <strong>alternate</strong>(played forwards then backwards), or <strong>alternate-reverse</strong>(played backwards then forwards).</p>
<p>The <strong>animation-direction</strong> property can be played in <strong>reverse</strong>, <strong>normal</strong>, <strong>alternate</strong>(played forwards then backwards), or <strong>alternate-reverse</strong>(played backwards then forwards).</p>
<p>The <strong>animation-timing-function</strong> property specifies the speed curve of the animation. The values of the property can be <strong>ease</strong>(slow start, then fast, then slow end), <strong>linear</strong>(same speed all the way), <strong>ease-in</strong>, <strong>ease-out</strong>, <strong>ease-in-out</strong>(slow start and end), or <strong>cubic-bezier(n,n,n,n)</strong>(custom values).</p>
<p>The pictures below includes a new property called <strong>animation-fill-mode</strong> with a value of <strong>forwards</strong>. Other values can be <strong>none</strong>(default), <strong>backwards</strong>(element will inherit style values set by first keyframe), or <strong>both</strong>.</p>
<p>A property called <strong>animation-fill-mode</strong> determines the element style when the animation is not playing. Values can be <strong>forwards</strong>, <strong>none</strong>(default), <strong>backwards</strong>(element will inherit style values set by first keyframe), or <strong>both</strong>.</p>
<p>A shortcut to using these properties is the shorthand version:</p>
<img src="img/shorthand1.PNG">
<img src="img/shorthand2.PNG">
Expand All @@ -238,15 +239,15 @@
@keyframes stretch {
0% {
transform: scale(.3);
background-color: red;
background-color: #00ff00;
border-radius: 100%;
}
50% {
background-color: orange;
background-color: #ff00ff;
}
100% {
transform: scale(1.5);
background-color: yellow;
background-color: #0000ff;
}
}
</style>
Expand Down
196 changes: 192 additions & 4 deletions css/css-animation-examples.css
View file
Expand Up @@ -100,26 +100,214 @@
* {
box-sizing: border-box;
}
/* Beginning of Menu */
nav{
background: #0082e6;
height: 80px;
width: 100%;
}
div.logo {
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: black;
font-size: 17px;
text-transform: uppercase;
padding: 7px 13px;
border-radius: 3px;
}
a:hover {
background: #1b9bff;
transition: .5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;

}
@media (max-width: 1100px) {
div.logo {
font-size:30px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
@media (max-width: 1100px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
a:hover, a.active {
background: none;
color: #0082e6;
}
#check:checked ~ ul {
left: 0;
}
}
/* End of Menu */
h1 {
margin: none;
}
#card {
width: 10%;
margin: auto;
width: 100%;
background-color: #ff9900;
}
#card h1 {
margin: auto;
}
.tumble {
width: 100%;
background-color: #06dbfb;
padding: 100px;
background-image: url("../img/background.png");
background-size: cover;
background-repeat: no-repeat;
}
.tumble h1 {
font-size: 30px;
border: solid 1px black;
}
.flex3 {
width: 30%;
margin: auto;
color: white;
}
/* End of Tumbling Letters */
/*Beginning of writing text */
.container {
background-color: #232323;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
min-height: 30em;
}
.container svg {
max-width: 45rem;
width: 100%;
height: auto;
fill: none;
stroke: white;
stroke-width: 8;
}
.container svg path {
stroke-dasharray: 1500;
stroke-dashoffset: -1500;
}
.container svg path:nth-of-type(1) {
-webkit-animation: draw 500ms 250ms forwards;
animation: draw 500ms 250ms forwards;
}
.container svg path:nth-of-type(2) {
-webkit-animation: draw 500ms 500ms forwards;
animation: draw 500ms 500ms forwards;
}
.container svg path:nth-of-type(3) {
-webkit-animation: draw 500ms 750ms forwards;
animation: draw 500ms 750ms forwards;
}
.container svg path:nth-of-type(4) {
-webkit-animation: draw 500ms 1000ms forwards;
animation: draw 500ms 1000ms forwards;
}
.container svg path:nth-of-type(5) {
-webkit-animation: draw 500ms 1250ms forwards;
animation: draw 500ms 1250ms forwards;
}
.container svg path:nth-of-type(6) {
-webkit-animation: draw 500ms 1500ms forwards;
animation: draw 500ms 1500ms forwards;
}
.container svg path:nth-of-type(7) {
-webkit-animation: draw 500ms 1750ms forwards;
animation: draw 500ms 1750ms forwards;
}
.container svg path:nth-of-type(8) {
-webkit-animation: draw 500ms 2000ms forwards;
animation: draw 500ms 2000ms forwards;
}
.container svg path:nth-of-type(9) {
-webkit-animation: draw 500ms 2250ms forwards;
animation: draw 500ms 2250ms forwards;
}
.container svg path:nth-of-type(10) {
-webkit-animation: draw 500ms 2500ms forwards;
animation: draw 500ms 2500ms forwards;
}
.container svg path:nth-of-type(11) {
-webkit-animation: draw 500ms 2750ms forwards;
animation: draw 500ms 2750ms forwards;
}
.container svg path:nth-of-type(12) {
-webkit-animation: draw 500ms 3000ms forwards;
animation: draw 500ms 3000ms forwards;
}
.container svg path:nth-of-type(13) {
-webkit-animation: draw 500ms 3250ms forwards;
animation: draw 500ms 3250ms forwards;
}
.container svg path:nth-of-type(14) {
-webkit-animation: draw 500ms 3500ms forwards;
animation: draw 500ms 3500ms forwards;
}
.container svg path:nth-of-type(15) {
-webkit-animation: draw 500ms 3750ms forwards;
animation: draw 500ms 3750ms forwards;
}

@-webkit-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}

@keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
/* End of Writing text */
/* ==========================================================================
Helper classes
========================================================================== */
Expand Down

0 comments on commit eff263d

Please sign in to comment.