Graphic Design [2]

Banner/Slider

ThemeKit Graphic Banner Sliderck Graphic Banner 2ck Graphic Banner 3ck Graphic Banner 4ck Graphic Banner 5ck Graphic Banner 6

Palmer Pocket Bass Amp

£138.57

Since autoplay sliders should not be used on a responsive site since they drain the battery of a mobile devices a pure CSS slider is a good alternative.

Buy Now
Banner Slider

The ThemeKit Graphic Design Banner Slider is created using CSS with no Javascript which makes it suitablefor mobile devices. It plays through the images, stops at the last one and can be restarted by clicking the refresh tab.
The container is a two column grid with an HTML5 <figure> and an <article>. Below the breakpoint the text moves below the images.
Images
The images in the demo ere sized to 600 x 600px and optimised before importing into EverWeb to reduce their file size to less than 40KB.
The first placeholder image is also inserted last so that it shows when the animation ends.
The images have the option to be lazy loaded.
Animation
The time the slide is in view is set in seconds and the transition time is in milliseconds. The refresh function is an option and has controls for the icon color and the background color and its opacity.
NOTE that the refresh function will only work when the page is published to a local or remote server.

Isometric Image

The ThemeKit Graphic Design Iso Image appears transformed on page load and rotates upright on hover or tap..
The image can be be rotated on the X-axis, in a positive or negative direction on the Z-axis with the scale reduced. There are have options for a border and an all around box shadow on page load.
The image position on the Y-axis can be adjusted if required.
On hover the scale is increased and the rotate angle returned to zero. The box shadow switches to the bottom of the image.
Images
The image is inserted in two sizes for computer and mobile devices. The images in the demo were sized to 960 x 640px and 640 x 400px and optimised before importing into EverWeb.
The images have the option to be lazy loaded.
Link
When the link option is selected the icon appears at the top right. The link can open an internal or external page.
Mobile Devices
On touch devices, tapping the image will animate it. Tapping anywhere else on the device's screen will return it to its onload position.

Graphic Iso Image 1
Rotate X 20°
Rotate Z -10°
Graphic Iso Image 2
Optional Image Link
2 Images

The ThemeKit Graphic Design Iso 2 Image has common controls for rotae on X-axis and on the Z-axis.
The images have their own controls for reversing the rotation on the Z-axis. On mobile phones the rotation and the hover animation is removed and the right image moves below the left.

Footer Bar

There's nothing worse than seeing a large ugly footer packed with hard to find info stuck at the bottom of every page.
A better option is a show/hide footer bar with all the reuired links and nothing else.
The ThemeKit Graphic Design Footer Ba rhas been designed for maximum efficiency and fast download using minimal code and external scripts.
The icons are designed using CSS and have a tooltip which appears on hover or tap to indicate the destination or purpose.

Options

The has the following icons … …

  • Optional home page link
  • Spam protected emailfumction
  • Copyright function with auto year update
  • Phone number/phone call function
  • Optional internal link for an info page
  • Smooth scroll to the top function

Show Hide

The footer bar is always available using a show/hide function. It is hidden on sroll down and appears when the bottom of the page is reached and on scroll up.