I'm working on a website and I want to have a Javascript image-slideshow as background.
The slideshow works and I got the HTML and CSS for the part which is supposed to sit on top of it ready as well. But I just can't figure out how to combine those two. I tried working with positive and negative z-index, but that doesn't work. Is there any way to actually set the Javascript slideshow as background, so that it won't affect my HTML and CSS?
Be sure to add position:relative to the elements you're trying to use z-index on.
Finally got it figured out. position: absolute and z-index to 1000, while the Slider remains at z-index 0. :) thanks
Related
I want to have one image above another one that is being revealed on scroll.
I am thinking of a similar effect as on this page: https://affinity.serif.com/de/photo/ (live-filters section, called "fixed-scroll" here).
Preferrably a native CSS solution or with as little JS as possible.
So far, I've found this example https://tympanus.net/Blueprints/ScrollingLayout/
It's almost what I want but I can't think of a way to make the background-attachment fixed to the element's parent rather than the whole viewport.
It only works when it's fullscreen and there's nothing above this effect.
I've also thought about a solution using translate-y but can't find a way to slide the top image up revealing the image underneath instead of sliding the lower image upon the first one.
Can you help me out here or point me in the right direction, how this may be achieved? Thanks!
As far as I know using background-attachment: fixed might be the only way to achieve this particular effect using only CSS, but it looks like that doesn't quite solve your problem.
I would try a simple parallax scrolling library such as parallax.js. This uses javascript to achieve the desired effect but you can apply all the code via CSS data attributes, like so:
<div id="mydiv" data-parallax="scroll" data-speed="0" data-image-src="/path/to/image.jpg"></div>
With data-speed="0" the image inside the div will be stationary as you scroll past.
I'm using the wow.js framework based on JQuery Animate on this site I just completed: (http://adrenalinetv.com/). Problem is I noticed on the animations I have that slide up, the animated element slides above the div underneath the element I'm sliding. So you see the element in the next div or div's. So I thought, OK...I'll just make the z-index of that div higher and my problem will be gone. However, no matter what z-index I set that div, the animated element always appears on top of it as it slides into place. I'm not sure if that's because of the wow javascript, the animate.css or script or what. Anyone familiar with this framework know how to correct this? Or is it correctable?
The element that you are giving a z-index cannot have a position static. So give it a position relative and the z-index fix should work.
From CSS-tricks (http://css-tricks.com/almanac/properties/z/z-index/)
As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).
I know there are various solutions out there, including JQuery solutions, that will do this, but I was trying to write my own simple version...
I want to hide a <div> but sliding it off the left or right of the screen.
For some reason I'm unable to read and set the .style.left value of my div though.
This fiddle shows the problem: http://jsfiddle.net/47MNX/3/
Seems to work fine if you set the position property, e.g. position:absolute; (or relative) to #myLeftMenu. You never set the position, so while the JavaScript was running it had no way to make the change.
jsFiddle example
I found this beautiful website (http://soworldwide.org/) and want to create a similar slideshow. After I've spend a lot of time to make it work, I still can't figure it out.
Right now it's looking like this:
http://bit.ly/1bktxcx
Wait undtil the last picture and then you can see how the slideshow refreshes. Can someone help me, so I get the same animation like theirs?
I'm using the same Jquery Plugin by the way.
Thank you in advance.
You're setting the top of the list-begin image to zero at the same time that you're starting the animation for the list-end image. Because the zIndex of the list-begin image is 3, you're causing the list-begin image to hide the animation of the list-end image. I recommend dynamically updating the zIndex for each image when you do the animation. For slides that are hidden (by setting the top to a negative value, as you're doing), you can ignore the zIndex. But before you set the top to zero for your next image, set the zIndex for curr to 1 and the zIndex for next to 0.
Edit: I figured this out using the Chrome JS debugger and liberal use of console.log(). Maybe you did all the right things and still couldn't find the problem, and just needed a second set of eyes. But if you didn't do all the right things, remember: the debugger is a powerful tool.
I have this little jQuery slideDown effect http://jsfiddle.net/Gg4eP/2/
But the animation isn't smooth? What I am doing wrong?
Thanks for your time.
You just need to add the width to each expandable div.
http://jsfiddle.net/BpMam/
To explain:
jQuery doesn't know the dimensions of your hidden div until it's displayed. So when it's clicked on it actually pulls it out of position to measure it before quickly replacing it. This often has the side effect of causing some jumpiness. Setting the width on the element prevents jQuery from pulling it out of position.
Some browsers don't particularly like text that is automaticly wrapped when animating, and it gets a little jerky when it tries to figure out the height of the element.
Try formatting the text to fit the element and see if that helps.
I actually did it for you, check if this FIDDLE solves it ?
Would probably work to give the slided elements a fixed height aswell ?
FIDDLE
I had this problem, because the div to be animated had an animation-time.
transition-time: all 1s;
Deleted it and got a smooth animation.