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.
Related
I'm kinda stuck. I have to create a portfolio and I have to mostly use html5 and css3, with a bit of js, jquery and stuff if I really want to. I'm not very good at web development but I still wanted to experiment and do a professional and nice site. The thing is, implementing a simple scroll effect on your whole website seems to force you to write the html code on one single index. Does anyone know if this is really the case? Are there other solutions?
Thanks in advance. I know that it is not the smartest question but I'm really not good at it, so sorry in advance. Bye!
(I didn't really try anything yet except from the classic class "scroll-container", which is my main problem : I still want to have several html pages to separate things so that it is clear in my mind. Putting everything on a single webpage will definitely lose me)
use an external library or plugin, such as fullPage.js or Scrollify, which can enable a scroll effect across multiple pages.
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
Forgive me if this is not the best forum to ask this question in. I'm not sure where to start, so maybe someone here can direct me.
Using html and jquery/javascript, I want an animation of one item flipping over another item. Almost as if someone is taking a page out from a file and replacing it on top of another page in the file.
Please see attached picture for referance.
If (and only if) you need some custom animations, check out this sweet jQuery plugin: http://weepy.github.com/jquery.path/
It should get you going in the right direction. Your general approach:
Create a path that swings Box2 into position in step 4.
Change z-index of Box2 to be on top of Box1.
Animate Box2 back along the same path in the opposite direction.
Addition: here's a good ReadMe for creating your path: https://github.com/weepy/jquery.path/blob/master/README.markdown
Addtion #2: It was asked how to do rotation, so I dug up a couple plugins to do that:
http://plugins.jquery.com/project/AnimateRotation
http://plugins.jquery.com/project/jQueryRotate
If anyone has experience with either of these (I don't) leave a comment below for the OP!
Rotation
http://code.google.com/p/jqueryrotate/
http://code.google.com/p/jqueryrotate/wiki/Examples
This plugin is for images specifically while in CSS3 compatible browser other elements will work in older browsers and IE: don't expect other elements to work.
Example:
$myContainer = $('selector');
$myContainer.rotate({animateTo:45}).animate({'left':100,'top':-100}, function(){
$myContainer.css('z-index', 2).rotate({animateTo:0}).animate({'left':0,'top':0});
});
Maybe try to combine it with http://weepy.github.com/jquery.path/ (credit to Adam Terlson for posting it) for smooth path animation. Looks like a great plugin.
In my experience rotating in IE is always glitchy.
I adopted couple scripts a while back into something that worked best for me: http://pastebin.com/kDK9mu9W however I did this for a project of mine and never test it outside and it does not have animation - you would need to use a interval.
IE7, IE8 & CSS3 compatible browser support for all elements. Images are wrapped in divs to prevent filter conflicts.
Is this a question? You certainly could use jquery to do this and there are already some plugins that offer something similar. See the shuffle type animation of jCycle
http://jquery.malsup.com/cycle/
I'm sure you could take a look at the code there to get some pointers on how to proceed.
There's an excellent tutorial here that explains the basics of sprite animation with jQuery. It's not a solution for your specific question, but it offers a quick introduction to the concepts you'll need.
Have two divs with appropriate Z-scores. Animate div to slide top right, as soon as div is completely free, switch z-score and reverse animation.
I'm working on a web page which will display information updated periodically via javascript. I want to have it displayed in a Solari Board, complete with the flipping tiles animation. Is there an existing Flash or Javascript implementation I can use?
the real thing http://grab.by/42yp
Here's my super-lousy javascript test for one letter. The solution should take a string and figure out how to flip the existing letters to update it. On a real board they all start at once and each stop after the number of flips needed.
My demo
I found this other question here on Stack Overflow.
That led me to this example.
I think that person has worked out all the "nitty gritty" of doing the flip animation. That should be all you need to put together a working Solari board.
good luck.
I assume from the picture you used that you've seen this?
http://blog.elctech.com/2009/01/22/actionscript-solari-departure-board/
Maybe good for anyone else who is looking though.
I am currently trying to code my own JS drag and drop script (out of sheer curiosity and boredom, I know it would be much easier with a framework). My aim is a fully working Firefox3 version , IE can wait for now.
I just got stuck on a weird bug. When I drag the div for the first time, it works ok. When I drag it for the second time, it does not stick after releasing the button and I have to click once more to get it down. Third and consequent drags work flawlessly again (!?!).
Please see [the original page][1] (as I said, FireFox only for now) for an idea of what happens. The whole thing is done as a div with two events (onmousedown and onmouseup) using document.captureEvents(Event.MOUSEMOVE) for the intermediate movement. The script can be found [here][2] (disregard the bottom ajax part, it is prepared for some additional tricks and the bug stays if I take it out).
Please let me know if you have encountered something similar in the past or if you see a mistake somewhere. I know there may be better ways to go around the whole thing but I am specifically looking for a way to make my approach work.
EDIT: Chrome and Safari work.
EDIT: Taking the links offline, working on new version.
Well first up this works for me in FF3 if that's what you're asking.
This isn't going to be what you want to hear, but I strongly recommend you pick up a DnD method from mootools or jquery or similar. Just from an efficiency standpoint, DnD is a horrible thing to code up (done it a few times myself) and if you're not capable (no offence meant here) of resolving the numerous bugs that come up it's just going to be a huge drain of your time compared to just going with a robust mature implementation off the shelf. It is a hard thing to do.
If you do what to continue with your own code (as an exercise or out of pride - I can appreciate that :) ) this kind of problem is typically the result of either an event not being captured where you think it is because some other event got in the way first, a flag not being set where you think it is, or (or because of) an error which breaks out of your code at an unexpected point. Try and trace logically what's happening by logging out the event triggers.
If you could define how it wasn't working in more detail I might be able to trace it further (since I seemingly can't replicate), but I do suggest you explore the benefits of a solid library.