Special Features

Documentation of where the latest versions of special and obscure features are to be found.

Contents

3D Perspective

Cannonball Baker:

Images need to be larger than the 540.405 standard and transparent GIFs or PNGs.

Works well to bring life to old B&W photos.

This page also has clever ways to extract photos from adverts and magazines.

Border Reveal

Not presently used on LPMCC.net

The border is drawn when the whole area scrolls into view.

See the HTML, CSS animations, and JavaScript controlling the trigger on this page.

There is a glitch on the lower radii. Square corners work best and require mask2 animation-delay equal to mask1 animation-duration. The mask2 animation-delay is reduced for radiused corners. Set here by trial and error.

The event trigger on scroll-into-view may be more useful than the border reveal !

Changing Captions

Watermill report: The function position_fig() is called by "try" in writePortraitHTML() to move fig-leaves over rude parts of photos. It is used in this example to change the captions as photos are changed.

Expanding Photo

Dragon adverts: and magazine covers with magnifying glass.

Full 360° Panorama

Embers January 2025:

  1. Create a full 360° panorama (using the feature found on a smartphone). Note direction of North.
  2. Make sure there is no overlap and adjust the angle or vertical alignment to join the left and right horizons.
    (use the Ruler as a reference).
  3. Resize and crop to 405px high. Maybe slightly adjust with width to a simple number.
  4. Change CSS DIV.smarks width to photoWidth + 540px.
  5. JavaScript delay_scale() calls
    make_scale(photoWidth,pixelsToNorth,panoramaId)

Opening Page

Brochure: The page image "turns" to reveal a transcribed version.

Rain

September Cycling: Whether cycling, motorcycling or rallying, it is bound to rain some of the time. To capture rain in still photographs takes a little CSS. The example on this page includes lightning flashes, but no thunder!

Round text

This feature is not yet used on LPMCC.net See the CSS on this page. It uses two transparent DIVs with shape-outside:poygon() to contour the left and right of justified text. An example of it in use is at the end page of Jasmine Journal 23, February 2025, where it is stretched horizontally to form a flattened oval to shape the text. Possible use may be in a future Blog.

Snowing

Pre-Elephant Rally: One of the earliest reports to feature falling snow overlaid onto a typical winter rally scene. This page has been updated with the latest version that emphasises the perspective of looking through falling snow.

Sortable Table

Ember miles: Uses home/sortable.js with cell elements containing data-sort string values in a sortable format.

Speech bubbles

Dragon dialogue: Used in the general content flow and in a scrolling messenger type frame, <div class=chatwindow></div> used in Embers' cycling reports.

Transcriptions

F.N.O.M.C.C. Rally: First example of making transcribed text visible by clicking the image. Needs applying to older pages where there are hidden transcripts.