I must have tried half a dozen tutorials and several days trying to figure out how to build a really simple parallax layout using skrollr.
I have 3 divs containing background images, each at different positions down the page. Each should have it's background scroll relative to it's position in the viewport, not on the page layout.
I can't of the life of me understand how to specify relative mode, and get my background image scrolling for the duration that it's visible in the viewport. They stop scrolling before they've finished rolling up the viewport.
My demo page here: http://3fishbeta.co.uk/build/040-skrollr/05-skrollr-positioning
The first image container on the page is :
<div class="imageContainer" data-bottom="background-position:50% -700px;" data-top-bottom="background-position:50% 0px;" data-anchor-target="#trigger1" ></div>
I just don't understand the data-top or data-bottom settings. The image should continue to scroll, until it's container has left the viewport but it stops early.
In other words, the image stops moving when it's container's top reaches the top of the viewport... where it should be the container's bottom instead... I think.
Can anyone help??!
I have answered my own question. The image container is 500px high. The data-top position needs to be ofset by 500px.
Like so:
data--500-top="background-position:50% 100%;"
...where the top position is set to -500
I hope that helps someone!
Related
I have an application where Konva is initially hidden (It's on the 2nd "tab" of a tab control on the page).
When the user clicks a "Save" button on this page, I'm trying to call Stage.toDataURL() to get the content in Konva. However, if the 2nd tab is never displayed, this always returns a blank image.
I've tried calling Stage.draw() before Stage.toDataURL(), but that didn't do it.
I've tried caching the Stage prior to calling Stage.toDataURL() also. No luck.
I don't have any images on the canvas, so it's not an issue of waiting for images to load.
Once the 2nd tab is displayed, even if the user then switches back to the 1st tab and re-hides Konva, it then works fine.
Is that a known limitation of Konva? That it won't render unless it's visible?
EDIT: Resolved
Some code was attempting to center and scale Konva within its container on page load. Since the container wasn't visible yet, its width and height were 0. This caused the code to set the Konva Stage width and height to negative numbers. Once I prevented that, it's able to export the image fine - even when hidden.
This is resolved. Some code was attempting to center and scale Konva within its container on page load. Since the container wasn't visible yet, its width and height were 0. This caused the code to set the Konva Stage width and height to negative numbers. Once I prevented that, it's able to export the image fine - even when hidden.
I'm trying to implement the following screen in Flutter.
It seems trivial to do so, but I couldn't find a way to achieve the same results. This is what I have so far:
My solution without scrolling
Solution following the Flutter demo but placing a map as a SliderAppBar
As you can see, I have a few problems:
This is the most accurate solution (don't look at the small blue widget moving up and down). I can move on the map and scroll through the ListView but I can't move the divider to expand the ListView. Notice that I don't want the ListView to move to the top, but until the user stops.
This one seems the correct solution but, as you can see, there are more problems: The map seems to resize instead of stay the same but just resize its container, and when I scroll down, I see the background of the Scafold.
Any ideas? This is the link to the solution 1.
PD: Sorry for the links to the GIFs. Their size was about 10MB each and I couldn't upload here.
I got my parallax effect to work perfectly on my laptop screen size. As soon as I viewed my site on a larger screen I noticed the parallax effect was not finishing because there was not enough room to scroll down. How do I fix this issue? Below is a snippet of my code showing two of the elements moving as I scroll down. I am using data attributes to transform. Should I be using something else? You can view my site here http://nsohail.github.io/Project3-HTML/
<div id="slide-1" class="slide"
data-0="transform:translate(-770px,0px);"
data-10p="transform:translate(-770px,0px);"
data-100p="transform:translate(185px,0px);">
</div>
<div id="slide-1" class="slide"
data-0="transform:translate(770px,0px);"
data-10p="transform:translate(770px,0px);"
data-100p="transform:translate(-220px,0px);">
</div>
Instead of using 100p (percentages) use pixels so it will end at an exact spot no matter what the screen height is. So adjust your percentages to just numbers. For example data-0, data-10, data-100.
I am using ScrollPanel in GWT 2.4 and I am unable to set the maximum vertical scroll position, as a result of which, the scrolling happens pretty fast.
The scroll momentum takes me to the end of the content in a matter of a couple of seconds. Please note that I have lots of data inside the ScrollPanel (Only text though...). If I tweak the momentum a bit, the scroll either stops abruptly or doesn't look like native scrolling.
I am viewing my application in ipad(ios7). I tried using -webkit-overflow-scrolling: touch but that gives me a flicker that I can't get rid of even after using -webkit-backface-visibility: hidden or -wekit-transform: translate3d(0,0,0) or a combination of both. On top of it, the scroll seems unresponsive and scroll occurs approximately 500ms after the touch end event has occured.
Is there a way to restrict the maximum no.of pixels the panel can scroll and yet make it look pleasing. Also can someone tell me why there is a delay for scroll?
I'm trying to have an image inside a div of same width to be draggable in the limit of the div. It's difficult to explain but one side of the image (top or bottom) can leave the div but you cannot have a gap between the edge of the image and the border of the div.
To resume the image has the same width of the parent div but its height is bigger so a part of the image is hidden.
Well here is what I want to do:
http://jsfiddle.net/maxwell2022/DerNa/165/
It's working perfectly... because there is nothing above the div. If there is a gap between the document and the div, it's not working anymore. I think Draggable is taking the document as reference for the top of the image. As soon as you start dragging the image, the image move and stuck its top edge to the top of the document:
http://jsfiddle.net/maxwell2022/DerNa/164/
I don't know how I can achieve this with the containment option.
Cheers,
Maxime
UPDATE
Another attempt with relative positioning but no luck: http://jsfiddle.net/maxwell2022/DerNa/166/
I found a solution to fix it getting the top position of the parent div using offset() and add it to the containment boundary. I'm not sure it's the best solution but it looks like it's working.
I just have a difference of 1% in the offset at the top which is quite annoying: if you drag the image and make it stick to the top as much as possible it returns 99% offset instead of 100% (see the result in the console).
The bottom one is correct (0%). I think it's due to rounding the size but I'm not sure.
Here is the jsfiddle: http://jsfiddle.net/maxwell2022/DerNa/167/
If you have a better idea please, please, let me know.
Thanks, Maxime