Just for fun if it is possible

I have just started working on a quadrocopter website, thought a header with a sky background and grass for the footer would be memorable… Then thought, once the page has rendered, how about a quadrocopter taking off from the footer, floating up the page, and finally coming to rest in the header.

Could CSS transform be used or would it have to be JavaScript?

1 Like

There’d be no way to tell in CSS when the page has fully rendered, minus some sort of JS-addition.

As far as the sky, clouds, sun, grass, etc, that’s all possible (and I actually made it for a SP competition many years ago). Wish PMs weren’t removed as part of the vbulletin switch…

The quadrocopter effect could be done in CSS, but the timing you want is the only thing that wouldn’t be possible CSS only :slight_smile: .

1 Like

The switch from vbulletin to discourse didn’t remove PMs - it just changed how you access them. They are now accessed via the Messages section in your profile.

Pretty sure all PMs pre-Discourse (aka on vBulletin) are not available; I seem to recall being told that either download the PMs, or they would be deleted as part of the switch.

I think you may have misunderstood what Ryan meant. Ryan was talking about a PM that he wrote when we were using vBulletin. The PM’s from the vBulletin system were not brought over into the Discourse system. We were encouraged to copy ours to a personal file on our computers if we wished to keep them.

3 Likes

I’ve made a start and I know it is sad and crying out for improvements :smile:

J_B’s Drone

Hello, I think that more better to use JavaScript))

You have a great header)))) It is very interesting for your attention! I think that such things, can help to turn your needs! Also, it is very important to read something things)
Good luck, thank you very much for it)

1 Like

It looks like that might change and including the stylesheet at the end of the html will mean it only gets loaded at that point and not before the content above it.

1 Like

@PaulOB

How does the proposed delayed loading compare with the following:

https://googleblog.blogspot.com/2015/10/introducing-accelerated-mobile-pages.html

https://www.sitepoint.com/community/t/accelerated-mobile-pages-second-attempt/218621/2

I have vague memories that @James_Hibbard created a JavaScript demo with pink elephants flying across the screen.

Can some kind member supply the link?

The AMP project seems to create a separate page for mobile which is ok for news feeds and quick reading but I’m not sure general users would appreciate getting the full site. I think a better approach is to do it with a standard html approach and the sequential loading of the link element in the body seems to cover most of the css issued raised in that article.

You can have your above the fold content straight away without inline styles and then the rest of the page loads afterwards. Of course pages need to be built with this in mind and may lead to much better modular stylesheet rather than the one big css file. (http2 actually prefers the smaller stylesheets rather than one big one apparently.)

Most of the above is new to me so I may be off-target but I do quite like the idea of allowing stylesheets in the body of the html just like script elements although purists won’t like the html being sullied. Another benefit of this approach is that ‘includes’ and CMS systems can include the css with the html section rather than having to stack everything in the head (or foot) just in case.

3 Likes

maybe am missing the point, but…what about CSS animations.
BARRING the need for second-perfect timing, the quad copter animation would not start until the page is rendered (since it’s a CSS animation). you can add a small delay prior to start, as a safety margin.

1 Like

Trying to get the AmpProject to do what I want it to do on an existing site is not easy.

As way as an illustration, my existing thumbnails page conforms to the AmpProject validator so I was able to add the following functionality for testing purposes:

I created a “pictures-amp” test page that defaults to having 9 thumbnails on the page. According to the blurb, when the web-page is displayed only above the fold content will show a limited amount of thumbnails. The page should render in the same amount of time regardless of the thumbnail numbers!!!

I have added an additional parameter to the page which will request the number of parameter thumbnails. The following links have a different number of thumbnails. Scrolling the page reveals additional thumbnails and regardless of the number of thumbnails the web-page should take not take any additional time.

Demo using 9 default thumbnails

Demo using 420 thumbnails

Demo using 9999 thumbnails [actually only 1042 thumbnails available]

I have yet to try without using JavaScript :frowning:

All three web-page results load in about the same time.

Edit:
Reduced the default number of thumbnails.

Is it just me but I hate sequential loading of content?

When I go to a site I don’t mind waiting a few seconds for the page to load - I’ll just have a sip of tea and wait. Once I’m on the page though I want to scroll up and down very quickly and scan through the page from top to bottom before I delve in to content. If every time I scroll I have to wait for more content to load I get frustrated and leave.

I see this more and more and even discourse uses this approach and is the reason that sites like facebook are more or less unusable unless you have a fast connection.

Maybe I’m just old fashioned :smile:

5 Likes

No.

I like reaching a footer as it gives me a sense of “task completion”

Not that I like a 5 paragraph article to be 5 pages with next links either.

That could be it. I know I catch myself sounding like my grandfather more and more often.

I remember when …

1 Like

@PaulOB

less unusable unless you have a fast connection.

Maybe I’m just old fashioned

I agree completely about fast connections and very long pages.

The last link I provided allows a relatively fast “above the fold” display and quickly scrolling to the bottom displays the remaining thumbnails. Scrolling back up quite a few pages bypasses empty thumbnail placeholders and only shows thumbnails on pages when scrolling has temporarily stopped. I think this is a big improvement than waiting for every image to load.

Personally I hate long web-pages especially since my internet service provider only supplies fast connections to people living on the ground floor :frowning:

The main reason I was impressed with the technology is because of the good old BBC being involved with development. All their sites just work even with my limited internet connection.

Do you mean this?

now concerned that I’m not seeing pink elephants

There were unicorns in there somewhere.
The fiddle is at revision 8, so maybe in one of the previous revisions?
Other than that, the thread was in the MC somewhere (final days of VBulletin, I believe)

I’m not seeing anything - I can’t get JSFiddle to work on Firefox, and haven’t been able to for a long time.

[quote=“James_Hibbard, post:19, topic:218925”]
Other than that, the thread was in the MC somewhere (final days of VBulletin, I believe)
[/quote]Sadly, none of that stuff was imported, and it’s now inaccessible.