Fullscreen Image Blur Effect with HTML5
by Manoela Ilic
Today we want to share a neat image blur effect with you. Using canvas, we want to blur images on the transition to another one, creating a smooth effect.
Playground
The Playground features web experiments, concepts, and layouts that push the boundaries of traditional design and showcase the latest in animation techniques.
Fullscreen Image 3D Effect with CSS3 and jQuery
by Manoela Ilic
Today we want to share one of our CSS 3D Transforms experiments with you. The idea is to show an image’s fullscreen version by rotating two blocks in three-dimensional space. The faces of the blocks being rotated to the front will show the fullscreen image.
Wave Display Effect with jQuery
by Manoela Ilic
How cool is it to sometimes just display content a little bit differently? Today we want to share an experiment with you that let’s you show images and content in a unique form – a wave. The idea is to initially have some smaller thumbnails rotated and placed in a wave-like manner. When clicking on a thumbnail, we’ll “zoom” into the wave. Clicking again will make the large content area appear; here we will show some more content.
Elastislide – A Responsive jQuery Carousel Plugin
by Manoela Ilic
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images.
Slicebox – A fresh 3D image slider with graceful fallback
by Manoela Ilic
Slicebox is a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don’t support the new properties.
J is for jCookies – HTTP Cookie Handling for jQuery
jCookies, a jQuery plugin, makes getting and settings HTTP Cookies a breeze. jCookies allows the storage of any type of data: strings, arrays, objects, etc. A while back while developing my FormBuilder I needed a good solution for storing cookies via JavaScript. As a result of the work down for that project I built jCookies.
Automatic Image Montage with jQuery
by Manoela Ilic
Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use. With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps.
Image Zoom Tour with jQuery
by Manoela Ilic
Today we want to share a little zoom tour script with you. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view. This next step can contain other tags that again allow to show more images. We achieve the “zoom” effect by enlarging the current image and fading in the new one.
Circular Content Carousel with jQuery
by Manoela Ilic
Today we want to share a simple circular content carousel with you. The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.
Expanding Fullscreen Grid Portfolio
by Manoela Ilic
Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.
Content Rotator with jQuery
by Manoela Ilic
Today we want to share a fancy content rotator with you. It shows some image with a headline and sub-headline in each slide and allows navigating through the slides using the thumbnails that also contain a headline. Hiding the thumbnails will reveal a scrollable text container and the navigation arrows will move up so that one can navigate to the previous or next slides.
Vertical Sliding Accordion with jQuery
by Manoela Ilic
Today we want to share a slick and flexible vertical jQuery accordion with you. The main idea is to expand the accordion slices on click and show some more information. The other slices will become less opaque and squeezed. When navigating to the next slice using one navigation arrows, a new slice will slide in from the top or the bottom. Once a slice is open and we navigate, the subsequent slice will open on slide.
Sliding Background Image Menu with jQuery
by Manoela Ilic
Today we want to share another jQuery menu with you. This menu will have several panels, each one corresponding to a different background image that will show on all panels when we hover over a panel label. Also, a submenu will slide out from the bottom. This menu comes with some configuration possibilities, such as size of the image, the hover effect and custom default states.
Grid Navigation Effects with jQuery
by Manoela Ilic
Today we want to share some neat grid navigation effects using jQuery. In our examples we will show you ten ways how to navigate through a set of thumbnails. We’ll take a look at some of the possibilities and how to apply the effect.
Sliding Letters with jQuery
by Manoela Ilic
Today we have a neat little effect for you. We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. […]
Restaurant Website and Gallery Template
by Manoela Ilic
Today we want to share a little website experiment with you. The theme for today’s template is a restaurant website which will include an image gallery for the menu and […]
Mega Web Buttons Pack #1
Today we want to share our first set of easy-to-implement buttons called ‘Mega Web Buttons Pack’. In this set you will find 42 buttons which you can use easily on […]
Circular Discography Template with jQuery
by Manoela Ilic
Today we want to share a simple website template with you. The template will show some discography or music albums in a rounded fashion, rotating the albums when clicking on […]
