Skip to content

Commit 4c33c4b

Browse files
alvarotrigoalvarotrigo
committed
- Examples: added 2 more examples
1 parent 2b8c6b1 commit 4c33c4b

File tree

2 files changed

+226
-0
lines changed

2 files changed

+226
-0
lines changed

‎examples/activeSlide.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>Continuous scrolling - fullPage.js</title>
7+
<meta name="author" content="Matthew Howell" />
8+
<meta name="description" content="fullPage continuous scrolling demo." />
9+
<meta name="keywords" content="fullpage,jquery,demo,scroll,loop,continuous" />
10+
<meta name="Resource-type" content="Document" />
11+
12+
13+
<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
14+
<link rel="stylesheet" type="text/css" href="examples.css" />
15+
16+
<!--[if IE]>
17+
<script type="text/javascript">
18+
var console = { log: function() {} };
19+
</script>
20+
<![endif]-->
21+
22+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
23+
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
24+
25+
<script type="text/javascript" src="../jquery.fullPage.js"></script>
26+
<script type="text/javascript" src="examples.js"></script>
27+
<script type="text/javascript">
28+
$(document).ready(function() {
29+
$('#fullpage').fullpage({
30+
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
31+
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
32+
menu: '#menu',
33+
});
34+
});
35+
</script>
36+
37+
</head>
38+
<body>
39+
40+
<ul id="menu">
41+
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First slide</a></li>
42+
<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
43+
<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
44+
</ul>
45+
46+
<div id="fullpage">
47+
<div class="section " id="section0">
48+
<h1>fullPage.js</h1>
49+
<p>Continuous Scrolling Enabled</p>
50+
<img src="imgs/fullPage.png" alt="fullPage" />
51+
</div>
52+
<div class="section active" id="section1">
53+
<div class="slide" id="slide1">
54+
<div class="intro">
55+
<h1>Around the world scrolling</h1>
56+
<p>Go to the first section and scroll up or to the last one and scroll down to see how it works.</p>
57+
</div>
58+
</div>
59+
<div class="slide active" id="slide2">
60+
<h1>Slide 2</h1>
61+
</div>
62+
<div class="slide" id="slide3">
63+
<h1>Slide 3</h1>
64+
</div>
65+
66+
</div>
67+
<div class="section" id="section2">
68+
<div class="intro">
69+
<h1>Scroll Down</h1>
70+
<p>And it will animate down to the first section</p>
71+
</div>
72+
</div>
73+
</div>
74+
75+
</body>
76+
</html>

