| <a href="" target=""><canvas id="sketch"></canvas></a> |
Using :hover and the sibling selector (~), we can apply different styles to elements based on their position. Removing the visibility transition gets rid of the previous element's ghost for a cleaner slide-in with no slide-out. Layout and images are auto-generated with Pug. Refresh for something different,
A simplified pen if you have trouble understanding how it works.
| <div class="container"> | |
| <div class="background"></div> | |
| <div id="particles"></div> | |
| <div class="foreground"></div> | |
| </div> |
| <canvas id = 'canv'></canvas> |
First time using GSAP.
Loosely based on: https://dribbble.com/shots/1758302-Day-and-Night
by Joanna Ngai: https://dribbble.com/joannan
| <h2>Top 50 Codepen Users by Follower Count</h2> | |
| <p>As of July 26, 2015</p> | |
| <div class="ct-chart"></div> | |
| <h3>Chris Coyier had double the amount of the highest follower count. He's so popular we had to omit him because he was visually skewing the data.</h3> |
| <header class="container"> | |
| <div class="logo"> | |
| <h1 class="logo__heading"> | |
| <img class="logo__image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/jpng-logo.png" alt="JPNG.svg" /> | |
| </h1> | |
| <small class="logo__subtitle"><em>This logo was originally 300kb, but compressed down to 69kb using the tool below.</em></small> | |
| </div> |
Ajax type ahead emoji search using the fabulous Fetch API. It started as my own spin on Wes Bos' JS30 Ajax Type Ahead screencast. What followed was my desire to jump on the Codepen emoji bandwagon!
A Pen by Tobi Weinstock on CodePen.
| <div class="container"> | |
| <ul class="slides"> | |
| <li id="slide1"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw1.jpg" alt="" /></li> | |
| <li id="slide2"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw2.jpg" alt="" /></li> | |
| <li id="slide3"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw3.jpg" alt="" /></li> | |
| <li id="slide4"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw4.jpg" alt="" /></li> | |
| <li id="slide5"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw5.jpg" alt="" /></li> | |
| </ul> | |
| <ul class="thumbnails"> |
After some hacking of the Explode Modifier script, I've managed to add three new faces to each face in the Icosahedron Geometry. Connecting them to a vertex positioned in the center of that face and moving them individually enables me to achieve this effect.
A Pen by Daniel Del Core on CodePen.