Databases
StackOverflow2013
Postsdbo
POHow to animate div along path according to time of day
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to animate div along path according to time of day
    primarykey
    data
    text
    <p>This problem has driven me nuts and I'm looking for insight into best way to solve this problem.</p> <p>I have a div $(".sun") that I want to move along the circumference of an ellipse, which I've generated with Raphael.js, so that the ellipse is as wide as the screen and horizontally centered, and as tall as half of the width, and is absolutely positioned at 0,0 (top left):</p> <pre><code>//draw ellipse that is as wide as the window and half as tall as the width var paper = Raphael(document.getElementById("ellipse"), Wwidth, halfIt); var c = paper.ellipse(Wwidth/2, halfIt/2, Wwidth/2, halfIt/2); c.attr({'fill': 'transparent', 'stroke': 'red'}); </code></pre> <p><a href="http://jsfiddle.net/jelewis8/y47Cr/3/" rel="nofollow">jsfiddle here</a> (changed values in jsfiddle for demo)</p> <p>The ellipse is a stylized representation of the path a celestial body travels in the sky. This means that at 6am, the sun is at the far left side of the screen at the ellipse's major axis. At 12noon the sun would be at the top center of the screen, and at 6pm the sun is on the far right of the ellipse's major axis.</p> <p>Put in terms of degrees, 6AM = 180 degrees, 12 noon = 90 degrees, 3PM = 45 degrees, and so on. Essentially, each hour between 6am and 6pm is separated by 15 degrees. Add in a calculation for the minutes:</p> <pre><code>var hours = new Date().getHours(); (removed code that converts the numerical hour to my stylized degrees for brevity) var mins = new Date().getMinutes(); var minsdegree = mins * .25; var skyangle = hourdegree + minsdegree; </code></pre> <p>So for example, if it were 11:39AM, skyangle would equal 114.75 degrees.</p> <p><em>The Challenge:</em> How can I animate the sun along the path of the ellipse such that it corresponds to my custom angle depending on the time. Technically, I don't need it to "animate" so much as simply correspond to the correct angle upon page load. However, it would be neat to have it animate along the path, if you kept the page open long enough.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USf8xmulder
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to animate div along path according to time of day
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to animate div along path according to time of day
      1. USjeffery_the_wind
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload