Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #24949 > unrolled thread

Simple graphics/animation question

Back to article view | Back to comp.lang.javascript

Contents

  Simple graphics/animation question patchydunn@gmail.com - 2014-06-19 15:05 -0700
    Re: Simple graphics/animation question "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-06-20 01:05 +0200
    Re: Simple graphics/animation question "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-06-20 16:17 +0300
      Re: Simple graphics/animation question Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2014-06-20 13:55 -0300
        Re: Simple graphics/animation question Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-21 05:08 +0200
          Re: Simple graphics/animation question Joao Rodrigues <groups_jr-1@yahoo.com> - 2014-06-22 00:56 -0300
            Re: Simple graphics/animation question Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-24 12:54 +0200
    Re: Simple graphics/animation question Danny <dann90038@gmail.com> - 2014-06-20 12:37 -0700
    Re: Simple graphics/animation question "Chris M. Thomasson" <no@spam.invalid> - 2014-06-20 16:53 -0700

#24949 — Simple graphics/animation question

I'm relatively new to programming, but want to create a program with the following function: An image of a ball moves across the screen and goes "behind" an image of a basket. How feasible is this with Javascript and HTML? 

[toc] | [next] | [standalone]

#24950

patchydunn@gmail.com wrote on 20 jun 2014 in comp.lang.javascript:

> I'm relatively new to programming, but want to create a program with the
> following function: An image of a ball moves across the screen and goes
> "behind" an image of a basket. How feasible is this with Javascript and
> HTML? 

I would say a feasability of 6.93 on a scale of 6.93, 
that HTML with Javascript and CSS can do that.

Using modern css it can even be done without javascript,
6.93 on that same scale too. 

I have no idea about the feasability that you can create it, since you use 
the word "create" for such simple programming, suggesting to me some magical 
expectation.

Now go out into the world of programming and look for examples, read the 
specs of HTML and CSS. They can be found all over the web.

How relative is your newness to programming, btw?

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#24952

2014-06-20 1:05, patchydunn@gmail.com wrote:

> I'm relatively new to programming, but want to create a program with
> the following function: An image of a ball moves across the screen
> and goes "behind" an image of a basket. How feasible is this with
> Javascript and HTML?

Rather easy.

You could even use just HTML and CSS: use a <marquee> element containing 
a ball as an image or as a character and a <span> element positioned 
over the <marquee> element.

You could also use CSS animation to create the movement.

Alternatively, you can make the ball move with JavaScript, using 
setTimeout() to perform a change of its position at regular intervals.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#24953

Em 20/06/2014 10:17, Jukka K. Korpela escreveu:
> 2014-06-20 1:05, patchydunn@gmail.com wrote:
>
>> I'm relatively new to programming, but want to create a program with
>> the following function: An image of a ball moves across the screen
>> and goes "behind" an image of a basket. How feasible is this with
>> Javascript and HTML?
>
> Rather easy.
>
> You could even use just HTML and CSS: use a <marquee> element containing
> a ball as an image or as a character and a <span> element positioned
> over the <marquee> element.
>
> You could also use CSS animation to create the movement.

Try using animate.css:
<http://daneden.github.io/animate.css/>

>
> Alternatively, you can make the ball move with JavaScript, using
> setTimeout() to perform a change of its position at regular intervals.
>

I'd suggest experimenting with requestAnimationFrame function, which is 
widely supported and more efficient than the traditional setTimeout() 
approach:
<http://caniuse.com/requestanimationframe>

E.g. 
<http://flippinawesome.org/2014/05/20/frame-by-frame-animation-with-html-and-javascript/>

-- 
Joao Rodrigues (J.R.)

[toc] | [prev] | [next] | [standalone]

#24956

Joao Rodrigues wrote:

> Em 20/06/2014 10:17, Jukka K. Korpela escreveu:
>> 2014-06-20 1:05, patchydunn@gmail.com wrote:
>>> I'm relatively new to programming, but want to create a program with
>>> the following function: An image of a ball moves across the screen
>>> and goes "behind" an image of a basket. How feasible is this with
>>> Javascript and HTML?
>>
>> Rather easy.
>>
>> You could even use just HTML and CSS: use a <marquee> element containing
>> a ball as an image or as a character and a <span> element positioned
>> over the <marquee> element.
>>
>> You could also use CSS animation to create the movement.
> 
> Try using animate.css:
> <http://daneden.github.io/animate.css/>

*You* would.  Run over a fly with a T-54...

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#24959

On 06/21/2014 12:08 AM, Thomas 'PointedEars' Lahn wrote:
> Joao Rodrigues wrote:
>
>> Em 20/06/2014 10:17, Jukka K. Korpela escreveu:
>>> 2014-06-20 1:05, patchydunn@gmail.com wrote:
>>>> I'm relatively new to programming, but want to create a program with
>>>> the following function: An image of a ball moves across the screen
>>>> and goes "behind" an image of a basket. How feasible is this with
>>>> Javascript and HTML?
>>>
>>> Rather easy.
>>>
>>> You could even use just HTML and CSS: use a <marquee> element containing
>>> a ball as an image or as a character and a <span> element positioned
>>> over the <marquee> element.
>>>
>>> You could also use CSS animation to create the movement.
>>
>> Try using animate.css:
>> <http://daneden.github.io/animate.css/>
>
> *You* would.  Run over a fly with a T-54...
>

animate.css is a bunch of cross-browser CSS animations. The OP might 
want to take a look at all the possibilities and pick the ones that fill 
his project requirements:
<https://github.com/daneden/animate.css/tree/master/source>

*You* might like the "attention_seekers" effects. It's so you!


-- 
Joao Rodrigues

[toc] | [prev] | [next] | [standalone]

#25000

Joao Rodrigues wrote:

> On 06/21/2014 12:08 AM, Thomas 'PointedEars' Lahn wrote:
>> Joao Rodrigues wrote:
>>> Em 20/06/2014 10:17, Jukka K. Korpela escreveu:
>>>> You could also use CSS animation to create the movement.
>>> Try using animate.css:
>>> <http://daneden.github.io/animate.css/>
>> *You* would.  Run over a fly with a T-54...
> 
> animate.css is a bunch of cross-browser CSS animations.
                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
You are parroting nonsense again.

> The OP might want to take a look at all the possibilities and pick the
> ones that fill his project requirements:

True, but that is not what you meant, unsurprisingly.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#24954

to patch...@gmail.com

as many other fellows already pointed out,
depending on what you're after, it could be done with js or even just css
alone,  css version --> http://www.webdevout.net/test?0Ah&raw <--
click on the ball, then click outside it

[toc] | [prev] | [next] | [standalone]

#24955

>wrote in message 
>news:ab26a5ad-8582-4ea5-85c9-1efa7e639aa3@googlegroups.com...

>I'm relatively new to programming, but want to create
>a program with the following function: An image of a
>ball moves across the screen and goes "behind" an
>image of a basket. How feasible is this with Javascript
>and HTML?

Sort the images along z. This will allow for css animated
objects to paint in front of one another. Sorry if this is off
topic for your query.

FWIW, this does not have any z, but the rotations seems to
provide a portion of it... ;^)

http://webpages.charter.net/appcore/ctfractal.html

Think of a carousel of images rotating around a logo
in the center. The images behind the logo need to have
the logo painted after them. This can be calculated by
providing a painting order down z.

? 

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web