Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
How to achieve this design? (From Apple.com)
- Thread starter HarryPot
- Start date
- Sort by reaction score
Its Javascript.
Google "safari inspect element" to learn how to easily find out things like that from within safari.
Google "safari inspect element" to learn how to easily find out things like that from within safari.
You might find a way to do this using CSS3 or there's an easier way to do it with CSS2 too, but you would have to reload the page.
Well it's Javascript and CSS transitions/translations. At least on browsers that support it. Javascript detects the mouse click and changes CSS values. Then CSS transitions power the animation effect. If the browser doesn't support CSS transitions then there is a fallback to have Javascript alone transition the elements.
I recommend:
Jquery + CSS transitions + unsupported-fallback
I recommend:
Jquery + CSS transitions + unsupported-fallback
Apple shows you how right here:
https://developer.apple.com/devcenter/safari/index.action
A little teaser of what you can learn:
https://developer.apple.com/safaridemos/
just me
https://developer.apple.com/devcenter/safari/index.action
A little teaser of what you can learn:
https://developer.apple.com/safaridemos/
just me
Just a quick note; java != javascript.
-Java is an interrupted class based, object oriented, multi-platform programming language that would take a year to get the hang of and a decade to write fluently ( I've been writing it since 1998 and still struggle keeping up with all the libraries and fast pace of development ). Java is mainly used for backend work, although it has been slowing clawing its way towards the frontend in popularity as well.
-Javascript is a very powerful prototype based scripting language, named to take advantage of java's popularity at the time. Javascript is mainly used for web develpment. It would take you a weekend to get the gist of it and 10 decades to write fluently ( there are awesome libraries that shorten this fluency curve greatly: jQuery, Mootools, Prototype, ect ).
just me
So, I'm even more of a newbie!
BTW, I found this tutorial. Which explains how to achieve what I was asking from the OP: http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/
And one last question: is it recommended to use jQuery / Javascript in your webpages?
yes because it not only adds interactivity(slideshows, audio/video players) to your webpage, but also to validate data that users put into form fields, when filling out a contact form.
Absolutely. Javascript makes your page come alive. A lot of the new HTML5 / CSS3 stuff duplicates javascript actions. When I'm building a page for a client I always try to use HTML5/CSS3 first, if I find that they don't fill the need I'll throw in some javascript.
HTML5/CSS3 is still not safe across all browsers ( actually just IE sucks, although IE9 and IE10beta do a very good job, the bad thing is that you certainly cannot expect a user still using IE to upgrade to the latest version ) whereas javascript works very well across browsers.
I've given up hand holding users. Unless the client absolutely requires it, I pop up a javascript model asking the user to upgrade their browser or download a web standards compliant one.
just me
PS just remember users can turn off javascript, don't rely on it to protect your server/data. Javascript is only there to help the user NOT to help you. You must sanitize everything before it hits your database from the server side.