I have the Jquery Cycle Plugin ... http://jquery.malsup.com/cycle/ ... and I'm trying to figure out how these guys: http://www.flosee.co.uk/ did this.
On their website, and I don't know how to put this into words, but the slider they have going from right-to-left, and if you're display settings are at 1024 x 768, you won't notice anything. But if they're bigger, like 1280 x 768, or 1920 x 1080, you'll notice that the Jquery slider goes outside the page view, into the edges. Does this make sense?
I'd like to know how they did this. Is it just adjusting the Jquery, or a .css adjustment? With my lack of programming knowledge, I'm just surprised I even installed this successfully, so any clear feedback or advice in this regard would be truly appreciated.
Thanks!
Jason Weber
I'm Tony, the owner of flosee :) Glad you like our slider effect, its actually done using three iterations of the slider which are then positioned using css with an opacity overlay. The hardest part was making sure the iterations started one apart so that it gives the impression of being one continuous slideshow across the screen. As a programmer, its not the most elegant of solutions, but it works and I need to get it in place quickly. IF you would like help setting yours up, feel free to send me a message using the contact form on our website.
Related
Hi I have to animate using Javascript or somme kind of library (or CSS, whatever works best).
I am more of a PHP coder and I am not a Javascript expert. I am not exactly sure how to explain what I need so I am going to try explain it visually by adding a (badly drawn) picture:
I need help in how I can proceed with this, whether you can tell me what terms I can search for on Google, links to articles, anything will be appreciated.
Here a global list of what you can use to animate something (all of these combined with a scroll listener in your case)
Anime.js if you don't care about IE<11
Canvas also can be good option and has wide browser support
Keyframes used with classlist api to fire animation when it needed
Sometimes you can just change src of image to gif (without endless animation in your case)
I recommend you to just using GIF here if you can.
I find my problem a little bit difficult to ask about, because I don't know how to explain it or how to even start searching for an answer. I will try here because I'm really stuck and I know Stack Overflow always helps me find a way to keep going and learning. See if someone can open my eyes.
What I'm looking forward to is to achieve a similar effect as the navigation in uzik's page: (see the grey banner at the bottom? well, that). So, yes, I know how to overlap two divs and just slide one or the other on top using jQuery. In fact, there's this demo that shows how to do that and more beautifully (very interesting link to keep ;) ).
But my problem is something else. Notice that when you click on the slider that will overlap the main content, the url changes. That's what I would like to achieve and I don't know if both divs (main content and overlapping content) are on the same page and the url is being changed using some js; or if the overlapping div is, in fact loaded from an external source.
In my case, I would like to load from an external page. Say, for instance, someurl.com and someurl.com/blog. The aim is, having both preloaded (I guess) to slide one on top of the other.
Is this even possible? I would like to think it is. I can follow js and jQuery instructions more or less, but need some guidance as to where to start off searching info, specifically on the loading content from some other url part.
Any tip is appreciated.
Kind regards, Bea.
I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT
I have the artwork ready and have found many jquery libraries that will allow me to scroll horiz/vertical - but i'm not sure how to combine both together at a specific co-ordinate.
Could anyone please point me in a the right direction?
Edit: I did originally sign this post off having looked into Superscrolarama and thinking all was solved - but having struggled with implementing it - I dont think its quite the saviour I thought it was, I need both horizontal and vertical parallax as well as scrolling to achieve above, which it doesn't seem to support - so any other tips I'd be very grateful for!
I threw something together is jsfiddle for you.
http://jsfiddle.net/9R4hZ/40/
The script initializes the start positions of all of the objects first. Then handlers are set up for arrow key and mouse wheel. After that is the meat of the algorithm in the parallaxScroll function.
It uses the ARROWS or MOUSEWHEEL for scrolling.
There are from [left, right, top, bottom] transitions.
The HTML and CSS are really simple.
The JS/jQuery that runs it is self explanatory.
It's an interesting effect, that seems to be geared for artsy type sites.
Did you look into librairies like Scrollrama http://johnpolacek.github.com/scrollorama/ or Curtain http://curtain.victorcoulon.fr/?
I know in your question you mention that you already looked into different librairies but depending how they work it's difficult to really suggest how to use proper coordinates.
*edit1
If you didn't see it yet, the auther of scrollorama also did superscrollorama which give a bit more controler over the animation for example animation when an element is pinned.
http://johnpolacek.github.com/superscrollorama/
This article in smashinghub.com shows a collection of JQuery plugin for scrolling and parallax effect I'm totally sure one of them will help you.
it looks like jQuery Scroll Path is the most advanced of them or suit your requirements.
I realize I'm jumping in late here, and this might seem ultra obvious, but have you tried reverse engineering what they have done on https://victoriabeckham.landrover.com/INT? It looks like the ScrollAnimator script does a bulk of the work. I would download their site & mess with it locally, subtracting parts until I figured out which components provide which pieces of functionality. Then I would read through those to understand how they made it happen.
you have use scrollpath plugin
make path
i'm curious about an effect i've seen on a lot of different wordpress powered sites. i think it might be a plugin, but i'm not entirely sure.
it's basically a page of images of different sizes, and they fit together based on how wide your window is. they also rearrange very stylishly when you resize your window.
the images also load as you scroll down, in sort of an infitie scroll way.
here is a perfect example of what i'm talking about... http://www.someoddpilot.com/work/projects/
how are they doing that? i would like to achieve a similiar effect, but i'm not sure where to begin. any insight would be super helpful, i'm somewhat new at this. thanks!
There are several techniques... I didn't look to see what they are using specifically, but since you mention jQuery, there is a plugin you should check out: Isotope
so this is more a curiosity question than an actual question so please bear with me. I just checked out :
http://www.apple.com/iphone/
And the cover slideshow just looks really impressive to me. I do not want to reproduce it, but I am just genuinely interested in how this works.
From my inspection, they just use a bunch of timed webkit transitions/transformations, but I don't know exactly whats going on.
Also, is there an easy way to create this behavior without hardcoding it, because that's what I would do right now.
Here's an explanation: http://johnbhall.com/iphone-4s/
I'm just answering my own question, since no one could really offer me an answer besides hard coding. I assume Apple just puts a lot of effort in it. i'm still impressed by the sophisticated use of css transitions, especially where objects would transition into the next frame
Here's a working demo with source code.
Basically the idea is,
preload all the images
there's a timer, which fires every N seconds
when the timer fires, start a transformation animation, which slides the new image in.
Elaborations on the idea allow you to stop/reverse/pause/resume, to automatically stop after one cycle, and so on.
The tradename for this effect is "slider". so you can google for slider and find lots of discussion. There are sliders for jquery (nivoslider), there's one for mootools (slideitmoo), there's framework-free options (like the scriptiny demo I linked), and so on.