Embed external js (fullpage.js)

Using JavaScript with Hype
1

Hello guys, I tried to redo this in hype:

fullpage.js A simple and easy to use library to create fullscreen scrolling websites (also known as single page websites or onepage sites). It allows the creation of fullscreen scrolling websites, as well as adding some landscape sliders inside the sections of the site

Live Demo

Example in a normal page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>fullPage.js A simple Demo</title>
	<meta name="author" content="Alvaro Trigo Lopez" />
	<meta name="description" content="fullPage very simple demo." />
	<meta name="keywords"  content="fullpage,jquery,demo,simple" />
	<meta name="Resource-type" content="Document" />


	<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
	<link rel="stylesheet" type="text/css" href="examples.css" />


	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

	<script type="text/javascript" src="../vendors/scrolloverflow.js"></script>

	<script type="text/javascript" src="../jquery.fullPage.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#fullpage').fullpage({
				sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff']
			});
		});
	</script>

</head>
<body>

<div id="fullpage">
	<div class="section active" id="section0"><h1>fullPage.js</h1></div>
	<div class="section" id="section1">
	    <div class="slide "><h1>Simple Demo</h1></div>
	    <div class="slide active"><h1>Only text</h1></div>
	    <div class="slide"><h1>And text</h1></div>
	    <div class="slide"><h1>And more text</h1></div>
	</div>
	<div class="section" id="section2"><h1>No wraps, no extra markup</h1></div>
	<div class="section" id="section3"><h1>Just the simplest demo ever</h1></div>
</div>

</body>
</html>

for mouse wheel page scroll test...

scroll.hype.zip (118.9 KB)
but no working in my hype doc, would I know what I missing? Thanks...

2

I can’t say it will work after you change it, but the first issue is that each of your sections are HTML Widgets. These are <iframe> elements under the hood, so essentially the fullpage script can’t look into them and see they are the scrollable sections because they are separate pages. Instead you can use a Rectangle element (which is a <div>) and then remove styling and set the Inner HTML.

3

Thanks Jonathan, I tried, do u mean like that…,
scroll 02.hype.zip (110.9 KB)
would u help to check again? Thanks

4

Yes, that is what I was referring to.

Your initialization looks good and I think it is properly finding the fullpage element. It looks like the issue now might be that the section elements aren’t direct children. I did a test with the simple example document, and placing a section in a <div> did seem to break it.

Even if you were to use the Identity Inspector in Hype to give the rectangle elements the class name, this would still not work – Hype still injects another div between them.

I couldn’t find a good way to change this on their API, but perhaps one exists so you might want to thoroughly look over the documentation or message them about it. It could be there’s a way to change the sectionSelector property for example.

There are probably other ways to achieve this effect; you may want to check out this post:

5

Thanks, Jonathan ^^…ar…

I am thinking, if it is hard for me to achieve my first idea… How about learn from this website?.. I really like it…
https://daoustlestage.com/en/
I feel it did slow down the scrolling or smoothed by each of mouse scroll, rather than certain almost of pixel in each scroll action. What do you think? Would you suggest me any method to achieve it?

6

hype is not the right tool for this …

7

I’d probably agree with @h_classen; Hype doesn’t have native scrolling actions (though this is a great request) so you’re probably going against the grain if you want to hijack scrolling for your own reasons. Even the parallax solution above requires a bit of code to get integrated with Hype. It may be better to do the site with HTML and potentially use Hype within for an sub-animation effects.

(as a side note, I personally think it is better for accessibility and general site navigability to not overload the scrolling. Hype does have Viewport Actions that can trigger animations when you get to a certain scroll point.)

2 Likes
8

thanks H & J, yea, it such a good reference for my next project anyway… ^^

1 Like