Skip to content

Commit 3c9a02c

Browse files
robertuniqidrobertuniqid
committed
Added the Presentation
Someone requested the presentation to be included so they can use this easier.
1 parent 2bcc4a3 commit 3c9a02c

25 files changed

+20771
-0
lines changed

‎presentation/basic-demo.php‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<?php
2+
$effects = array(
3+
'fadeInUp', 'fadeInRight', 'fadeInDown', 'fadeInLeft', 'fadeInUpBig', 'fadeInRightBig', 'fadeInDownBig',
4+
'fadeInLeftBig',
5+
'zenFadeInUp', 'zenFadeInRight', 'zenFadeInDown', 'zenFadeInLeft', 'zenFadeInUpBig', 'zenFadeInRightBig', 'zenFadeInDownBig',
6+
'zenFadeInLeftBig',
7+
'bounceInUp', 'bounceInRight', 'bounceInDown', 'bounceInLeft', 'flipInX', 'flipInY',
8+
'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight',
9+
'pulse', 'swing', 'wobble', 'flash', 'tada'
10+
);
11+
$effectsOut = array(
12+
'hinge', 'fadeOutUp', 'fadeOutRight', 'fadeOutDown', 'fadeOutLeft',
13+
'fadeOutUpBig', 'fadeOutRightBig', 'fadeOutDownBig', 'fadeOutLeftBig',
14+
'bounceOutUp', 'bounceOutRight', 'bounceOutDown', 'bounceOutLeft',
15+
'flipOutX', 'flipOutY',
16+
'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight'
17+
);
18+
?>
19+
<!DOCTYPE html>
20+
<html lang="en">
21+
<head>
22+
<meta charset="utf-8">
23+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
24+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
25+
<meta name="description" content="">
26+
<meta name="author" content="">
27+
28+
<title>Story Box</title>
29+
30+
<!-- Bootstrap core CSS -->
31+
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
32+
33+
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
34+
<!--[if lt IE 9]>
35+
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
36+
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
37+
<![endif]-->
38+
39+
<link href="story-box/animate.css" rel="stylesheet" type="text/css">
40+
<link href="story-box/story-box-zen.css" rel="stylesheet" type="text/css">
41+
<script src="story-box/jquery.js"></script>
42+
<script src="bootstrap/js/bootstrap.min.js"></script>
43+
<script src="story-box/story-box.min.js"></script>
44+
45+
<script type="text/javascript">
46+
$(document).ready(function(){
47+
$('.scroll-to').click(function(event){
48+
event.preventDefault();
49+
$('html, body').animate({
50+
scrollTop: $($(this).attr('href')).offset().top
51+
}, 2000);
52+
});
53+
54+
var currentOffset = $('#theEffectsList').offset().top;
55+
56+
$(window).scroll(function(){
57+
58+
if(currentOffset < $(window).scrollTop() ) {
59+
$('#theEffectsList').css('position', 'fixed');
60+
$('#theEffectsList').css('top', '0');
61+
} else {
62+
$('#theEffectsList').css('position', 'static');
63+
$('#theEffectsList').css('top');
64+
}
65+
});
66+
});
67+
</script>
68+
</head>
69+
70+
<body>
71+
72+
<?php require_once('header.php');?>
73+
74+
<div class="jumbotron">
75+
<div class="container">
76+
<h2 class="text-primary text-center" data-sb="fadeInLeftBig" data-sb-hide="fadeOutUp">Story Box - Spartan Example</h2>
77+
78+
<hr/>
79+
80+
<h3 class="text-danger text-center" data-sb="fadeInLeftBig" data-sb-hide="fadeOutUp">PROOF OF Concept</h3>
81+
82+
<h3 class="text-center" data-sb="fadeInLeftBig" data-sb-hide="fadeOutUp">
83+
<span class="label label-danger"><?php echo count($effects) * 12 ?> Elements</span>
84+
With Effects Handled Easily With
85+
<span class="label label-success">30 MB RAM</span>
86+
</h3>
87+
88+
<h3 class="text-center text-success" data-sb="fadeInDownBig" data-sb-hide="fadeOutUp">Scroll Down, And Enjoy.</h3>
89+
</div>
90+
</div>
91+
92+
<div class="container" style="width: 95%;">
93+
<div class="row">
94+
<div class="col-md-2" style="">
95+
<h2><?php echo count($effects); ?> Effects</h2>
96+
<ul id="theEffectsList" class="nav nav-pills nav-stacked">
97+
<?php foreach($effects as $effect) : ?>
98+
<li><a class="scroll-to" href="#<?php echo $effect;?>-preview"><?php echo $effect;?></a></li>
99+
<?php endforeach;?>
100+
</ul>
101+
</div>
102+
<div class="col-md-10">
103+
<?php foreach($effects as $effect) : ?>
104+
<div class="row">
105+
<div class="col-md-12">
106+
<h2 id="<?php echo $effect;?>-preview" class="text-primary text-center"><?php echo $effect;?></h2>
107+
</div>
108+
109+
<div class="col-md-9">
110+
<div class="well" style="height:150px;background: #3498db;" data-sb="<?php echo $effect;?>" data-sb-hide="fadeOutUp"></div>
111+
<div class="well" style="height:150px;background: #e74c3c;" data-sb="<?php echo $effect;?>" data-sb-hide="fadeOutUp"></div>
112+
<div class="well" style="height:150px;background: #2ecc71;" data-sb="<?php echo $effect;?>" data-sb-hide="fadeOutUp"></div>
113+
<div class="well" style="height:150px;background: #9b59b6;" data-sb="<?php echo $effect;?>" data-sb-hide="fadeOutUp"></div>
114+
<div class="well" style="height:150px;background: #3498db;" data-sb="<?php echo $effect;?>" data-sb-hide="fadeOutUp"></div>
115+
<div class="well" style="height:150px;background: #e74c3c;" data-sb="<?php echo $effect;?>" data-sb-hide="fadeOutUp"></div>
116+
<div class="well" style="height:150px;background: #2ecc71;" data-sb="<?php echo $effect;?>" data-sb-hide="fadeOutUp"></div>
117+
<div class="well" style="height:150px;background: #9b59b6;" data-sb="<?php echo $effect;?>" data-sb-hide="fadeOutUp"></div>
118+
</div>
119+
120+
<div class="col-md-3">
121+
<div class="well" style="height:300px;background: #34495e;" data-sb="<?php echo $effect;?>" data-sb-hide="fadeOutUp"></div>
122+
<div class="well" style="height:300px;background: #7f8c8d;" data-sb="<?php echo $effect;?>" data-sb-hide="fadeOutUp"></div>
123+
<div class="well" style="height:300px;background: #34495e;" data-sb="<?php echo $effect;?>" data-sb-hide="fadeOutUp"></div>
124+
<div class="well" style="height:300px;background: #7f8c8d;" data-sb="<?php echo $effect;?>" data-sb-hide="fadeOutUp"></div>
125+
</div>
126+
</div>
127+
<?php endforeach;?>
128+
</div>
129+
</div>
130+
</div>
131+
<?php require_once('footer.php');?>
132+
</body>
133+
</html>

0 commit comments

Comments
 (0)