pingu_98/cern-summer-webfest
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Animation

Browse source
This commit is contained in:
Francisco Pinto 2012-08-05 15:18:24 +02:00
parent 506dd1119f
commit 8df0425b93
11 changed files with 40 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
anim.htm
View file

@ -12,20 +12,26 @@
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" type="text/css" media="all" /> <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" type="text/css" media="all" />
<style> <style>
#animation {
width: 25%;
margin: 0 auto;
}
#animation {
margin: 0 auto;
width: 850px;
text-align: center;
}
</style> </style>
<body> <body>
<a class="btn" data-toggle="modal" href="#readmore" >Read more</a> <a class="btn" data-toggle="modal" href="#readmore" >Read more</a>
<div id="animation"> <div id="animation">
<ul id="frames"> <ul id="frames">
<li><img title="This is the first frame" src="animation/img1.png"> <li><img title="Two quarks are bound together by the strong force." src="img/quark_deconf/1.png">
<li><img title="This is the second frame" src="animation/img2.png"> <li><img title="As their distance increases, so does their attraction." src="img/quark_deconf/2.png">
<li><img title="This is the third frame" src="animation/img3.png"> <li><img title="More and more energy is stored in the force field." src="img/quark_deconf/3.png">
<li><img title="More and more energy is stored in the force field." src="img/quark_deconf/4.png">
<li><img title="More and more energy is stored in the force field." src="img/quark_deconf/5.png">
<li><img title="More and more energy is stored in the force field." src="img/quark_deconf/6.png">
<li><img title="... Until the energy is sufficient to create new particles!" src="img/quark_deconf/7.png">
<li><img title="This is the reason why we can never see colored objects alone. We call this confinement." src="img/quark_deconf/8.png">
</ul> </ul>
<div id="slider"></div> <div id="slider"></div>
@ -130,7 +136,7 @@ var anim = $('#frames').bxSlider({
$("#slider" ).slider({ $("#slider" ).slider({
value: 0, value: 0,
min: 0, min: 0,
max: 2, max: 7,
step: 1, step: 1,
slide: function(event, ui) { slide: function(event, ui) {
anim.goToSlide(ui.value); anim.goToSlide(ui.value);

26
chapter/the_strong_interaction.html
View file

@ -1,10 +1,34 @@
<style>
#animation {
margin: 0 auto;
width: 850px;
text-align: center;
}
</style>
<h1>The Strong Interaction</h1> <h1>The Strong Interaction</h1>
<div id="animation">
<ul id="frames">
<li><img title="Two quarks are bound together by the strong force." src="img/quark_deconf/1.png">
<li><img title="As their distance increases, so does their attraction." src="img/quark_deconf/2.png">
<li><img title="More and more energy is stored in the force field." src="img/quark_deconf/3.png">
<li><img title="More and more energy is stored in the force field." src="img/quark_deconf/4.png">
<li><img title="More and more energy is stored in the force field." src="img/quark_deconf/5.png">
<li><img title="More and more energy is stored in the force field." src="img/quark_deconf/6.png">
<li><img title="... Until the energy is sufficient to create new particles!" src="img/quark_deconf/7.png">
<li><img title="This is the reason why we can never see colored objects alone. We call this confinement." src="img/quark_deconf/8.png">
</ul>
<div id="slider"></div>
</div>
<p class="abstract">There must be some kind of force that glues together the quarks in the <p class="abstract">There must be some kind of force that glues together the quarks in the
proton, just like the electromagnetic force attaches the electron to proton, just like the electromagnetic force attaches the electron to
the atomic nucleus. And like for electromagnetism, there must be the atomic nucleus. And like for electromagnetism, there must be
messenger particle of this force, and also a kind of “charge”, called messenger particle of this force, and also a kind of “charge”, called
color, that will determine which particles take part in this golor, that will determine which particles take part in this
interaction and whether two particles will attract or repel each interaction and whether two particles will attract or repel each
other. This force is very different from electromagnetism: no particle other. This force is very different from electromagnetism: no particle
that has a color can exist freely, they must be in a bound system. The that has a color can exist freely, they must be in a bound system. The

BIN
img/quark_deconf/1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
img/quark_deconf/2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 127 KiB

BIN
img/quark_deconf/3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 120 KiB

BIN
img/quark_deconf/4.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 194 KiB

BIN
img/quark_deconf/5.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 211 KiB

BIN
img/quark_deconf/6.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 209 KiB

BIN
img/quark_deconf/7.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 207 KiB

BIN
img/quark_deconf/8.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 133 KiB

1
main.html
View file

@ -17,6 +17,7 @@
<link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="css/structure.css" rel="stylesheet"> <link href="css/structure.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" type="text/css" media="all" />
<script src="bootstrap/js/bootstrap.js"></script> <script src="bootstrap/js/bootstrap.js"></script>
</head> </head>