conofor
| <script type="x-shader/x-fragment" id="reset-velocity"> | |
| precision highp float; | |
| void main () { | |
| gl_FragColor = vec4(vec3(0.), 1.); | |
| } | |
| </script> | |
| <script type="x-shader/x-fragment" id="reset-position"> | |
| precision highp float; |
I wanted to post something since I haven't made anything for CodePen lately, so I decided to revisit one of my earlier pens. I added buttons to switch between three different Mercator projections and you can move your mouse or finger over the screen to control the zoom.
The images were made by Anders Sandberg. Here's a link to his Flickr page: https://www.flickr.com/photos/arenamontanus/albums/72157615740829949
A Pen by Jeff Thomas on CodePen.
Playing around with mouse positions and seeing what I can do with it. This project is incomplete and is still being worked on. Feel free to reference my code to get ideas.
Word animation is temporary as I try to figure out how to get the animation to respond properly to mouse movement. Word animation code was borrowed from: https://tobiasahlin.com/moving-letters/
| <div class="content-canvas"></div> | |
| <script id="vertex" type="x-shader/x-vertex"> | |
| varying vec3 v_position; | |
| varying vec2 vUv; | |
| void main(){ | |
| vUv = uv; | |
| v_position = position; | |
| gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); | |
| } | |
| </script> |
| <div class="box"> | |
| <h3>Price <span>Range</span></h3> | |
| <div class="values"> | |
| <div>$<span id="first"></span></div> - <div>$<span id="second"></span></div> | |
| </div> | |
| <small> | |
| Current Range: | |
| <div>$<span id="third"></span></div> | |
| </small> |
WebGL text effect using OGL https://github.com/oframe/ogl
Background picture by Vinicius Amano https://unsplash.com/photos/f9oQZOk9vnk
A Pen by Robin Delaporte on CodePen.
CSS Only Animated horse of course.
Click / touch the horse to slow things down.
A lot of help from this video https://www.youtube.com/watch?v=oxjt_xyjkrU
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js"></script> | |
| <div id="Stats-output"> | |
| </div> |