Some Settings on Top of JS Code to play around with :)
<canvas id="canvas"></canvas> |
<h1>Happy 30th Birthday, GameBoy!!</h1> | |
<p>⚡ Author: | |
<a href="https://twitter.com/Manz">Manz</a> / | |
<a href="https://github.com/ManzDev">ManzDev</a> | |
</p> | |
<div class="wrapper"> | |
<div class="power"></div> | |
<div class="gameboy"> | |
<div class="top"> |
GPGPU particles using texture caches for position and velocity.
For more of these experiments, please see: https://codepen.io/collection/XEEaEa/
<div id="paper-back"> | |
<nav> | |
<div class="close"></div> | |
<a href="#">Home</a> | |
<a href="#">About Us</a> | |
<a href="#">Our Work</a> | |
<a href="#">Contact</a> | |
</nav> | |
</div> | |
<div id="paper-window"> |
<html> | |
<head> | |
<title>Canvas</title> | |
<link href="style.css" type="text/css" rel="stylesheet"> | |
</head> | |
<body> | |
<canvas id="myCanvas" ></canvas> | |
<script src="smoke.js" type="text/javascript"></script> | |
<script>draw();</script> | |
</body> |
<div id="sequence" class="seq"> | |
<ul class="seq-canvas"> | |
<li class="step1 valign seq-in"> | |
<div class="vcenter"> | |
<img data-seq class="feature" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/bananas.png" alt="A cartoon illustration of a bunch of bananas" width="389" height="300" /> | |
<h2 data-seq class="title">Bananas</h2> | |
</div> | |
</li> | |
<li class="step2 valign"> | |
<div class="vcenter"> |
Source gif by Ramotion - https://dribbble.com/shots/2121350-Delivery-Card
Looks best in Chrome. Some parts are bugged in FF. Not working in IE below edge (if it's not working in edge, let me know pls). Card dimensions probably broken on mobile, except for iPhone 6 (because I was hardcoding pixels for this model). Don't forget to click request button inside card.
(Cool)story behind the demo:
when I saw this gif I just wanted to recreate flipping animation. I thought that it will be easy-peasy, because I worked with preserve-3d stuff in CSS before. But, when I started doing nested elements below 2nd level, everything turned to a crazy bugfest. Border-radius crazy bugs in various Chrome versions, z-index and translateZ(0) retarded things in FF and other absolutely random stuff. So when I finished flipping part, I thought that I should continue and do the rest. Oh boy... This decision gave another week of suffering and LOTS of shitty code. I will try to refactor
Source gif by Ramotion - https://dribbble.com/shots/2121350-Delivery-Card
Looks best in Chrome. Some parts are bugged in FF. Not working in IE below edge (if it's not working in edge, let me know pls). Card dimensions probably broken on mobile, except for iPhone 6 (because I was hardcoding pixels for this model). Don't forget to click request button inside card.
(Cool)story behind the demo:
when I saw this gif I just wanted to recreate flipping animation. I thought that it will be easy-peasy, because I worked with preserve-3d stuff in CSS before. But, when I started doing nested elements below 2nd level, everything turned to a crazy bugfest. Border-radius crazy bugs in various Chrome versions, z-index and translateZ(0) retarded things in FF and other absolutely random stuff. So when I finished flipping part, I thought that I should continue and do the rest. Oh boy... This decision gave another week of suffering and LOTS of shitty code. I will try to refactor
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css"> | |
<svg id="svg-source" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position:absolute; margin-left: -100%" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
<g id="close-icon"> | |
<path d="M0.014,1.778L1.79,0.001l30.196,30.221l-1.778,1.777L0.014,1.778z"/> | |
<path d="M1.79,31.999l-1.776-1.777L30.208,0.001l1.778,1.777L1.79,31.999z"/> | |
</g> | |
</svg> | |
<div class="look">Look Ma! I broke that HTML!</div><a href="https://twitter.com/legomushroom" class="by"></a> | |
<div id="js-show-modal" class="launch-button">show modal |