Inspired by Pokemon Go, a CSS-only animated version of Eevee. Works best in Chrome and Firefox.
A Pen by David Khourshid on CodePen.
<?php | |
$countries = array("Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra", "Angola", "Anguilla", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegowina", "Botswana", "Bouvet Island", "Brazil", "British Indian Ocean Territory", "Brunei Darussalam", "Bulgaria", "Burkina Faso", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Cayman Islands", "Central African Republic", "Chad", "Chile", "China", "Christmas Island", "Cocos (Keeling) Islands", "Colombia", "Comoros", "Congo", "Congo, the Democratic Republic of the", "Cook Islands", "Costa Rica", "Cote d'Ivoire", "Croatia (Hrvatska)", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Falkland Island |
<input type="checkbox" id="switch" /> | |
<div id="app"> | |
<header class="ui-header"> | |
<i class="fa fa-chevron-left"></i> | |
<div class="ui-text -app-title">App Settings</div> | |
<div class="ui-text">Apply</div> | |
</header> | |
<main class="ui-content"> | |
<div class="ui-discounts"> | |
<i class="fa fa-codepen"></i> |
<head> | |
<meta charset="utf-8"> | |
<title>360° Image Gallery</title> | |
<meta name="description" content="360° Image Gallery - A-Frame"> | |
<script src="https://rawgit.com/aframevr/aframe/917c06889ee1f3f79b7b1bbd9eab9815f9512503/dist/aframe.min.js"></script> | |
<script src="https://npmcdn.com/[email protected]"></script> | |
<script src="https://npmcdn.com/[email protected]"></script> | |
<script src="https://npmcdn.com/[email protected]"></script> | |
<script src="https://npmcdn.com/[email protected]"></script> | |
<script src="https://rawgit.com/aframevr/aframe/master/dist/aframe.min.js"></script> |
<div id="container"></div> | |
<div id="info"> | |
<div class="mode"> | |
<div class="action" id="vr_mode"><span>vr mode <br/>(Split Screen + Device Orientation)</span></div> | |
<div class="action" id="desktop_mode"><span>desktop mode</span></div> | |
</div> | |
<div class="attraction"> | |
<div class="action" id="rollercoaster"><span>rollercoaster</span></div> | |
<div class="action" id="ferris_wheel"><span>ferris wheel</span></div> | |
<div class="action" id="monster"><span>monster</span></div> |
<div class="landscape"></div> | |
<div class="filter"></div> | |
<canvas id="canvas"></canvas> |
Inspired by Pokemon Go, a CSS-only animated version of Eevee. Works best in Chrome and Firefox.
A Pen by David Khourshid on CodePen.
<div id="content"> | |
<span class="expand"> | |
Oh well, heil Hitler, bitch! And let me tell you something else. So what're you saying? Like, I shot someone with, like, a gun? We flipped a coin, okay? You and me. You and me! Coin flip is sacred! | |
</span> | |
</div> | |
<div id="content"> | |
<span class="expand"> | |
Your job is waiting for you in that basement, as per the coin! I took this vo-tech class in high school, woodworking. I took a lot of vo-tech classes, because it was just big jerk-off, but this one time I had | |
</span> | |
</div> |
.icons | |
%div | |
.play | |
%div | |
.stop | |
%div | |
.pause | |
%div | |
.back | |
%div |
<div id="pane"> | |
<div id="title">Resize, Drag or Snap Me!</div> | |
</div> | |
<div id="ghostpane"></div> |
<!-- https://twitter.com/wearenextcode --> | |
<!-- https://twitter.com/TaminoMartinius --> |