Tilted Content Slideshow | Codrops
A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations. The FWA landing page has a really nice content slider that plays with 3D perspective on screenshots and animates them in an interesting way. Today we’d like to recreate part of that effect and make a simple content slideshow with some fancy 3D animations. The slideshow won’t be the
Old School Cassette Player with HTML5 Audio
Vintage format meets modern web tech: an HTML5 audio player with realistic controls Best viewed & listened to in modern browsers CSS animations are not supported in your browser CSS transforms are not supported in your browser CSS 3D transforms are not supported in your browser CSS transitions are not supported in your browser Sorry, only modern browsers.
BookBlock: A Content Flip Plugin | Codrops
A jQuery plugin that will create a booklet-like component that let’s you navigate through its items by flipping the pages. BookBlock is a plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow f
Examples of Creative and Modern Effects in Web Design | Codrops
From hover to scroll, there are many ways to surprise and engage website visitors. The possibilities are endless. Get inspired with these examples of creative and modern effects in web design. Modern web technologies are pushing the boundaries of creativity and today we want to share a little collection of modern websites with some great effects. From hover to scroll, there are many ways to surpri
3D Flipping Circle with CSS3 and jQuery | Codrops
In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients. Today I would like to show you how to create a little component with a realistic touch. The idea is based on the sweet paper effect found in the video of the Google Developer Stories. Maybe you ha
Experimental Page Layout Inspired by Flipboard | Codrops
An experimental page layout that let’s you navigate pages by swiping or dragging as in a booklet, inspired by Flipboard. Today we want to share an experimental 3D layout with you. It’s inspired by the famous Flipboard app where a seamlessly “normal” page flips like a page in a book when swiped. We’ve tried to re-create that effect using CSS 3D transforms and JavaScript, making a layout that is “fl
Creative CSS3 Animation Menus | Codrops
Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements. Being in the mood for experimenting with CSS3
Fluid CSS3 Slideshow with Parallax Effect | Codrops
In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides. In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. We’ll use radio buttons and sibling combinators for controlling which slide is s
Rotating Words with CSS Animations | Codrops
Using CSS Animations we will change or rotate some parts of a sentence. In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations. Please note: the result of this tutorial will only work as intended in browsers that support CSS animations. So let’s start
Color and Emotion: What Does Each Hue Mean? | Codrops
Color can evoke a wide-range of responses and it is important to understand the effect a hue can have on your message when planning a design project. You have probably heard people refer to warm and cool colors when making choices about how to paint a room or what shade of makeup a woman selects. But did you know that color can mean so much more than that? The colors you use on your website can el
Slideshow with jmpress.js | Codrops
Today we will create a slideshow using jmpress.js. The jQuery plugin that is based on impress.js will allow us to use some interesting 3D effects for the slides. You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The jQuery port jmpress.js let’s you use this library as a jQuery plugin with some added options. We want to show yo
Responsive Horizontal Layout | Codrops
In this tutorial we’ll create a horizontal website layout with individually scrollable content panels. We’ll change the layout for smaller screens, making it responsive. Today we want to show you how to create a horizontal layout with several content panels. The idea is to make each panel individually scrollable and animate a content panel to the left of the viewport once it’s clicked or selected
Portfolio Image Navigation with jQuery | Codrops
Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate. Today we want to create a portfolio image navigation template with jQuery. The idea is to show some por
Creating a Rotating Billboard System with jQuery and CSS | Codrops
Currently we are in the “hey, let’s do that flash thing in jQuery”-mood and so we came up with another idea: a rotating billboard system. In this tutorial we will […] Currently we are in the “hey, let’s do that flash thing in jQuery”-mood and so we came up with another idea: a rotating billboard system. In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating bil
66 Famous Fashion Websites for your Inspiration | Codrops
Here is a list of inspirational web designs from the fashion design industry. Most of them use Flash to create a “fashion experience” when visiting their site and some are […] Here is a list of inspirational web designs from the fashion design industry. Most of them use Flash to create a “fashion experience” when visiting their site and some are exceptionally innovative. Although almost all of the
Music Portfolio Template with HTML5 and jQuery | Codrops
Today we want to share a music portfolio template with you. The idea is to create an artist portfolio with a discography line up and HTML5 audio player jPlayer. The […] Today we want to share a music portfolio template with you. The idea is to create an artist portfolio with a discography line up and HTML5 audio player jPlayer. The artist albums are shown using the jCarousel plugin and the user ca
Circular Discography Template with jQuery | Codrops
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 […] 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 next or previous. When clicking on an album, we
3D Wall Gallery | Codrops
Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when […] Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gall
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BookBlock: A Content Flip Plugin - Demo 1
Fullscreen Image 3D Effect with CSS3 and jQuery