サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
lab.hakim.se
This page demonstrates an idea for how progress can be visualized inside of a standard page nav. Scroll the page and note how the marker animates to highlight all of the sections that are currently on screen. The rest of the content below is taken from slides.com/developers. Take a look at that to see how the progress nav looks on a real page. Created by Hakim El Hattab | hakim.se | @hakimel Slide
Try clicking different sides of the button Flipside – A button that seamlessly transitions from action to confirmation
Sketch Toy Draw sketches with shaky lines and share replays with friends. Over 65 million sketches saved to date.
Source on GitHub Follow @hakimel Tweet this
A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. For a real-world example, check out any of the forms on slides.com. expand-left Submit expand-right Submit expand-up Submit expand-down Submit contract Submit co
A three dimensional and space efficient menu. Move your mouse towards the arrow — or swipe in from the arrow if you're on a touch device — to open. Test it with any page by appending a URL, like so: lab.hakim.se/meny/?u=http://hakim.se. Meny can be positioned on any side of the screen: top - right - bottom - left Instructions and download at github.com/hakimel/meny. The name, Meny, is swedish. Cre
About An experiment with real-time audio synthesis. Works well in Chrome & Safari but runs slowly in Firefox. Thanks to Tom Ashworth for harmonising the sound! Created by Hakim El Hattab | @hakimel Tech Radar uses Audiolet to generate sound and the visuals are rendered on HTML5 <canvas>. Source code available at github.com/hakimel/Radar. Share
A context-shift transition. Use the dots below or your keyboard arrows.
An album thumbnail preview concept. Hover and move horizontally. Created by @hakimel / http://lab.hakim.se
Fokus uses JavaScript to emphasize anything you select by covering the rest of the page with semi-transparent black. Try it out by selecting this paragraph or the sample content below. You'll see the entire page fade out while this text is highlighted. If you want to use Fokus on your site you just need to include the fokus.min.js script (3kb, no dependencies). Fokus is also available as a Chrome
Click and drag to add nodes. Space to reset. Reduce the browser window size if it's slow. Style:
I'm Hakim El Hattab, a Swedish front-end developer and interface designer. I co-founded and am working on Slides. +++ Slides is a platform for creating, presenting and sharing slide decks. Sign up for free or check out this demo presentation. ResumeFilter.AI Upload a job description + resumes and ResumeFilter will tell you who's the best fit. Plus, get an individual report including strengths, wea
A modal concept which aims to give a sense of depth between the page and modal layers. Click the button below to give it a try. Open modal Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of it, not intended for any practical use. Avgrund is Swedish for abyss. Created by Hakim El Hattab @hakimel — http://hakim.se
An experimental animated ribbon which reveals a curtain of additional content. See the top right corner! Source on GitHub. This a concept for a more playful and animated GitHub ribbon. The intention was to let you use the detached ribbon to drag down an iframe-embed of the repository on github.com but I neglected to check their X-Frame-Options until finishing most of the work. Created by @hakimel
About Simply a colorful folding doodle on <canvas> Click anywhere on the drawing to change layouts. Created by Hakim El Hattab | @hakimel Share
A Christmas tree built out of form elements.
Experiments / Particles / 01 A first go at the canvas.
Hello Therereveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical SlidesSlides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1Nested slides are useful for adding additional detail underneath a high level horizontal slide. Basement Level 2That's it, time
With 3D effects. And stuff. This is old, check out the new version! Heads Up This requires a browser with support for CSS3 3D transforms, such as Mobile Safari. Vertical Slides Slides can be nested inside of other slides, try pressing down. Basement Level 1 Press down or up to navigate. Basement Level 2 This is totally the Google logo: Basement Level 3 That's it, time to go back up. Marvelous Unor
About Coil is an addictive HTML5 canvas game where you have to defeat your enemies by enclosing them in your trail. Created by Hakim El Hattab | @hakimel Share
Experiments / BreakDOM A remix of the classic Breakout game. Inspired by http://the389.com/.
Experiments / Magnetic / 02 Particles orbit around magnets which can be dragged around. Double click to add more magnets. Change skin with keyboard left / right.
Experiments / Sinuous / 01 The goal is simple: avoid the red dots! Sound design by Plan8. Turn off? Sinuous1. Avoid red dots.2. Touch green dots for invulnerability.3. Use invulnerability to destroy red dots.4. Score extra points by moving around a lot.5. Stay alive.Start
Experiments / Wave / 03 Each bubble holds a tweet with the word water in it. Click on them to read.
Experiments / Bakemono / 01 A little monster that I brought to life. Everything is drawn through code and rendered using canvas. The character design was taken from here.
Experiments / Keylight / 03 Depending on where keys are placed, different tones will be played. Double click to add new keys or press & hold to drag them around. Copy the URL to save your tune. Reset - Randomize - Decrease / Increase speed (3/6)Changed to Flash audio to reduce bandwidth consumption. See original.
次のページ
このページを最初にブックマークしてみませんか？
『The Portfolio of Hakim El Hattab』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