‎examples/callbacks2.html

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>Callbacks - fullPage.js</title>
7+
<meta name="author" content="Alvaro Trigo Lopez" />
8+
<meta name="description" content="fullPage callback function." />
9+
<meta name="keywords" content="fullpage,jquery,demo,callbac,function,event" />
10+
<meta name="Resource-type" content="Document" />
11+
12+
13+
<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
14+
<link rel="stylesheet" type="text/css" href="examples.css" />
15+
16+
<!--[if IE]>
17+
<script type="text/javascript">
18+
var console = { log: function() {} };
19+
</script>
20+
<![endif]-->
21+
22+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
23+
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
24+
25+
<script type="text/javascript" src="../vendors/scrolloverflow.js"></script>
26+
27+
<script type="text/javascript" src="../jquery.fullPage.js"></script>
28+
<script type="text/javascript" src="examples.js"></script>
29+
<script type="text/javascript">
30+
$(document).ready(function() {
31+
$('#fullpage').fullpage({
32+
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
33+
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
34+
menu: '#menu',
35+
afterLoad: function(anchorLink, index){
36+
37+
//section 2
38+
if(index == 2){
39+
//moving the image
40+
$('#section1').find('img').delay(500).animate({
41+
left: '0%'
42+
}, 1500, 'easeOutExpo');
43+
44+
$('#section1').find('p').first().fadeIn(1800, function(){
45+
$('#section1').find('p').last().fadeIn(1800);
46+
});;
47+
48+
}
49+
50+
//section 3
51+
if(anchorLink == '3rdPage'){
52+
//moving the image
53+
$('#section2').find('.intro').delay(500).animate({
54+
left: '0%'
55+
}, 1500, 'easeOutExpo');
56+
}
57+
}
58+
});
59+
60+
});
61+
</script>
62+
63+
<style>
64+
#section1 img{
65+
left: 130%;
66+
position:relative;
67+
}
68+
#section1 p{
69+
display:none;
70+
}
71+
#section2 .intro{
72+
left: -130%;
73+
position:relative;
74+
}
75+
</style>
76+
77+
</head>
78+
<body>
79+
80+
81+
<select id="demosMenu">
82+
<option selected>Choose Demo</option>
83+
<option id="activeSlide">Active section and slide</option>
84+
<option id="apple">Apple iPhone demo (animations)</option>
85+
<option id="autoHeight">Auto height</option>
86+
<option id="autoplayVideoAndAudio">Autoplay Video and Audio</option>
87+
<option id="backgrounds">Background images</option>
88+
<option id="backgroundsFixed">Fixed fullscreen backgrounds</option>
89+
<option id="backgroundVideo">Background video</option>
90+
<option id="callbacks">Callbacks</option>
91+
<option id="continuousHorizontal">Continuous horizontal</option>
92+
<option id="continuousVertical">Continuous vertical</option>
93+
<option id="css3">CSS3</option>
94+
<option id="dragAndMove">Drag And Move</option>
95+
<option id="easing">Easing</option>
96+
<option id="fadingEffect">Fading Effect</option>
97+
<option id="fixedHeaders">Fixed headers</option>
98+
<option id="gradientBackgrounds">Gradient backgrounds</option>
99+
<option id="interlockedSlides">Interlocked Slides</option>
100+
<option id="looping">Looping</option>
101+
<option id="methods">Methods</option>
102+
<option id="navigationV">Vertical navigation dots</option>
103+
<option id="navigationH">Horizontal navigation dots</option>
104+
<option id="noAnchor">No anchor links</option>
105+
<option id="normalScroll">Normal scrolling</option>
106+
<option id="offsetSections">Offset sections</option>
107+
<option id="oneSection">One single section</option>
108+
<option id="resetSliders">Reset sliders</option>
109+
<option id="responsiveAutoHeight">Responsive Auto Height</option>
110+
<option id="responsiveHeight">Responsive Height</option>
111+
<option id="responsiveWidth">Responsive Width</option>
112+
<option id="responsiveSlides">Responsive Slides</option>
113+
<option id="scrollBar">Scroll bar enabled</option>
114+
<option id="scrollHorizontally">Scroll horizontally</option>
115+
<option id="scrollOverflow">Scroll inside sections and slides</option>
116+
<option id="scrollOverflowReset">ScrollOverflow Reset</option>
117+
<option id="scrollingSpeed">Scrolling speed</option>
118+
</select>
119+
120+
<ul id="menu">
121+
<li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
122+
<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
123+
<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
124+
</ul>
125+
126+
<div id="fullpage">
127+
<div class="section " id="section0">
128+
<h1>fullPage.js</h1>
129+
<p>Configure the easing jQuery UI effect!</p>
130+
<img src="imgs/fullPage.png" alt="fullPage" />
131+
</div>
132+
<div class="section" id="section1">
133+
<div class="intro">
134+
<img src="imgs/1.png" alt="Cool" />
135+
<h1>easeOutExpo</h1>
136+
<p>This example is working with `easeOutExpo` effect instead of the default `easeOutExpo`</p>
137+
<p>You can see more about them <a href="http://jqueryui.com/resources/demos/effect/easing.html" target="_blank">here</a></p>
138+
</div>
139+
</div>
140+
<div class="section" id="section2">
141+
<div class="intro">
142+
<h1>Cool uh?</h1>
143+
<p>Choose the best easing effect for your site!</p>
144+
</div>
145+
</div>
146+
</div>
147+
148+
149+
</body>
150+
</html>

0 commit comments

Comments
 (0)