Palmer Pocket Bass Amp
£138.57Since 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 NowThe 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.
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.
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.
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.
The has the following icons … …
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.