Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I used to build sites that used flash for background animations & background movies while having regular (selectable) Html text on top.
Flash really fit the bill because it allowed for streaming movies WITHIN the animation itself, so you could layer things really well and get a very creative website going.
BUT FLASH IS DYING...
So I'm here to ask you good folks what solution (or solutions) should I look towards that can accomplish the same goals in modern non-Flash platforms (web-mobile etc).
It would need to:
Create animations that can have within them movie files. I would need to control the movies from the animation, not just slap them as background
NOTE: I have looked at all kinds of plugins etc for putting a movie as a site background, but this would NOT yield the result I need as it is just a movie playing and cannot be scripted as an animation in Flash was. I also checked out Adobe Edge. It comes closest to what I need but I have found no way of working with video inside it the same as in Flash - Please correct me if I'm wrong.
I'm no Javascript maestro by any means. I would dive deeper into it but I'm not sure it would work for what I need.
I hope I have not confused you with this long winded question and I thank you for your help.
Try the html canvas element. You can pipe video to the canvas using a hidden video element and any animation you can think of is possible through canvas. Since these are dom elements, you can of course put other HTML on top of them.
For good canvas frameworks check: http://www.backslash.gr/content/blog/webdevelopment/7-10-javascript-canvas-frameworks
I'm personally a big fan of paper.js and processing.js
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am trying to create the classic solitaire game in Javascript, but I am uncertain about how to design the HTML/CSS part of the game.
Requirements:
Animation. Dealing cards, shuffling cards etc. should be animated.
Each card can be dragged and dropped.
Here is my question:
What are the general strategies/techniques to position the elements in HTML5 games? Apparently in this game, we may not want to simply hard-code a card's position to something like top: 30px; left: 50px etc, because it has to adopt itself to different screen sizes, not to mention it has to align with other cards.
It depends mostly on how you want to go about it, but I would recommend using <canvas>. It supports animations, click handlers, everything you would need.
Also, there's the absolutely beautiful library CreateJS that you can take advantage of, which handles things like bitmaps, tweens, sounds, pre-loading large images, you name it!
If you'd prefer to just use a regular canvas, plenty of tutorials like this one that work specifically with card games in canvas.
As for clicking and dragging, the general concept is that you calculate where the object is by calculating the offset from the edge of the canvas. CreateJS allows you to easily have an 'object' that sits on the canvas, so it will automatically come complete with its own width and height. You can both define the offset and move it around with standard object syntax, using something along the lines of:
card.x = game_board.x + 100;
Having said that, there's no need to re-invent the wheel! Simon Sarris has created a great tutorial on clicking and dragging objects in canvas, which can be found here.
Hope this helps! :)
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm working in a place that we have to use images as page structure, I would like to know how wrong it is, because in my eyes is very wrong and.. I can never make perfect the layout because of the difficulty to fix the correct content over the image.
Is there any right way to do this? Any course to teach me an easy way?
Example: http://bit.ly/1GILaQs
BG: http://bit.ly/1GILfDy
We need give support to IE8, so is more difficult.
Thanks
The goal should be to reduce that file size of that image because it is very large and takes a long time to load. And also to make the layout more flexible so that when you change something you don't have to open up an image editor and rearrange things.
I don't think it is possible to replicate what you have there exactly without using large images but what I would do is try and replace some elements with simpler more easily repeatable patterns. For example replacing the red background with a simpler symmetrical gradient and removing the shadows/folds from the white image. Then for the shampoo bottles you could use individual image tags and place them within your content.
Amanda, you can have a background image that can be repeated, the red part of the layout background. Then you can have a div with the white part.I believe that's the best you can have.
I don't believe there will be a magic way that will give you the layout flexibility you're looking for. You will have to work with Photoshop and adapt the content accordingly given the nature of the layout.
Code School offers some good courses, they have one about css that can help you on that: https://www.codeschool.com/courses/css-cross-country
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I just wondering about following situation:
Description
Pictures slider placed on website by: HTML5 Video element or Javascript slider (It does matter which solution will be chosen: raw javascript or libraries).
Assumptions
One slider in fixed place on a website
Fixed numbers of pictures in a slider
Pictures don't change
Browser support doesn't matter
Parameters influencing on result
Usage of CPU/GPU
Loading speed
Weight of file or files
Ready time to show
Problem to solve
Which way is more efficient?
Have guys any experiences in this topic?
Cheers!
Ok, based on the sliders you referred to at jssor.com, it seems like a slider should be much more efficient in most ways. If there are no animations except when the user is moving the slider, then there should be no CPU/GPU usage either (assuming the slider is implemented efficiently). A video playing in the background will always use some CPU/GPU. If it's a format that most GPUs can accelerate (MPEG-2 or H.264), the CPU usage may be very small, but you can't count on that.
Of course most of those slider demos have animations going all the time. That will use CPU too.
As far as loading/startup time, a few JPEG images will usually be much smaller than a video file. The slider should start up at least as fast as a video, and use a lot less bandwidth.
As usual, the only final answer to "which is more efficient?" is "Try both and see."
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I really hate css. I try to do simple things and it gets really complicated really fast.
On the other hand, ive used canvas to code games which have a lot of functionality and menus..
So I was wondering if there is anything wrong with using a canvas element all over the webpage? Or even one giant canvas?
This article makes it seem like canvas is much better, but harder to use(which i think is the other way around) http://www.kirupa.com/html5/dom_vs_canvas.htm
Yet all the tutorials use css extensively. So is it bad practice? if so, why?
Using pixel drawing for web pages is a very bad idea, because own browser's viewport is almost the same but at the operating system level.
HTML and CSS are just simplifications of composing UIs without the hassle of forcing developers to draw what they want to show on screen by code.
I'm going to give you the best advice that you can find out there: learn CSS if this is the issue, because re-inventing wheels because of not reading the manual and a lack mind openness is just the worst decision we can ever made in software development.
Maybe taking a look at these pseudo-languages which compile into regular CSS might change your mind about HTML+CSS:
LESS CSS.
SASS / Compass
As others have said in comments...
...manual drawing means:
No SEO.
No search indexing (i.e. index your content in Google)
No user text selection
No way to save images (jpg, png...) using the "Save as..." dialog as regular HTML documents.
No viewport scaling depending on user's device.
...and dozens of cons.
OP said...
would this be acceptable in a professional environment? Say if I used
it in a portfolio to apply for a job.
No, because professional Web developers develop on top of Web standards: they're not creating alternate approaches to draw documents which aren't understandable by the mainstream development community!
If some tech recruiter with actual development knowledge discovers your way of developing the Web, he/she would say "impressive, but this candidate won't fit well in our development team".
In addition to the already excellent answer by MatÃas Fidemraizer I would like to add that it would be an interaction nightmare. You would have to manually track the position of all elements, get the position of all interaction events, coordinate them, and having an event loop running. You would, in effect, be replicating a good chunk of the browser in javascript.
Learning css is difficult for any number of reasons. If someone wrote a 'CSS: The Good Parts' it would arguably be even thinner than the Crockford book. There was recently a really great talk at CSSConf.Asia about this. Its css for back-end devs. It might give you insight into a more manageable subset of css.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
So I am on the 11th level of my game (plan to have 20-25) and listening to the music that is going to be on the game, over and over, to see if it fits while testing it.
Now I've decided it is time to start working on the media player for it.
I plan to have all the songs on a loop. You can skip songs or go previous and play/pause. There also will be a button to mute.
I know how to add the GUI to the screen and use the mouse clicks to trigger methods. Just wondering what is the most used way instead of building it from nothing and wasting time.
I am just wondering if there a tut/guide as I plan on pulling an all-nighter to do this.
I'm in college but it's summer so decided this would be great for my portfolio.
Here's a demo vid of it. It is my first game so go easy! :)
Use the <audio> tag. It has functions such as .play() and .pause(). To switch tracks, you'd modify the src to point to a different audio file, much in the same way you'd switch the src of an <img> tag to display a different image.
EDIT: I just watched video and I want to play this thing. The twist on the normal platformer (all the platforms being ones that you slowly fall through) could either be really awesome or really frustrating. I'm leaning towards awesome but that remains to be seen!