My goal is to create an absolutely positioned div as the background of the website and the parent of the ScrollMagic scene. By doing this, the title and other content can appear above the scrolling/animated background. However, I found that when using ScrollMagic on a div with absolute positioning, the scroll behavior only works when indicators are added using the addIndicators plugin.
Here is an example:
https://codesandbox.io/s/elegant-sound-x3gop?file=/index.html (without indicators, no scrolling)
https://codesandbox.io/s/ancient-https-iop96?file=/index.html (indicators added, has scrolling)
Is there any way to fix this problem and use the absolutely positioned div as the background without having to add indicators? Or if this is not possible, is there any other way to achieve the same effect where the title appears above the scrolling/animated background? I previously tried making the title absolutely positioned instead, but this did not work because I also wanted to have more content further down the page that would also appear above the background, but it was hard to format with absolute positioning on the content instead of the background.
Related
I'm trying to achieve the fullPage.js scrolling effect inside of a container element.
The best way to describe it is kind of embedding another page inside the viewport and apply fullPage.js to it only.
In the picture below you can see the viewport background color is actually grey-ish while the container object is white. So the actual viewport should be static, non-moving, while the container should be the real scrollable page.
I know this should be possible by vertically stacking up div's the same size as the container, setting overflow to hidden and then emulating a scroll effect using JS manually. However as fullPage.js is pretty reliable and featured I'd like to know if there's a little hack for this so I can save myself from all this work.
Kind regards :)
Image of what I'm trying to achieve
EDIT
Solved using the mousewheel event, an overflow-hidden inner container and GSAP. Turned out to be pretty simple actually :) Could need some tweaking with the y-Delta value to have more page switch scrolling threshold
Demo: https://jsfiddle.net/bva8g3u9/
Ok, there's been no suggestions so far, so maybe haven't really summed it up properly;
If I absolutely position the section with the class="container" using an extra class or id only applied to that <div>, it positions itself outside it's relatively positioned ancestor the <div> with the class="band banner" when it should position itself within the "band banner" <div>.
I'm at a loss as to why, anyone got any ideas?
Here,s the test site again, http://test-site.zymichost.com
I'm developing a website using the skeleton boilerplate, and want to have a Flexslider slideshow background for a certain section, the band slideshow.
There are four main bands on the index page; header, slideshow, body and footer.
The only ones I've put in the example below is the slideshow banner, as you can see in the example there is the slideshow and the Latest News block, I need to have the Latest news block over the slideshow, but I need the slideshow to still be within the flow of the document because there are more elements similar to the Latest News elements below this slideshow banner that I don't want to overlap.
Here's my dilemma, if I absolutely position the Flexslider slideshow the Latest News element overlaps the slideshow, great, but so does the band below it (body) and its containing elements. Not great.
If I use absolute positioning on the Latest News section it stays outside the Slideshow banner (even if I set its containing element to position:relative;) something that has been confusing me, and if I use negative positioning (boooo hiss) it messes up when the browser re-sizes. Pants.
Here's the test site URL:
http://test-site.zymichost.com
I haven't included my code here because it would make the post a bit massive.
Like I said it only contains the slideshow banner, but I'll add more as required.
This might be something glaringly obvious but It's doing my head in, any help is appreciated.
Absolutely positioned elements don't take up space within their parent element, which is why your section.container appears below div.band.banner, but it still flows as if it was relative. Give it actual position (presumably top and left) to have it show over top of your banner image.
I am unclear what you mean by "band below body", but this is how it looks like on my end
I'm using iScroll4 to make a certain element scrollable in my webpage but it snaps back to the original position once you release the mouse/touch. How do I make it stay instead?
I think that I have figured out why this happens. I had iscroll4 working in a Phonegap app that I was building, and then broke it after changing some CSS. At the time, I didn't realize what I had done and I spent a long time hunting for a Javascript solution.
Finally, I noticed that when I tested it in a browser, there was a scrollbar for the list where I was using iscroll4. And when I tried to scroll, the scrollbar thumb changed size. That is why it was snapping back. The browser made the wrapper div big enough to hold the entire list, so whenever I tried to scroll, there was no hidden data so I triggered the pull-up event and then the browser resized the div.
I had to change the CSS to include overflow:hidden and it started to work again. I tried overflow:hidden on the ul tag and the scroller div but that didn't work. It has to be on the wrapper div.
I used a jquery image scaling plugin for a large image on this page I am building: http://seans.ws/sandbox/test/thrive/
I am trying to put a navigation div below the image, but I cannot do so because the image is absolutely positioned, and the scale of the image changes, so I cannot just specify a padding-top value for the navigation to get it to show up under the photo.
Any help would be greatly appreciated.
I would put both image and navigation div in one container and specify absolute position on it (instead of image). It seems to be simplest and most straightforward solution.
First, does the image have to be absolutely positioned? Generally if you want the image to be placed relative to other elements on the page or you want other elements on the page to be placed relative to the image they are placed relative, sometimes within an absolutely positioned <div>
If you explain why the image has to be absolutely positioned there may be an easier solution.
Assuming that absolute positioning of the image is required, the only possibility I can imagine is either modifying the jQuery plugin or making a second javascript to edit the padding-top as the image is resized.
If you need the image absolutely positioned on the page but relatively positioned to all other elements, I suggest putting the image and the content (which you want to appear underneath it) inside of an absolutely positioned <div> element, but leaving them each relatively positioned.
You could get the height value, and then work out how much padding you need.
var myheight = $('.maxAtOrigImageSize').height();
$('.nav').css('paddingTop', myheight+'px');
However, you would need to add an event for when the window changes size, so that if the user adjusts the window size, you can update the padding of the nav.
I'm answering your question, but I feel there is a cleaner solution. I would create a containing DIV for the resized image to sit in, and follow that with a nav DIV. The nav would always naturally be in the right place when resized, at the bottom of the image. You may want to consider changing the way you implement this.
I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.