161 lines
7.9 KiB
HTML
161 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - Selected Demos 2019-2020</title>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div id='wrap'>
|
|
<h1 data-splitting='words'>Selected Demos</h1>
|
|
<p class='subhead'>Adam Kuhn</p>
|
|
<div class='panel'>
|
|
<h2 class='dark' data-splitting='words'>3D CSS Letter Transition</h2>
|
|
<div class='thumb'>
|
|
<p>CSS • 3D • Animation</p>
|
|
<div class='inner'>
|
|
<img class='invert' loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/xxVJZwo.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1569360312&width=960'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='panel'>
|
|
<h2 data-splitting='words'>Generative Patterns 8</h2>
|
|
<div class='thumb'>
|
|
<p>Generative • CSS Vars • GSAP</p>
|
|
<div class='inner'>
|
|
<img class='light' loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/wvGyKEY.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1599706499&width=960'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='panel'>
|
|
<h2 data-splitting='words'>NES Subscribe</h2>
|
|
<div class='thumb'>
|
|
<p>8-Bit • Form Input • Animation</p>
|
|
<div class='inner'>
|
|
<img loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/OJVJJoj.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1569360312&width=960'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='panel'>
|
|
<h2 data-splitting='words'>CSS Neumorphic Toggle</h2>
|
|
<div class='thumb'>
|
|
<p>CSS • 3D • No JS</p>
|
|
<div class='inner'>
|
|
<img loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/YzXOBEN.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1569360312&width=960'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='panel'>
|
|
<h2 data-splitting='words'>Take Me On</h2>
|
|
<div class='thumb'>
|
|
<p>Webcam • SVG • Canvas</p>
|
|
<div class='inner'>
|
|
<img class='light' loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/qBZWVmO.custom.png'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='panel'>
|
|
<h2 data-splitting='words'>SVG Turbulence Animation</h2>
|
|
<h2 data-splitting='words'>SVG Turbulence Animation</h2>
|
|
<div class='thumb'>
|
|
<p>SVG • Generative • Animation</p>
|
|
<div class='inner'>
|
|
<img loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/eYOXOdB.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1569360312&width=960'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='panel'>
|
|
<h2 data-splitting='words'>Pure CSS Product Card</h2>
|
|
<h2 data-splitting='words'>Pure CSS Product Card</h2>
|
|
<div class='thumb'>
|
|
<p>HAML • No JS • Animation</p>
|
|
<div class='inner'>
|
|
<img class='shift' loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/OJXJeod.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1569360312&width=960'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='panel'>
|
|
<h2 data-splitting='words'>Swissted Animated Flyers</h2>
|
|
<h2 data-splitting='words'>Swissted Animated Flyers</h2>
|
|
<div class='thumb'>
|
|
<p>Responsive • HAML • CSS Animation</p>
|
|
<div class='inner'>
|
|
<img loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/PoqVQRq.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1585620527&width=960'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='panel'>
|
|
<h2 data-splitting='words'>Pure CSS Gritty</h2>
|
|
<h2 data-splitting='words'>Pure CSS Gritty</h2>
|
|
<div class='thumb'>
|
|
<p>CSS • HAML</p>
|
|
<div class='inner'>
|
|
<img class='lighter' loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/qgEGMZ.default.png?fit=cover&format=auto&ha=false&height=540&quality=75&v=2&version=1548377726&width=960'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='panel'>
|
|
<h2 data-splitting='words'>Canyonlands</h2>
|
|
<h2 data-splitting='words'>Canyonlands</h2>
|
|
<div class='thumb'>
|
|
<p>GENERATIVE • JS • SVG</p>
|
|
<div class='inner'>
|
|
<img class='light' loading='lazy' src='https://assets.codepen.io/383755/internal/screenshots/pens/RwWYGxj.default.png?fit=cover&format=auto&ha=false&height=540&quality=75&v=2&version=1548377726&width=960'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class='subhead final'>Fin</p>
|
|
</div>
|
|
<div id='frame'>
|
|
<div id='close'>
|
|
<div></div>
|
|
<strong class='circle' data-splitting='chars'>GO•BACK•</strong>
|
|
</div>
|
|
<div class='frame-wrap'>
|
|
<div class='frame-container'>
|
|
<iframe id='pen' loading='lazy' src='' style='border:0'></iframe>
|
|
<a id='penlink' target='_blank'><strong>View the Code <span>→</span></strong></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id='cursor'>
|
|
<strong class='circle' data-splitting='chars'>SEE•MORE•</strong>
|
|
</div>
|
|
<div id='loader'>
|
|
<div class='wrap'>
|
|
<span>L</span>
|
|
<span>O</span>
|
|
<span>A</span>
|
|
<span>D</span>
|
|
<span>I</span>
|
|
<span>N</span>
|
|
<span>G</span>
|
|
<span>•</span>
|
|
<span>•</span>
|
|
<span>•</span>
|
|
</div>
|
|
</div>
|
|
<div id='social'>
|
|
<a href='https://twitter.com/cobra_winfrey' target='_blank'>
|
|
<svg clip-rule='evenodd' fill-rule='evenodd' image-rendering='optimizeQuality' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' viewbox='0 0 3333 3333' xmlns='http://www.w3.org/2000/svg'>
|
|
<path d='M1667 0c920 0 1667 746 1667 1667 0 920-746 1667-1667 1667C747 3334 0 2588 0 1667 0 747 746 0 1667 0zm900 1108c-66 30-137 49-212 58 76-46 135-118 162-204-71 42-151 73-234 90-68-72-163-116-270-116-204 0-369 165-369 369 0 29 3 57 9 84-307-16-579-162-761-386-33 56-50 120-50 186 0 128 65 241 164 307-61-2-117-19-167-46v5c0 179 127 328 296 362-31 8-64 13-97 13-24 0-47-2-70-7 47 147 183 253 345 257-127 99-285 158-459 158-30 0-59-2-88-5 164 105 358 166 566 166 679 0 1051-563 1051-1051 0-16 0-32-1-48 72-52 135-117 184-191z'></path>
|
|
</svg>
|
|
<a href='https://codepen.io/cobra_winfrey' target='_blank'>
|
|
<svg aria-hidden='true' class='svg-inline--fa fa-codepen fa-w-16 fa-3x' data-icon='codepen' data-prefix='fab' focusable='false' role='img' viewbox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>
|
|
<path d='M502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285zM278 63.131l172.286 114.858-76.857 51.429L278 165.703V63.131zm-44 0v102.572l-95.429 63.715-76.857-51.429L234 63.131zM44 219.132l55.143 36.857L44 292.846v-73.714zm190 229.715L61.714 333.989l76.857-51.429L234 346.275v102.572zm22-140.858l-77.715-52 77.715-52 77.715 52-77.715 52zm22 140.858V346.275l95.429-63.715 76.857 51.429L278 448.847zm190-156.001l-55.143-36.857L468 219.132v73.714z' fill='currentColor'></path>
|
|
</svg>
|
|
</a>
|
|
</a>
|
|
</div>
|
|
<!-- partial -->
|
|
<script src='https://unpkg.com/splitting@1.0.5/dist/splitting.min.js'></script>
|
|
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
|
|
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js'></script><script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|