I'm struggling to build a simple animation based on those old clocks with flip-down numbers. I added an image below copied from a freebie PSD found on Premium Pixels:
The biggest problem I'm running into is building a "flipping" animation using jQuery all in HTML/CSS/JavaScript. The only tutorial I've found is from this net tuts+ article which actually uses images. It splits the top and bottom half of the clock into two different image sets and replaces them for each second that passes by...
This method isn't realistic in a website since it provides no actual context for readers. I'd prefer to have the numbers hard coded into HTML and perform the flipping animation solely through jQuery - preferably no images except background ticker boxes. Or to put it another way the numbers are coded into HTML but the clock itself is a series of rolodex-style bg images.
I hope I've explained this well enough.. I've been struggling on this for a few days and I honestly have no idea how to approach this script. Maybe by splitting the top and bottom halves into different divs, then change the internal numbers for each second that passes? I'm fairly well-off in jQuery but I am weak on animations.
Thanks in advance for any support!
I think I would attempt to do something where the text is duplicated for the top and bottom. Then using images and css to only display each half appropriately.
The next step would be creating the illusion that the text is flipping with the image. I am not sure how you want to do that. I think it is a matter of sizing and speed. The sizing of the text in relation to the image and the speed at which it flips from the top of bottom.
The final part of the animation is having the top half ready with the next number and the bottom half queue up on completion.
I don't have any actual code that will help, but I hope this concept is something that will work out.
Related
We have a simple website; readable, professional colour-scheme etc.
We are trying to make it have an easter egg, so essentially:
1. (Upon clicking a button or something similar) the cursor becomes a circle
2. Through this circle, you can see a 'hidden' website (the same website as the normal one bit with a different colour scheme, little drawings and animations scattered around and within website components, different fonts etc)
The possible strategies we have come up with, and problems with each are:
1. Strategy: Using 'mask-position' to create a moving mask (the cursor)
Problems: Neither the top nor bottom layer would simply be an image. The top layer would be the basic website, and the bottom layer would be the same website but with a new colour scheme, little animations and illustrations hidden in and around the website components. Potentially the top layer could be an image of the website as it was at the time of clicking over to the new cursor, because the only bit that needs to be interacted with is whatever is inside the circle (the hidden website), but the problem with this is that the simple website still has some small things that move, which a simple image would not capture. Could potentially remove these but if there is a solution which avoids this, it is preferable, as the 'image as a top layer' solution seems clumsy and problematic anyway.
2. Strategy: Use an iframe to show the hidden website within the normal website.
Problems: However, we are unsure how to make the iframe a circle, and how to make it move (based on the cursor position).
We have not tried much as we are struggling to figure out what to try to begin with. Ie I am not sure how to make a mask-frame not using images, and I am not sure how to make a moving iframe which is also a circle.
Any advice, strategies/tricks, or even examples of what I am describing which I can use to explain/confirm the concept to others trying to work on it too would be much appreciated.
Thank you!! :)
I'm in the process of creating an interactive whiteboard application using PHP and jQuery. Creating a deck is not the issue, nor is applying a canvas overlay to the page so that I can write on it. I'm an amateur coder and completely self-taught. This is part an exercise in learning more, and part a means to give me a great tool to use in my teaching practice.
The problem that I'm encountering is applying a CSS transition to the canvas element, so that as the slides change, the canvas element moves as well, in order to avoid having the previously made drawings still present on new slides.
I have gotten the canvas element to move with the slide transition, however, when this happens, the canvas is rendered useless (on the current slide). If I transition back to the previous slide, I can see everything I've drawn.
I'm hoping that this isn't too vague of a question or explanation of the situation to get help, but any pointers would be great.
Figured out the problem. I thought the original script was taking into account the distance the slides were transitioning, but it wasn't. I added in a line to take care of this, and it works like a charm.
I am learning to develop mobile applications, quite in the initial phase.
This query is not related to mobile but more to html/css/js.(for
I intend to make a simple game, where a picture is seen, a few options are available and the user can drag and drop these options onto the image.
eg. There is an image of a plant > options are #leaf #stem #flower #bud
The user must drag and drop the correct option to the correct place on the image to get points. i.e Drag the #leaf option onto the leaf of the plant.
Now my problem is the image, the separation of these points, I can't figure out how to do it.
Query in short: How do I access separate points/sections on a single image in html/js for above purpose?
Query (longer version)
I did a little search and realised I can slice the image and recreate it using multiple images, I tried this, it sort of works but it has a a lot of drawbacks:
1)More images mean more space, combined size of the split images was about 1.5x the original image(this is just splitting it into 4 images)
2)For a complex picture, the number of images to slice into is large and hard to manage in css(n00b==me) as they don't just need to be split into a simple X*Y grid but a much more complex split depending on the object in the image.(realised when I was trying to do a simple cell structure img)
3)More images also means more http requests(in case the app is WebView based) which will increase loading time.
It just seemed liked too much of a hassle, there must be a better way.
Then I saw css sprites , I dont need to combine my images like sprites are intended for, rather the reverse. Just access parts of my pre-existing image, as separate objects.I haven't tried this(working on it) and and I haven't seen this being done either, or maybe its being done and I'm not seeing.
Please help guys, my problem is quite simple(I think) , I think I'm just not getting the correct google search terms.
If anybody has any ideas,links, resources and also any clarifications as I may not have put up my problem as clearly as I'd like to, please do reply.
regards,
Rahul Agarwal
You could try to place transparent divs over the main image using absolute position and fixed dimensions. Those divs will be assosiated to the possible options, and when a user drops an option over some specific div, you'll know what points to give.
Little demo using two divs and an animated scaling to show that the positioned divs will scale according to their parent:
http://jsfiddle.net/VK3A8/
fiddel with image:
http://jsfiddle.net/8qLFc/4/
I have this image above. I want to parts of the image to show depending on the RPM of the car. For example when the car starts only the bottom blue block is visible, as the speed increases more blocks become visible all the way to redline. Once the speed decreases the blocks disappear. I'm at a loss with this one i don't even know where to begin. Originally i was thinking of making each block a separate image but i was wondering if there was a better way of doing this. Any ideas?
Check out the Raphael javascript library. Depending on your Javascript experience, you may have a bit of a learning curve, but I think you would have a much easier time recreating what you are showing above and attaching the desired behavior to each of the shapes, rather than trying to do it with images, particularly given the arrangement and orientation of the blocks.
UPDATE: I created this fiddle, as I thought this seemed like an interesting exercise. I just used rectangular blocks, but if you mouse over the green 'throttle' bar, you will see how the blocks are made to appear and disappear.
I've already achieved this on my iPhone app, but I want to know if it's possible on an HTML page, maybe using CSS effects or similar.
As you can see, the current view is split, the bottom part is moved down, and another view is revealed underneath. I have a page I'd like to try this on. Any ideas if this is possible, and any specifics as to how I can do it? I'm quite new to HTML coding, so please take it easy on me. :)
Thanks in advance!
Here's an example to get you started http://jsfiddle.net/Cquhj/
A few things to take away from this pattern:
The middle div has an overflow: hidden; property and height: 0px.
The trigger icon has an event that tweens the height of the middle div to the size you want.
Edit:
I really like the resources and answers given and I would add this to the list http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu
here an update, more iphone-like
http://jsfiddle.net/mFeyn/1/
it miss the triangle in the bottom of the folder once is clicked and calculate the height of the container when there is more than 4 icons.
Yes, it's absolutely possible, nothing out of the ordinary and CSS will definitely be needed.
As it is, your question is extremely generic and an answer would be: learn about HTML and CSS and the combination of the two for creating standard compliant web page layouts. You might want to read about the box model too. To solve your problem you need to know about the use, positioning and floating of a series of <div>s to achieve the desired layout.
If you want to add animation, like some part of the split view floating down into position, you will need Javascript as well.
Possible starting points for your research on SO:
Why not use tables for layout in HTML?
https://stackoverflow.com/search?q=css+div+column
Here is a code example that might give you a little bit more if your plan is to emulate iOS 4 folder behaviour using jQuery.
The view is basically split into rows and I played around w/ the background position css attribute to allow the background split illusion.
http://jsfiddle.net/hKHWL/
This is very possible, but it's kind of like asking "I want to program Civilization, and I'm quite new to C; how do I do it?" ;-)
I would strongly recommend picking up a good "DHTML" (Dynamic HTML) book. For instance, I rather enjoyed this one, from SitePoint: http://www.sitepoint.com/books/dhtml1/
If you're not the book-buying type, sites like SitePoint and AListApart can certainly explain things too, but not in as organized of a format.
Good luck.
I know this is an old post/question...
but I'm doing this with dynamic heights and positions here:
http://webkit-os.pixelass.com/iframe/
(only works in Chrome and Safari)
I am using jQuery and two divs with the same image.
Dynamic positions means.. you can move the folder to a different position or page.
Dynamic height means... the height is relative to the number of Icon-rows in the folder.
The folder even opens above and below if the content is too hight to be displayed below.
(opening the folder from the Dock does not work yet)