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.
Related
I found a carousel (https://codepen.io/paulnoble/pen/yVyQxv) that has some awesome transitions and thought it'd be nice to integrate into a project I'm working on: https://joshrodg.com/halloffame/
My code is here: https://codepen.io/joshrodgers/pen/MWBPXBx
The responsiveness of the design needed to be adjusted slightly because to me having the content split (left, right) doesn't quite work that well on smaller screens (like phones) - it'd make it almost impossible to read. So, my idea was just to remove the right-side content all together.
I have that working and it looks exactly as I expect, except one thing...
Basically, there is vertical paging on the right-side of the slideshow. When you click on the next circle it rotates forward to the next slide, when you click on the previous circle, it rotates backwards to the previous slide. On a desktop screen (larger than 900px) the paging area stays on top of the rotating images, which makes the slideshow rotation look really nice. On my iPhone, and I'm guessing on other small screens, the rotating images appear to rotate on top of the paging area and then it re-appears.
I'm sure this is a simple tweak, but is there a way to keep the paging area on top while rotating through the images on a desktop and smaller screen like an iPhone?
This is also an issue on the original carousel, so I'm not sure how to fix it.
The paging area does have a z-index: 1 but for some reason the images still rotate on top of the paging area. I even tried setting it higher: z-index: 1000, but that didn't seem to do anything.
Anyone have any ideas?
Thanks
Josh
After looking into this a little more, I was able to find a solution!
My carousel__control div is what was controlling the vertical pagination, this was in carousel container and rightfully so, as it was controlling the position of everything inside. However, this also caused the issues I described, not really sure why.
All I did to fix this was move carousel__control out of the carousel container - basically right above it in the document. Then had to set my margins to match and adjust it's position. I couldn't keep the margin: auto and top: 0. Once I adjusted those two properties, everything started working as expected.
I have updated the pen here: https://codepen.io/joshrodgers/pen/MWBPXBx
Thanks,
Josh
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've been trying to do something like this for quite a bit, and have tried a variety of methods from fake scroll bars and DOM-tricking code. Nothing seems to quite be as clean / functioning as I need it to be.
What I'm trying to do is have a horizontally scrolling div (with scrollbar), with a vertically scrolling div nested within it. Ideally the single horizontal scrollbar would scroll, and after a certain point--vertically scroll the "go-up" div next to it.
Here's an example diagram for those who need to visualize:
I think I have a solution that could work:
Basically I'm thinking that the horizontal "scene" could have overflow that equals the height of the "go-up" div. And after the horizontal width of the "scene" passes...you can, onScroll, shift the "go-up" container right using (ScrollLeft) and up using (ScrollTop).
Basically giving you the illusion of controlling it's vertical scroll with a horizontal scrollbar.
Check out the code here: http://jsfiddle.net/jPzqj/1/
I know how to pass a function at the end of the "scene"...currently I'm using:
$('#main').scroll(function(e)
{
if($(this).scrollLeft()>1430)
{
}
});
My only issue is I'm not quite sure how to approach the math that would allow me to shift the go-up container. How do I pass in the "scene" divs scroll value into the ScrollLeft and ScrollTop values of "go-up"...
Could anyone give me any advice on this at all?
Thanks.
You are totally off the right path, no vertical scrollbars are involved.
That is a good site (not the one that you make in 30 minute obviously), and the javascript is obfuscated, but if you are interested, you could watch the source with Firebug to understand what's going on.
It works by mixing a javascript library, some cool CSS3 Transform3D effects, and a nicely studied HTML to give you the effect of the screen scrolling up (actually, only the images are moving - and not scrolling - while the screen is always in the same Y position).
The same effect is used to create the percetion of depth, by moving the houses in background slower than the ones in front.
This effect is called PARALLAX SCROLLING .
A good javascript library you could start looking at for Parallax effects is Stellar.js
You can take a look at some great sites made with Stellar.js, especially Nike and Saucony.
Hope this answer saved you some time,
good luck on your studies ;)
EDIT
this is what you want: Jquery Parallax Scrolling effect - Multi directional
open the fiddle from the bounty-awarded answer and keep the right arrow key down.
Could anybody pleae explain me how could I create an effect like https://www.spotify.com/us/ Please click on Find out more on this page.
It looks like a 3D effect. Eg: The image doesn't move as much as the scroll does. If we have two paragraphs on page and 2nd paragraph below 1st paragraph, the 2nd paragraph moves quickly before the 1st paragraph does.
Any guidelines how can I create these effect or if any Jquery plugin, then also it would do.
Thanks!
The effect you have linked to is know as a 'parallax scroll'. There are numerous websites and plugins that describe how to implement this:
http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
http://abduzeedo.com/super-easy-parallax-effect-jquery
http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/
That's parallax effect ,
Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.
check this SITE
and PLUGIN
I have made a very basic parallax effect on a site of my own.
$(window).scroll(
function() {
x = $("html").scrollTop() * -.05;
$(".bg_img").animate({top: x + "px"}, 0);
});
Feel free to use this and I'm always open to suggestions.
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.