An SVG animation for my site
Inspired by the wonderfully playful Creogram
A Pen by Chris Gannon on CodePen.
netmin-net
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 id="container" class="container"> | |
| <div id="output" class="container"> | |
| </div> | |
| <ul id="links" class="links"> | |
| <p>Press space to drop or pick up the light. Enter key to add another one</p> | |
| <li><a class="who" href="https://twitter.com/msurguy" target="_blank">by msurguy</a></li> | |
| <li><a class="blog" href="http://maxoffsky.com" target="_blank">Blog post</a></li> | |
| <li><a class="source" href="https://github.com/msurguy/triangles" target="_blank">GitHub</a></li> | |
| </ul> |
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
| <!--The Main Thing--> | |
| <div id="wrapper"> | |
| <div class="phone view_1" id="phone_1"> | |
| <iframe src="https://codepen.io" id="frame_1"></iframe> | |
| </div> | |
| </div> | |
| <!--Controls etc.--> | |
| <div id="controls"> | |
| <div> |
netmin-net
/ index.html
Created
April 20, 2019 06:58
Velocity.js fullscreen flexbox overlay navigation
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="overlay-navigation"> | |
| <nav role="navigation"> | |
| <ul> | |
| <li><a href="#" data-content="The beginning">Home</a></li> | |
| <li><a href="#" data-content="Curious?">About</a></li> | |
| <li><a href="#" data-content="I got game">Skills</a></li> | |
| <li><a href="#" data-content="Only the finest">Works</a></li> | |
| <li><a href="#" data-content="Don't hesitate">Contact</a></li> | |
| </ul> | |
| </nav> |
netmin-net
/ clean-and-simple-responsive-website.markdown
Created
April 20, 2019 06:54
Clean and simple responsive website
A Pen by Jeff Bredenkamp on CodePen.
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="wrap"> | |
| <div class="comp"> | |
| <div class="monitor"> | |
| <div class="mid"> | |
| <div class="site"> | |
| <div class="topbar"> | |
| <div class="cerrar"> | |
| <div class="circl"></div> | |
| <div class="circl"></div> | |
| <div class="circl"></div> |
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
| <h1><small>Fullscreen</small> Ken Burns effect <small>without javascript</small></h1> | |
| <!-- You can add more ".slideshow-image" elements, but remember to update the "$items" variable on SCSS --> | |
| <div class="slideshow"> | |
| <div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/nature/1600x1400')"></div> | |
| <div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/buildings/1600x1400')"></div> | |
| <div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/food/1600x1400')"></div> | |
| <div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/technology/1600x1400')"></div> | |
| </div> |
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
| <h1><small>Fullscreen</small> Ken Burns effect <small>without javascript</small></h1> | |
| <!-- You can add more ".slideshow-image" elements, but remember to update the "$items" variable on SCSS --> | |
| <div class="slideshow"> | |
| <div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/nature/1600x1400')"></div> | |
| <div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/buildings/1600x1400')"></div> | |
| <div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/food/1600x1400')"></div> | |
| <div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/technology/1600x1400')"></div> | |
| </div> |
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="container"> | |
| <h1>Vegas <strong>2</strong></h1> | |
| <h2>Background slideshow</h2> | |
| <p>Ken Burns effect</p> | |
| </div> | |
| <a href="http://vegas.jaysalvat.com"> | |
| Download VEGAS | |
| </a> |
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
| <link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700,800" rel="stylesheet" type="text/css"> | |
| <div id="js-car1" class="car car--1 c-green-g"></div> | |
| <div id="js-car2" class="car car--2 c-green-g"></div> | |
| <div id="js-fast" class="c-green-c-g text text--fast"> | |
| <div class="text__bit text__bit--1"> | |
| <div id="js-bit-inner" class="text__bit__inner"><span id="js-span">f</span></div> | |
| </div> | |
| <div class="text__bit text__bit--2"> | |
| <div id="js-bit-inner" class="text__bit__inner"><span id="js-span">a</span></div> |