So i finished my parallax and i would like to add a white empty section between each 2 sections that on scroll will get passed automaticaly like in here.
On scroll, theres a white section that comes in and out fast. how can i do that?
Note: I am using fullpage.js for the parallax effect, Check here.
HTML:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
And Linking my header to the fullpage.js library make its work as a parallax so I cant really show the Javascript in place
Related
My page code looks like this:
<div id="wrap">
<div id="panel">
<div id="answerData">
<div id="bodyData">
----some contents here ----
</div>
</div>
</div>
</div>
The data got wrapped between bodyData are populated automatically, so I want to make these data scrollable when they are overflowed.
And I added
<script>
$(document).ready(function () {
$('#wrap').fullpage();
})
</script>
below div section, but nothing happened, anyone can help me? I followed a tutorial video, don't know how to initialize fullpage.
Check the fullPage.js docs where everything is explained in detail and with plenty of examples.
You are not following the required HTML structure which is the following:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
You can also check this video tutorial.
I have a this problem:
I use a jquery plugin fullPage.js by Alvaro Trigo on my website. The plugin script automatically inserts the html structure in certain elements... in my html I have:
<div class="section fp-auto-height-responsive" id="slider-section">
<div class="slide" id="co-delame-section">
<div class="slide-wrapper">
...
</div>
</div>
</div>
And when the page is loading, javascript generates extra html tags and css, so it looks like:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
I want to append more slides (slide class) for a certain page resolution, so that when user is on mobile with smaller screen, the extra slides won't load.
I do it with this javascript code:
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
});
And there is the problem... it works in about 50% page loads, the problem is that sometimes it appends the slides after the fullPage generates the structure, so that the appended slides are out of the slider structure... like this:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<!-- the right place of a slide -->
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
<!-- appended slides out of slider blocks -->
<div class="slide" id="jsme-partner">
</div>
<div class="slide" id="vase-problemy">
</div>
</div>
So it looks the fullPage.js script runs before the slides are appended, but in the html head tag I firstly put the script to append the slides and fullPage is loaded after...
But what is really weird is that sometimes it loads correctly, sometimes not. Clearing the cache on refresh helps sometimes, but I can't say if there is any pattern with deleting the cache.
You can check it on http://marketingo.cz/en/?stack-overflow#About and give it a few refreshes with cache clearing to see...
The questions is - how can I ensure that the html is appended before the fullPage plugin modifies the code so that the appended sliders will be in a same container?
Thanks for a help! :)
Easy.
Just initialice fullPage.js after you append the slides by using the $.get callback.
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
//initialice fullPage.js here:
$('#fullpage').fullpage();
});
Example: http://www.hugeinc.com/
I have a portfolio website with a few slides about different projects. After that I'd like the user to continue navigating through other sections, but with normal scrolling (not the fullPage effect).
<div id="fullpage">
<div class="section">
<div class="slide" data-anchor="slide1"> Slide 1 </div>
<div class="slide" data-anchor="slide2"> Slide 2 </div>
<div class="slide" data-anchor="slide3"> Slide 3 </div>
<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>
</div>
After the finish fullpage div it stops scrolling, but the page still has an about and contact sections
You can use pagePiling.js for that purpose. The small brother of fullpage.js.
I created an article about how to create a website like hugeinc using pagePiling.js.
If you are just worried about the scrolling functionality in fullpage.js you should be using scrollOverflow:true as in this example.
I am doing a single page design using a fullpage.js component. the code is something like so..
<div id="fullpage">
<div class="section" id="section1">Some section</div>
<div class="section" id="section2">Some section</div>
<div class="section" id="section3">Some section</div>
<div class="section" id="section4">Some section</div>
</div>
I would like to set up a fixed image - which is the title logo from section 2 onwards.
Section1 will be a photo background - but page 2/3/4 - I want to have an a title div/image to be fixed as the pages/section scroll.
Is that possible ?
codepen : http://codepen.io/anon/pen/OXMgmV
thanks
You can achieve this using a single line of css
.fp-viewing-0 .title.fixed{
visibility: hidden;
}
You can animate it if you want using css-animation to have transition or delay
See the CODEPEN
I can't seem to get scrollspy to work with hidden elements.
I place the data-spy="scroll" on the body, and data-target=".classOfNavWrapper", and it doesn't ignore the hidden elements like the docs imply, but rather seems to choose elements to activate almost at random.
Here's a fiddle: http://jsfiddle.net/shdapqap/1/
<div class="container">
<div class="row">
<div class="span3">
<div class="nav-wrapper">
<ul id="my-nav" class="nav nav-list affix">
<li>Moose</li>
<li>Bear</li>
<li>Beaver</li>
<li>Raccoon</li>
<li>Bobcat</li>
</ul>
</div>
</div>
<div class="span9 my-content">
<section id="moose">
Mooses are cool and big and stuff.
</section>
<section id="bear">
You better stay away from bears, they are bad news.
</section>
<section id="beaver">
Beavers like to slap their tail to scare predators and children.
</section>
<section id="raccoon" class="hidden">
Raccoons like french fries, don't ask me how I know.
</section>
<section id="bobcat" class="hidden">
I would like to know if bobcats go crazy for catnip like my house cat does.
</section>
<button class="show">Show next</button>
</div>
</div>
</div>
On the bottom is a show next button.. which shows the next hidden div and refreshes scrollspy, it only seems to work fluently once the last hidden class is removed.
Bootstrap version: 2.2.2 (stuck with that).
I solved this by replacing the ScrollSpy part of the Bootstrap 2.2.2 JS with the Scrollspy part from Bootstrap 3.3.5. And of course, remembering to refresh the scrollspy after revealing each item.