I have a few elements and I am using Stellar.JS to make elements slide while scrolling - Parallax.
Here is the example:FIDDLE
I would like headline Trainers to go UP while scrolling. I've used data-stellar-ratio="2" on it, but it's not working.
Your fiddle is not correctly set up. You can't link a github ressource (go to http://cdnjs.com/ to find linkable ressources), and you didn't select jquery framework. Here's a corrected one :
http://jsfiddle.net/hCKG9/1/
Moreover, to make elements "parallaxed" with Stellar.js, you must give them a position, like position:absolute (or relative, or fixed)
Related
I know that it is not a very precise question, but I do not know where to start, I have an example which is the objective design, however I cannot find any solution and / or documentation to help me make this type of layout.
More specifically this is the scroll effect that I want to do, http://modern8.com/d5-process/
It should be noted that I have already tried with FullPageJS and I have not been able to recreate it, if you can see the effect consists of applying fixed and relative position according to the scroll but as I indicate, I do not know where to start.
I really appreciate the help you can give me.
The effect is the same as in pagePiling.js but pagePiling.js uses snap scroll so you'll snap to each section. There's no scrollbar.
The closer you can get with fullPage.js is by using the paid Parallax extension with autoScrolling: false (to avoid snap) and placing the whole content of the section inside the fp-bg element.
There's an article about it here.
https://alvarotrigo.com/blog/how-create-tumblr-website-effect/
I'm using fullPage.js (which is a great plugin) to create a photo gallery page. The problem is that this page has a header and a footer, they're not fixed, but they need to appear on this page. What should I do?
I already tried normalScrollElements, but with no success so far.
My structure is:
[header - not fixed]
[scrollable content]
[footer - not fixed]
Any ideas?
the property that you try to use is not planned for that:
normalScrollElements: (default null) If you want to avoid the auto scroll when
scrolling over some elements, this is the option you need to use. (useful for
maps, scrolling divs etc.) It requires a string with the jQuery selectors for
those elements. (For example: normalScrollElements: '#element1, .element2')
It just prevent the scroll of your content page if this one also contains a div with a scroll.
I used a bit this plugin and it am pretty sure it scales on your browser window resolution (its a fullpage plugin after all), best advice for you should to put your header/footer in fixed position or as Jonas said, duplicate your header and footer in each section, but they will scroll with the content pages :/
The plugin is a full page plugin as its name says. You won't be able to have a header and a footer which you can reach by scrolling unless those are full page.
Make your header and your footer fixed or add the header in the first section and the footer in the last one. (absolute positioned to a relative section)
I wish to build a shelf of content much like on Netflix where when you hover over arrows on either end the shelf scrolls at a continuous speed. Ideally, I would also like to make it so when you click the arrows it scrolls a chunk along, so you have the option to click like made to get through a shelf quickly.
This will be using lazy loading so you don't need to worry about repeating content, but obviously it won't have a set width (other then the outside container being 100% with overflow scroll.
Also, this needs to be actually scrollable, so it will work on tablets/phones.
I have no idea here to start so any directions would be great.
Thanks,
Jake!
Image of netflix shelf.
UPDATE: Check out the Smooth Div Scroll jQuery plugin. It slides continuously through the image, you can hover the mouse on the div and manually scroll back- and forward.
Original answer:
I might be off with that, but check out these two plugins:
jQuery Coverflow plugin or the jQuery Imageflow plugin
I think the keyword you are looking for is "flow" and there are multiple flow plugins for jQuery. Hope this helps.
Best regards,
Michael
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.
I want a html div which will scroll when user scroll down the page and it will get to fixed position when it's parent tag ends. For example:- See this link http://www.9gag.com/ they have alot to posts on one page. When we scroll one post and go to end of the first post, the title and share buttons become to fixed position and then the second post do the same and same for the next posts. Just exactly like that. How can we do this in Jquery or raw javascript or in css.
Maybe you want to try this plugin: http://labs.anthonygarand.com/sticky/ Sticky is a jQuery plugin that gives you the ability to
make any element on your page always stay visible by making the element to be floated when they has reached the limit.
$(window).scrollTop() will give you the number of pixels scrolled down in the browser, $('postcontainer').offset() will give you the x,y positions of a post container.
So if you bind an event to $(window).scroll() or to the mousescroll, you can check if the postcontainer's offset().top is less than the window.scrollTop. If it is then you start moving the item down relative to the post container. When doing this you need to keep track of the post container's height and the moving element's height to make sure it doesn't go down past the bottom of the container.
So if postcontainer.height - movingelement.position().top >= movingelement.height() then you need to fix the position of the moving element. Do the opposite while scrolling back up.
Hopefully this will get you thinking and starting to kick out some code.
This is the solution for your problem with a simple css property.
use position:sticky to follows the scroll.
Here is the article explained.
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
and old way of doing this demo
with sticky position demo