Hi I am using this js library in order to make a site with full page scrolling.
http://www.thepetedesign.com/demos/onepage_scroll_demo.html
Here is my jsfiddle example:
http://jsfiddle.net/aLjLjxux/
Instead of each element being pushed up and out of the body, I want them to stay fixed and be overlapped by the following divs. Is there a simple implementation for this functionality within this library, or is there a different library that will allow me to achieve this?
For reference it would look something like this:
http://www.facebookgroups.com/ except reversed. As in the divs that come later will overlap the previous divs on scroll.
<body>
<div class="main">
<section style="background-color: #eaeaea;" class="first"><h1>Hello</h1></section>
<section style="background-color: #dadada;" class="second"><h1>Sup</h1></section>
<section style="background-color: #cacaca;" class="third">yo</section>
</div>
<script type="text/javascript">
$(".main").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease-out", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: false, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: function(index) {$(this).css("position", "fixed");}, // This option accepts a callback function. The function will be called before the page moves.
afterMove: function(index) {}, // This option accepts a callback function. The function will be called after the page moves.
loop: false, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: false, // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
direction: "vertical" // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".
});
</script>
</body>
Thanks.
The website you link is using pagePiling.js plugin.
It even support old browsers with no CSS3 support, unlike the onepage-scroll you want to modify.
No need to modify the one you are using. It won't be that tribal anyway.
If you want to reverse it, then you should better start with pagePiling.js and you will have much less work.
Related
recently I am working on a page using this awesome plugin:
https://github.com/peachananr/onepage-scroll
However I am not familiar with JavaScript so I will be obliged if someone could explain to me few things:
I'd like to combine one-scroll-page behaviour with anchor scrolling, simple example:
function scrollContent(id) {
$('html, body').animate({ scrollTop: $('#' + id).offset().top }, 1000 );
}
as far as I know there is an embedded function called "$.fn.moveTo(page_index)"(see plugin link) but I wasn't able to use it successfully.
I'd like to turn a slider when leaving page #1 to save resources, slider launches with function:
$('#da-slider').cslider({
autoplay : true,
interval : 8000,
});
tried to simply turn off autoplay by messing with callbacks but it turned out to be bad solution:
$(".main").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: true, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves.
afterMove: function(#1) {
$('#da-slider').cslider({
autoplay : off,
interval : 8000,
});
}, // This option accepts a callback function. The function will be called after the page moves.
loop: true, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: 600, // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
direction: "horizontal" // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".
});
Every tip, even link to jquery tutorial will be very helpfull. Thanks in advance!
Solution found:
$("#your-div-id").on("click", function(){$(".main").moveTo(2);});
I am using Zurb Foundation to create a small website and I have a top navigation bar with four links. On clicking each link, I want to horizontally slide to a different page every time.
The content in the page should be loaded via ajax and not loading all pages on visiting index page itself. (note: content for slide-to page should be loaded not after the slide animation but somehow with the slide itself or else the empty sliding would look a little weird)
In addition, since I am using foundation to get responsive layouts, I am confused how to place the sections for the different pages horizontally. If the website wouldn't have been responsive, I probably would have placed the other pages separated by a margin property and to slide them, I could have done an animate of the margin property.
But, how do I get a horizontal page sliding effect (along with ajax loading) on my current page?
I think you want a 'single page website'? There are a lot of tutorials about this but this one is great:
http://vandelaydesign.com/blog/web-development/single-page-sliding-nav/
A live demo can be found here:
http://vandelaydesign.com/demos/single-page/
This uses jquery to scroll to the element with a specific id on the page. When you click one of the menu items it scrolls/slides automatically to that part of the page.
Just because the code is a bit long I'll only post the Jquery, to give you an idea.
<script type="text/javascript">
$(document).ready(function(){
$('#topnav').onePageNav({
currentClass: 'current',
scrollOffset: 0
});
});
</script>
$('#nav').onePageNav({
currentClass: 'current',
changeHash: false,
scrollSpeed: 750,
scrollOffset: 30,
scrollThreshold: 0.5,
filter: '',
easing: 'swing',
begin: function() {
//I get fired when the animation is starting
},
end: function() {
//I get fired when the animation is ending
},
scrollChange: function($currentListItem) {
//I get fired when you enter a section and I pass the list item of the section
}
});
Hope it helps :)
I have a website that is essentially four divs - each of which is set to the height of the window so that the total document is four times the height of the window.
The idea is that a click on a div advances the scroll by one "window height" - which works fine, like this:
// on click event
if(cur_frame<number_slides){
scrolling = true;
$('html,body').animate({scrollTop:window_height*cur_frame},function(){
scrolling=false;
});
}
After the user scrolls the page manually, however, I'd like to "snap" the position to the nearest multiple of the window height - so a given div is once again centered on the screen. I tried using a timeout, figuring that a small delay would keep it from triggering a thousand times a second...
// on scroll event
clearTimeout(scroll_timer);
if(!scrolling) scroll_timer = setTimeout(function(){
if(cur_scroll!=window_height*(cur_frame-1)) {
scrolling = true;
$('html,body').stop().animate({scrollTop:window_height*(cur_frame-1)},function(){
scrolling = false;
});
}
},100); //20? 400? 1000?
...but couldn't strike a balance between the script fighting the user over scroll position, or a seriously long delay that defeats the "snapping" effect.
Any suggestions how this might be achieved?
There is a CSS spec for this, and it is well supported with native rendering and very nice touch behavior except on Chrome: http://caniuse.com/#feat=css-snappoints
For the laggard browser, there's a polypill: https://github.com/ckrack/scrollsnap-polyfill
See also How to emulate CSS Scroll Snap Points in Chrome?
The jquery scrollsnap plugin for this supports down to IE9.
What you're looking for is called "Scroll Snap".
<script src="demo/foundation/javascripts/jquery.js"></script>
<script src="src/jquery.event.special.js"></script>
<script src="src/jquery.easing.min.js"></script>
<script src="src/jquery.scrollsnap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.snap',
proximity: 50
});
});
</script>
What about using a simple scrollTo? Plain Javascript and CSS used, no frameworks or libraries.
Here are two examples, one for vertical scrolling and the other for horizontal scrolling:
Vertical: https://jsfiddle.net/x9z5tpye/
Horizontal: https://jsfiddle.net/bwsyn6q4/
If you want to consider a cross-browser javascript re-implementation of the native CSS Scroll Snap spec, as already answered here: How to emulate CSS Scroll Snap Points in Chrome?, you can use
this library:
The main reason to use this instead of the native css solution is that it works in all modern browsers and has a customizable configuration to allow custom timing in transitions and scrolling detection.
The library re-implements the css snapping feature using vanilla javascript easing functions, and works using the values of the container element's scrollTop/scrollLeft properties and the scroll Event Listener
Here is an example that shows how to use it:
import createScrollSnap from 'scroll-snap'
const element = document.getElementById('container')
const { bind, unbind } = createScrollSnap(element, {
snapDestinationX: '0%',
snapDestinationY: '90%',
timeout: 100,
duration: 300,
threshold: 0.2,
snapStop: false,
easing: easeInOutQuad,
}, () => console.log('snapped'))
// remove the listener
// unbind();
// re-instantiate the listener
// bind();
You could do this with javascript or for a slightly simpler and older solution you can use page anchors.
If you change your document.location.hash to an anchor that exists in the page then the browser will scroll to it.
So in your HTML put some anchors in the page:
<a name="anchor1" id="anchor1"></a>
then in your js put:
document.location.hash = "anchor1";
I am working on jquery's jCarousel, In which i am having some images from database and shown as slider using jCarousel, my functionality is working as per i expected but i want to apply one more functionality is that if image is only 1, then it should not do sliding, I am taking image count from database then setting it in jCarousel visible property
$('.carousel').jCarouselLite({
visible: #ViewData["ImgTotalCount"].ToString(),
activeClass: 'current',
btnNext: ".carousel-next",
btnPrev: ".carousel-prev",
auto: 2000,
speed: 600
});
curently it is sliding even on one image
If you have only one image, set the auto parameter to null. It will restore it to its default value, and to its default behavior, which is not moving.
See documentation here : http://www.gmarwaha.com/jquery/jcarousellite/#doc
I'm using AnythingSlider (fun toy) as a website where the panels are the site's pages. As such, I want to disable and remove the Start/Stop button but leave the rest of the navigation. I'm under the impression that it's part of the navigation and can't be optioned out. If that's correct, how do I do it?
Actually, I want to move the navigation to the top right of the panel, as well.
Cheers
Completely removing the "start/stop" button:
buildStartStop: false
(no hiding, no tricks, simply removed)
From the examples here: http://css-tricks.com/examples/AnythingSlider/
The 2nd example does not have the button. If you read the source:
$('#slider2').anythingSlider({
width : 600, // if resizeContent is false, this is the default width if panel size is not defined
height : 350, // if resizeContent is false, this is the default height if panel size is not defined
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
autoPlay : false, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
navigationFormatter : formatText // Format navigation labels with text
})
Look at autoPlay. It is clearly responsible for the start/stop functionality, including the button.
Hiding play/stop button, but still working with autoplay:
startText : '',
stopText : '',
Call of the dogs. It is an option:
autoPlay : false,