I have an interesting question.
Is there a maximum left positioning? The reason I ask is because of a slider I am working on. Most of the layers are background images so it doesnt matter, but some are actually images (links) that slide along with the whole scene.
Right now the entire scene is ~15,000 pixels and may get larger.
Or, if you have a better way for sliding {a imgs} along the background, let me know.
Here is a link to beter help explain what I'm doing.
http://cva.ziplinestaging.com/slide/parallax.html
Thanks for the help.
Using this jsfiddle test I was able to move a div pretty far left. I got bored after -1,300,000px. I'd say you have some play room.
Related
I was looking at a website Firstborn website and it's not the first time I've seen this effect, i wonder how it works.
When you scroll down the page, you can see the images "curve" on top and bottom. I know I'm supposed to present some code, but I don't have any clue on how to create this type of curve on scroll effect!
Does anyone have ideas about how to make this effect is javascript? (Not the glitch, only the curvy image)?
I am trying to create a web design with a unique shape. This is a simple coming soon template with the top left corner for info button and the bottom right corner for contact button. The green center area for the logo and other basic stuff.
The basic layout looks like this. I did this by creating 3 div elements. When it comes to the background color, this is fine. But the challenge is that I want those white pieces are like cut off from the green one. Something like this.
I also wish to have an output similar to the above image when it comes to playing a slideshow or Youtube/Vimeo video or custom video.
This is a Youtube video playing on the green area. But not the way I want it to be.
I want the final output to look similar to this. On the body background a pattern or a small animating pattern. Above that the cut-out layout and over that custom design another darker pattern to make it bit more attractive.
I know I am asking a lot here. But I never see any such design with a splitting of something from parent div (I did try overflow method, it didn't work or I missed something.) On top of this, the design should be responsive and the size of cutoffs (white triangles) must decrease in size with the very smaller displays.
I really need help from you guys. Thank you so much in advance.
I made a simple image slider to show the houses at sale of a properties website, but the slider doesn't slide the whole width of the divs containing the images. I made a codepen at
http://codepen.io/anon/pen/Eamns to illustrate what I mean, does someone know how can I slide the element without leaving a small bit of it visible? Somehow I don't like to use the whole lot of sliders that are out there, but building my own. I'll appreciate any help, as you can see I'm using the outerWidth and margin properties to determine the distance of the slide, but it's not very clean and I still don't like it.
Thanks in advance
[1]: http://codepen.io/anon/pen/Eamns
Not sure if your CodePen is complete. If you want something clean and easy to implement, I recommend using the 'jquery cycle' plug-in (http://jquery.malsup.com/cycle/) to create your slider. It is the easiest way I have found to make many types of image sliders.
Just a quick question here; Is there a slideshow that scrolls right, left, up and down? The idea is to showcase the different projects when scrolling up and down and the different images within each project when scrolling left and right. Would that be possible? Most importantly, would that be possible?
Thanks all,
G
Check this out, it is a CSS 3D slideshow made by Akhim that should get your interest.
I've been playing around with a gallery similar to that of the iPad's photos app, where you have thumbnails neatly stacked and upon clicking(touching) they fly out in a grid layout. If one gallery/stack is already open when you click another stack, the photos should pile up at their original position before the next set animates out.
I though something like Isotope would be helpful here, but I'm having a real hard time making it stop overwriting itself. Also, I can't quite figure out how to make it seem as if the thumbnails fly out from the "cover image".
I put a simplified version of what I've got so far on JSFiddle.
Any help is greatly appreciated. I feel like I'm in a little over my head here :)
My question is: how do i make it seem as if the thumbnails fly out from the "cover image"?
You could have an absolutely positioned DIV with a full-size image inside.
Initially, position the div and scale the image such that it perfectly overlaps with the thumbnail.
Then, animate the location and size of both to bring them to the center of the screen at the size you want.