Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
web midterm
  • Loading branch information
@jzc16101
jzc16101 committed Mar 10, 2020
1 parent ee92f52 commit ce9e915
Show file tree
Hide file tree
Showing 11 changed files with 6,385 additions and 5,313 deletions.
101 changes: 101 additions & 0 deletions animated-card.html
View file
@@ -0,0 +1,101 @@
<!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/animated-card.css">
<script src="https://use.fontawesome.com/d4e127e2d0.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 -->
<div id='wrap'>
<input type='checkbox'>
<div class='back'>
<b>&larr;</b>
</div>
<div class='frame'>
<input checked='checked' id='rad1' name='rad' type='radio'>
<input id='rad2' name='rad' type='radio'>
<input id='rad3' name='rad' type='radio'>
<div class='nav'></div>
<div class='nav'></div>
<div class='nav'></div>
<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>
</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>
</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>
</div>
<div class='more'>
<b>&rarr;</b>
<b>&rarr;</b>
<b>&rarr;</b>
</div>
<div class='images'>
<div>
<div class='image'></div>
</div>
<div>
<div class='image'></div>
</div>
<div>
<div class='image'></div>
</div>
</div>
</div>
<div class='box'>
<div class='internal'>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Cras varius. Vivamus laoreet. Donec vitae sapien ut libero venenatis faucibus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl.</p>
<div class='image'></div>
</div>
<div class='internal'>
<p>Phasellus viverra nulla ut metus varius laoreet. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Duis lobortis massa imperdiet quam. Aenean vulputate eleifend tellus. Morbi mollis tellus ac sapien.</p>
<div class='image'></div>
</div>
<div class='internal'>
<p>Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Aenean commodo ligula eget dolor. Vestibulum fringilla pede sit amet augue. Fusce convallis metus id felis luctus adipiscing. Ut id nisl quis enim dignissim sagittis.</p>
<div class='image'></div>
</div>
</div>
</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>
16 changes: 16 additions & 0 deletions code.js
View file
@@ -0,0 +1,16 @@
window.addEventListener("load", function(){
var delay = 2;
var nodes = document.querySelectorAll
(".animate");
for(var i=0; i<nodes.length; i++){
var words = nodes[i].innerText.split(" ");
nodes[i].innerHTML = "";
for(var i2=0; i2<words.length; i2++){
var item = document.createElement("span");
item.innerText = words[i2];
var calc = (delay+((nodes.length + i2)/3));
item.style.animationDelay = calc+"s";
nodes[i].appendChild(item);
}
}
});
80 changes: 80 additions & 0 deletions css-animation-examples.html
View file
@@ -0,0 +1,80 @@
<!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-examples.css">
<script src="https://use.fontawesome.com/d4e127e2d0.js"></script>
<script src="https://kit.fontawesome.com/9c045b0ca9.js" crossorigin="anonymous"></script>
<script src="code.js"></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 -->
<div id="card"><a href="animated-card.html"><h1>Animated "Card"</h1></a></div>
<div class="tumble">
<h1 class="animate backwards flex3">Wait for It....</h1>
<h1 class="animate forwards flex3">Hi! My name is Jamison</h1>
<h1 class="animate mixed flex3">I love Web Design and Development</h1>
<style>
.animate span{
display: block;
position: relative;
text-align: center;
}
.animate.backwards > span{
animation: animateBackwards 1s ease-in-out
forwards;
}
.animate.forwards > span{
animation: animateForwards 1s ease-in-out
forwards;
}
.animate.mixed > span:nth-child(even){
animation: animateBackwards 1s ease-in-out
forwards;
}
.animate.mixed > span:nth-child(odd){
animation: animateForwards 1s ease-in-out
forwards;
}
@keyframes animateForwards {
from { top: 0; transform: rotate(0deg); }
to { top: .9em; transform: rotate(-15deg); }
}
@keyframes animateBackwards {
from { top: 0; transform: rotate(0deg); }
to { top: 1em; transform: rotate(25deg); }
}
</style>
</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>

0 comments on commit ce9e915

Please sign in to comment.