I'm new to webkit animations and I have been trying out to do this kind of animation
http://demo.jeffrey-way.com/tutsMobile/#site.php?siteName=psdtuts
If you click the list element you will see page sliding in and sliding out.
I want to implement this animation to my app which is built with backbone.js, underscore.js, zepto.js
I could use jqTouch or jquery mobile but I would like to make it as light weight as possible, because I'm building it only for IOS. So thats way I wan't to implement it by my self.
Any hints to make this implementation or should I go with jqTouch?
In this example, there is some sort of (I hate to be vague...) ajax based content loading system. Take a look at the source:
<div data-role="page" id="article.php?siteName=psdtuts&origLink=http%3A%2F%2Fpsd.tutsplus.com%2F%3Fp%3D15026" class="ui-page ui-body-c">
When you first visit, that div doesn't exist. It's created by javascript when content is required, then filled with that content, then translated (animated) into the viewport.
Here is a step by step, deduced from a quick look at the page:
Base page is loaded, including css, javascript, nav list
Script is waiting for a nav item to be clicked.
Upon clicking, an ajax request is made to the content corresponding to the clicked item; determined by href="article.php?siteName=psdtuts&origLink=http://psd.tutsplus.com/?p=15081". My guess? This ajax request is getting content from the same place as psdtuts.com, likely in a database.
While that stuff is loading, javascript shows a loading animation. When loading is complete, it's hidden again.
Once the new content-filled div is created, it is given a default position with its left edge placed right outside of the right edge of the screen. Upon the event of being positioned, javascript then determines the view's dimensions and translates the div across the horizontal dimension. At the same time, the nav list is moved the same direction and distance.
When back is clicked, the view's dimensions are determined again (In case the window size changed) and the nav and content are translated to the right, hiding the content and showing the navigation again.
Repeat
I could be off from how this exact sample is being done, but... Well, this would work.
You wouldn't be that crazy to use a framework for something like this, but I can understand wanting to do a custom job. It would certainly be faster for users, but slower for you. Depending on your intent, that would be just fine.
edit: If you're only serving this to users with webkit, using a framework is even less necessary... If you're not worrying about cross browser support, there's really not a lot going on here that you couldn't accomplish easily with raw javascript.
The only reason I use jQuery for example, most of the time, is to ensure things work alright in most use cases. It just smooths so many things out... Even if 95% of the framework isn't being utilized, it's worth it when you've got a deadline.
I founded out one good example
http://andrew.hedges.name/blog/2009/05/29/animating-your-iphone-web-application
Related
I have been working on getting this seat mapping chart for a while and have created a few iterations, and the problem I keep finding is when I get to IE8 the panning for this is way to slow and delayed.
What I have at this point to cut down on load time is created a png to replace my "strokes" since I assume ie8 wanted to re-render each time I dragged the map.
I also added controls hoping to force IE8 users this option, but still there is a delay in the pan, and if I can have users with IE8 (and ie7 if possible) still drag/pan without the controls and the respond time a little faster that would be great.
Here is my current JSFiddle
I am still a little green with JS so if you have any suggestions it would be much appreciated. (PS Chrome frame is awesome but is not a option for me)
Update
I have removed the original dragging function and replaced the code using jqueryui's draggable function. Martin had suggested to just drag the div, and not the Raphael elements. Doing so lets this thing fly in ie6-8 which is great, but then came my concern about scaling. What I was seeing before on zoom my paper element WxH would stay the same ratio, cutting off my drawing when it zoomed in. After digging through the Raphael documentation I came across paper.setSize. setSize was exactly what I needed to allow this project to move and groove in ie6-8 and pretty much conquer all browsers in its path.
So in short, using jqueryui's draggable and paper.setSize has cured my cross browser zoom n' pan blues.
From what can be seen in the Fiddle, you are triggering a new rendering of the image by calling .translate() inside of a mousemove event handler:
mapContainer.translate(currentMapPosX, currentMapPosY);
rsrGroupies.translate(currentMapPosX, currentMapPosY);
This approach is toxic for performance in all browsers, let alone IE8. When dealing with VML in IE8 you should consider that each and every DOM change inside the image will result in the image being rendered again. Doing that while panning will always be painfully slow.
I see that you are already using jQuery in your Fiddle. If you want to increase performance of your panning, you should consider doing the following:
Render the image in Raphaël exactly once for the current zoom level. Do not attempt to change transformations in your VML/SVG image at any point in time while panning.
With the mousemove implementation of panning you already have, move or scroll the HTML container that holds your VML/SVG image instead. Imagine a <div> with overflow: hidden and simply move the image inside relatively, or scroll to the appropriate position.
This will require some adjustment of your coordinate calculations, but it will improve your performance in all browsers.
I would like to create a image and content slider in Flex. There are many jquery plugings available
(cfr. Flexslider http://flex.madebymufffin.com/) but i can't find an alternative for Flex.
Can anyone explain me how i can implement this?
Thanks!
Ah it just so happens I already made this... a long time ago so it's Flex 3 but I believe it works as is in Flex 4, I've integrated this with other Flex 4 projects and have since made some performance improvements (mainly opting for Group over Canvas and did some deferred instantation since we decided to use it as the backbone for a pretty complex site).
http://www.shaunhusain.com/ImageSlider/
http://www.shaunhusain.com/ImageSlider/srcview/index.html
Should allow you to drag and snaps to the tile with it's top left corner nearest the top left of the container itself, also can use keyboard navigation left right up down so long as it has focus, and I made those buttons on top that can be used to trigger the movements. Basically I tried to overload that example with all possible options so I can just copy it and strip off what I don't want. It also turns out this translates pretty well to touch screens even though I didn't own one when I wrote it, the snap to nearest thing works alright on an android (even with that version which is totally not optimized for mobile). Oh yeah and you can use - and + on the keyboard or the scroll wheel to zoom, doubt if that's really ever necessary but it seemed like a cool idea at the time.
Is it possible to have a rollover effect for an image and a form.
I.e. I would like to have an image, which when the user hovers over, rolls away to reveal a form (like a login or sign up form).
Cant find anything out like there like this so assuming its not possible but thought I'd ask!
Thanks
JD
This is very much possible.
Using CSS, say position: absolute for the image and the form's div.
Then using z-index, make sure that the image lies over the form.
Then you can use the HTML onmouseover event to execute something like a call to Adobe Spry's slide animation effect to neatly accomplish what you're trying to do.
But in my honest opinion, this is unnecessary glitter.
I have a an app that has several pages. When I move between pages (using the NavigationService) I have an animation that makes the text fly out - think standard WP animations or Zune Client.
The animations themselves look reasonable but the problem seems to be the gap between when the animation finishes and the new page is loaded. There seem to be a slight delay when all the elements have completed the fly out and when the new page is shown.
It's making my page transitions feel a little clunky.
How can I make the target page appear the instant the transitions have completed to avoid this?
fwiw - i'm just using the navigation service to navigate between pages.
this.NavigationService.Navigate(new Uri("/SomePage.xaml", UriKind.Relative));
I recently was trying to solve the same problem in one of my applications. My solution involved two main pieces:
Shifting a large chunk of work from page navigation time to app startup time.
Hiding the unavoidable work that couldn't be moved to app startup time by using smoke and mirrors in my page transition animations.
Moving work from page transition time to app startup time
In my app, I have a main page that contains a long list of items, and then a details page that contains a lot of rich detail on a particular item. Navigating forward from my main page to the details page was taking a long time and looked really unpolished. The main problem was that it was taking a substantial amount of time (ie: well over one full second) just to parse the XAML and instantiate the new page. To get around this, I took the entire contents of my details page and moved it into a UserControl and I instantiate a global instance of this control on application startup. The actual details page is now an empty shell containing the minimal XAML required to instantiate the page. In the code behind for that page, I handle adding the singleton UserControl as the sole child element of the page, and then in the OnNavigatedFrom handler, I remove the UserControl from the page. This allows me to shift the XAML parsing and scene initialization logic from page navigation time to app startup time. Now obviously this makes my application take longer to startup, but given the usage pattern of my app that tradeoff is well worth it.
Using animation trickery to hide the unavoidable work
The previous steps didn't completely solve the problem however as there was still some time needed to bind/set all the actual content of the details page, as well as the time required on the compositor thread to do the initial layout and rendering of the page. Unfortunately, there isn't a whole lot you can do about this. I attempted to work around it as much as possible with smoke and mirrors by playing with my page transition animations. For instance, I originally had an animation that would rotate the contents of the page off the screen using a full 90 degree rotation, and then rotate on the contents of the new page using another 90 degree rotation. I changed those to only rotate part way while simultaneously fading the opacity to/from 0. If this animation is performed quickly enough, the human brain then does an amazing job of filling in the blanks and tricks the viewer into believing that the page rotated all the way. My ForwardOut animation actually only rotates by 50 degrees, but the viewer doesn't really notice that, and in their mind they are still extrapolating the rest of the animation long after the real animation has completed. This helps mask the unavoidable work required during the page navigation.
Is there a way to keep the "Loading..." graphic from appearing when cfdiv refreshes? I'd like to prevent the flicker of loading the graphic then loading the new html.
By adding these lines at the bottom of the header, it overwrites the "Loading..." html and seems to prevent the flickering effect in both IE and FireFox:
<script language="JavaScript">
_cf_loadingtexthtml="";
</script>
While this seems to do the trick, it would be nice if there was an officially supported way to customize the loading animation on a per page or per control basis. Hopefully they add support for that in ColdFusion9.
I don't think there is currently a way to do this programmatically within the cfdiv tag. If you really want to get rid of that "Loading..." message and the image, there are a couple places you can look.
You can rename or delete the image, which is located at: CFIDE\scripts\ajax\resources\cf\images\loading.gif
That only gets rid of the animation. The "Loading..." text can be blanked out to an empty string, and is defined in: CFIDE\scripts\ajax\messages\cfmessage.js
Making these changes will obviously have an impact on tags other than cfdiv, but if you are looking to eliminate this behavior in one place, I'm sure you won't mind killing it everywhere else too. :)
I'd love to see a cleaner way to do this if anybody else has any ideas.
This is by no means a comprehensive or an elegant solution, but I found using negative margins on adjacent elements can "cover" the animation. I don't know if this method works in all cases, but for my particular case it worked. The animation appeared next to a binded text field, to the right of which was a submit button. The layer was floated to the right. I used negative margin on the submit button and it covered the animation without affecting the layer alignment.
Another measure I did was to check the layer structure, and added the following code to my css be sure:
#TitleNameloadingicon {visibility:hidden;}
#TitleName_cf_button {visibility:hidden;}
#TitleNameautosuggest {background-color:#ffffff;}
You can create functions to change the message prior calling the ajax load that can set the message and image to a new value.
function loadingOrder(){
_cf_loadingtexthtml="Loading Order Form <image src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'>";
}
function loadingNavigation(){
_cf_loadingtexthtml="Loading Menu <image src='/CFIDE/scripts/ajax/resources/cf/images/loading_nav.gif'>";
}
(these will eventually be rolled into a single function that will take both a text_value and an image_path parameter)
In some of my processes that load both a main and left nav cfdiv I use a function like this:
function locateCreateOrder(){
loadingOrder();
ColdFusion.navigate('/functional_areas/orders/orders_actions/cf9_act_orders_index.cfm','main_content');
loadingNavigation();
ColdFusion.navigate('/functional_areas/products/products_actions/cf9_products_menu.cfm','left_menu');
}