- Maje full screen sections with 1 line of CSS
- Using jQuery to adjust height dynamically
- Stretching a section of a page to full height and width
- Alvaro Trigo's callback example shows how animation, and other JavaScript behaviour, can be triggered when the section becomes viewed.
This amazing demo disables the slides when window size is smaller then height X.
See the section entitled Full page and larger-than-full-page sections.
In Alvaro Trigo’s fullPage, the Fixed Fullscreen Background example will bring a new slide that has a fixed background.
Fixing header, or footer, is a common use case — see Alvaro's demo oon Fixed Header](http://alvarotrigo.com/fullPage/examples/fixedHeaders.html).
-
Scroll-Then-Fix Content uses a search top bar demonstration to show the general idea which depends on maintaining two states when the user scrolls down the page. A main, top-level larger search is first displayed, and, as the scrollbar position passes certain threshold, then a JavaScript function switches the stage of an element using DOM CSS operations.
-
TBD Check if Scrolling with fixed content is the same thing — the case in which you are navigating (say) slides when suddenly some parts of the page gets fixed, til a further slide section down the page.
In many modern pages, the behaviour of scroll is being modified. In Alvaro Trigo’s fullPage.js, the demos related are: Easing demo and Scrolling speed.
Alvaro Trigo’s One Section example shows how to isolate a given section out of the full page behaviour, which can be a desired use case to provide the standard scrollbar behaviour. From the documentation, he claims “Just place the rest of your page after the fullpage wrapper and use the option fitToSection:false and autoScrolling:false. And enjoy a great single slider.”
Full Page example with the normal scrollbar behaviour
-
[UX considerations: parallax attention getter or headache](UX considerations )
Alvaro Trigo’s fullPage.js provides a great example of animated video background. This Framework, as many others, recognises the issue of video backgrounds not being enabled in mobile devices.
The disabled video backgrounds started with IOS and has to do with bandwidth and UX considerations. Also, in Android, after 4.1+, based in this post. Therefore, such issue is not related specifically to video backgrounds and it’s simply related to the autoplay feature of videos.
The recommendation is to have the alternate image.
TBD — notice it would need to not use standard video, therefore it would be possible with simply using image, SVG, animated GIFs, and more. But also worth to consider exactly the very reasons for why the auto play is disabled in mobile devices.
Perhaps a better heuristics to this would be for a page to know its bandwidth capability via either depending on feature information provided by the browser user agent, or testing some conditions.
TBD
From a user experience standpoint, Alvaro Trigo’s fullPage.js library offers two approaches for looping experience. The first refers to when the bottom slide is reached, which moves back to the first, via a scrollbar animation. In another example, then the last slide is reached, it will bring the first at the end — a case referred as a continuous experience.
-
Check out gradient-matching background sectins
- When slides data is bigger than screen is a case dealing to a condition when the slide content is too big and shows how to disable the whole system. However, it is important to observe that such a mode, of operation, is triggered based in a condition of responsiveness and not based in a user experience need. The trigger is simply the width of the page.
An issue, that should be addressed in this discussion, is to consider the means for knowing when the content is larger than its displaying element that has embedded it.
The automatic scrolling can be an issue when the user has a full flexibility to pan, for example with mobile devices. FullPage.js, for example, won’t have a mode of navigation that can support a touch-and-pan (when the user is scrolling with a finger) which could disable the autoScrolling feature.
In Alvaro's Normal scroll demo as you position the scroll page to a certain area, it will asynchronously (lazy-fit) the scrollbar so the current section is fit to the full screen size.
This could be interesting, if there was a way for the user to fit, i.e. to disable this easily or flip/tap enable/engage in this as needed.
Based in CSS3 demo from FullPage.js, it seems as a good approach that improves performance in mobile and other devices. Nevertheless, as the frameworks aims to maintain compatibility among browsers, the jQuery Animate is also used.
A consideration is to make an analysis of the jQuery and jQuery animation library extensions, for such cases; therefore to know when/detect the conditions in which JS data can be sent, perhaps dynamically, therefore to establish a managed control on performance versus aimed animation experience.
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Browser_compatibility https://msdn.microsoft.com/en-us/library/windows/apps/hh767313.aspx lets user manipulates the tag such as pan and zoom, etc.
The overscroll js library is tiny and enables a user experience behavior which brings animation when user scroll beyond possible, beyond top or beyond bottom of a page — https://github.com/tholman/overscroll. This won’t work in all browsers but since it’s a IOS thing, the actual experience could lead to something interesting.
- Idea — perhaps double tap to overscroll, or an over over scroll, could move/bring a new section or change how page?
Perfect scrollbar project https://github.com/noraesae/perfect-scrollbar
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
https://drafts.csswg.org/css-box-3/#the-width-and-height-properties
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent