I'm attempting to implement a similar animated "sliding panels" effect as the Aveda website.
I'm a little overwhelmed by all the options and Javascript libraries that are available. And a little confused after examining the Aveda website code.
Any recommendations as to how to approach this task please? Which Javascript/Effects library would be most suitable? I don't have any allegiance or greater experience in one library over the other.
My requirements are:
Cross-browser compatibility (of course)
Simple & Elegant implementation
Don't want to re-invent the wheel
Ability to animate and to be activated by mouse-clicks (like the Aveda front page)
Dynamic (don't want to have to modify javascript as more 'panels' are added)
My first impressions would be to use Scriptaculous - Effect.Move, but I'm aware that there are ready-made implementations like Spry's.
Any words of wisdom and suggestions would be greatly appreciated by this Javascript newbie.
Prembo.
I like http://www.davidmassiani.com/horinaja/
It can use the mousewheel aswell as the links to scroll between panes, and it's available for script.aculo.us and jQuery.
I would recommend the latter as it is lightweight and easy to learn/handle.
http://jqueryfordesigners.com/coda-slider-effect/ is a good tutorial for this using jQuery.
I do like the way Aveda implemented that effect. They are using prototype/scriptaculous, and it is a custom implementation.
The Aveda effect is called a carousel. The Aveda carousel scrolls to the next element on a timer and has a nice non-linear transition.
+1 to Deefjuh, I think that Horinaja would do what you want and be easiest to implement.
If you want more of a challenge, I've used PrototypeUI ( http://www.prototype-ui.com/ ) Carousel to do a series carousels for project (e.g. http://teacher.scholastic.com/products/classmags.asp ) But the dot indicator controls had to be custom programmed.
Related
wisgetwas wondering what widget in gtk (using gtkmm) could be used to implemented the movable button looking thing in the picture. and also the dotted line.
dotted line
edit: the widget is supposed to be able to move left and right along the time-track to be able to set the play bounds. Here is a video showing how it looks like in after effects. From sescond 37 is how the behaviour for it supposed to be. https://www.youtube.com/watch?v=QxXevteeumg
edit: from what it looks like there isnt a specific widget which could simplify this. However a regular button can be used and then implementing a method for its drage using the various signal handlers associated with a Gtk button
There is no widget that does this (see the widget gallery).
You can, however, add custom widgets using Cairo. In the official Gtkmm book, there is an example for creating a custom clock widget using the Gtk::DrawingArea. The Gtk::DrawingArea offers a lot of signals which you can connect to.
I have created my own widgets in the past using this and it worked just fine. However, it was a lot of work because:
Cairo lacks good documentation. Understanding the philosophy behind this library is a lot of work, often empirical.
It can be hard to acheive acceptable performance using Cairo. One has to be really careful in how the drawing of the widget is performed. There is often a naive way to do it, which is clearer in the code, but devastating in terms of performance (it often involves useless redraws on the CPU).
I am new to coding and wanted to get some hands on practice with a project I have in mind. Here it is:
Let's say you have blank page and on the side of a screen you have several items you can choose to draw on the blank page. For example the background can be mountains, the ocean, a forest etc. On top of that you can place a house, a church or another selectable element. Whatever you like.
It is like a picture editor where you can put together a picture with different pre-given elements. Or like in video games where you can create your own character.
What would I need to build a web application for that kind of thing?
This link should get you started but it won't be the complete answer to your question - http://www.webdesignerdepot.com/2013/08/how-to-use-html5s-drag-and-drop/
Essentially, you can achieve your image dragging and dropping using similar techniques. It will require a bit of Spike work from yourself, and looking into how HTML5 can handle drag and drop. I discovered this resource fairly quickly and I think the solution you want isn't as complicated as you may think, it just requires a bit of know-how regarding drag and drop operations within HTML5 :-)
Also, there may already be some JavaScript based API's that do this sort of thing easier but I'm not too aware - I suppose starting this way could be a great introduction for you and you may wish to expand once you've done some work for it :-)
Hope this helps you and your coding journey!
I'm a Graphic Designer.
I was wondering if it's possible for a programmer to code this website or I should redesign this?
Because I have doubts about how hard the header and footer are, and I think it's a really hard work for a programmer to code a website like this.
If it's not, please let me know then I will find a developer.
This is not impossible. It just takes a moment to think it through.
The footer can be made as a background image of the three colour splats which wraps three separate divs (Projects, Products, Contact Us). The header is a series of images absolutely positioned within a relative parent.
This is actually a very simple layout.
The design is bit complex and unusual but not impossible.
It's possible to convert this design in code with use of some script and css hacks mainly position and z-index based hacks
I have an image of a living room, which I'm turning into a menu for a new site I'm working on. The idea is that you can click on certain items in the room, like a chair, desk, couch, etc and get taken to the desired page. I'm wondering if there is a clever way of doing this. Since the items are not simple shapes, I don't want to use a standard image map.
Thanks for you help!
I'm answering because a Google search brought me here...
Because you asked for a tool:
GIMP Has a really good Image map creation function.
Open your image in GIMP and select Filters > Web > ImageMap
From there you can create image maps by drawing on the image. Saving will generate HTML you can then tailor to your needs.
This tool looks to be a solid image mapper: http://www.image-maps.com/
I'd suggest doing this with a canvas and SVG's, it would make this quite a bit easier, and more professional.
As Korvin mentioned, doing this in SVG is probably the easiest option, because you can attach events to objects in SVG rather than having to manually specify a particular area in which to listen for events.
If you go this route, I recommend using the RaphaelJS library which has a nice syntax and the advantage of working in IE pre version 9. Here's a demo which, although it uses onmouseover instead of onclick, it might be close to what you're trying to achieve:
http://raphaeljs.com/australia.html
I am wanting to draw/create guides on-screen (not within an application) that will allow me to align UI elements properly - just like you can in photoshop -- is there a tool that can do that? Zoom would be a plus.
thank you :-)
I'd reccomend pixelwindow it doesn't do exactly that but it could help a lot.
Check out xScope from IconFactory. http://xscopeapp.com I use it all the time for development layouts. It's got several tools, including rulers, frames... and a "Guides" tool that is perfect for alignments and layouts. It also has a "loupe" tool, that may help with precisely aligning elements, in lieu of zooming.