David Miller Orangetronic
Orangetronic
/ index.html
Created
December 31, 2012 00:19
A CodePen by David Miller. page flow experiment - exploring ways of flowing elements around page transition.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header> | |
| <div class="button first" href="#1">1</div> | |
| <a class="button second" href="#2">2</a> | |
| <a class="button third" href="#3">3</a> | |
| <a class="button fourth" href="#4">4</a> | |
| </header> | |
| <div id="container"> |
Orangetronic
/ pageslider.html
Last active
December 10, 2015 05:08
A CodePen by David Miller. Super Simple Responsive Slider (for your single-page buzzword site!) - Super lightweight slider for handling "page" transitions in a single-page site case. Been wanting to figure this out for a while, and hadn't just sat down and done it. But now I have! Uses css3 transitions to move between pages. Tasty webkit hardwar…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="navigation"> | |
| <ul> | |
| <li> | |
| <a href="#left" class="link-left">Look at that left page</a> | |
| </li> | |
| <li> | |
| <a href="#middle" class="link-middle">Look at that middle page</a> | |
| </li> | |
| <li> | |
| <a href="#right" class="link-right">Look at that right page</a> |
Orangetronic
/ minimalPageSlider.html
Last active
October 13, 2015 15:18
A CodePen by David Miller. Single page app CSS page slider with bonus minimalism - Forked. cleaner.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="navigation"> | |
| <ul> | |
| <li> | |
| <a href="#left" class="link-left">Look at that left page</a> | |
| </li> | |
| <li> | |
| <a href="#middle" class="link-middle">Look at that middle page</a> | |
| </li> | |
| <li> | |
| <a href="#right" class="link-right">Look at that right page</a> |
NewerOlder