Simple image gallery with 3D transition using InstancedMesh and shaders.
Use mouse wheel or arrow keys :)
A Pen by Kevin Levron on CodePen.
Kylen Bassowski rolandkorgowski
rolandkorgowski
/ 3d-image-transition-mouse-wheel.markdown
Created
November 13, 2020 20:00
3D Image Transition (mouse wheel)
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
| <svg class="mid" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 677 427.7"> | |
| <radialGradient id="shadow_1_" cx="3337.4" cy="53557.7" r="155.4" fx="3449.4" fy="53546.1" gradientTransform="matrix(0.773 0.6344 -0.0855 0.1042 2234.0835 -7382.4531)" gradientUnits="userSpaceOnUse"> | |
| <stop offset="0" stop-color="#231F20"/> | |
| <stop offset="0.1" style="stop-color:#262626;stop-opacity:0.4"/> | |
| <stop offset="0.3" style="stop-color:#555555;stop-opacity:0.3"/> | |
| <stop offset="1" style="stop-color:#222222;stop-opacity:0"/> | |
| </radialGradient> | |
| <path id="shadow" fill-rule="evenodd" clip-rule="evenodd" fill="url(#shadow_1_)" d="M358.9 417.4c-7.5 9.1-68.5-28.5-136.2-84.1 -67.7-55.6-116.6-108.1-109.1-117.2 7.5-9.1 68.5 28.5 136.2 84.1C317.6 355.8 366.4 408.3 358.9 417.4z"/> | |
| <g id="model"> | |
| <radialGradient id="lt-paths_1_" cx="7968.7" cy="-3320.7" r="1227.8" gradientTransform="matrix(-0.4839 0.8959 -0.8839 -0.4694 1459.918 -8063.0488)" gradientUnits="userSpaceOnUse"> |
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
| <html> | |
| <body> | |
| <div id="info"> | |
| <p><strong>Matrix code rain</strong></p> | |
| <p>Experiment write up <a href="http://neilcarpenter.com/labs/matrix-rain" target="_blank">here</a>.</p> | |
| <!-- | |
| this doesn't work in CodePen for some reason |
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
| figure | |
| .stripes-wraper | |
| for i in Array(16) | |
| .stripe | |
| .gradient-mask | |
| .palm-tree | |
| figcaption | |
| | Inspired in | |
| | |
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
| #ui | |
| .sun | |
| .sea | |
| .wave | |
| .wave | |
| .wave | |
| .wave | |
| .wave | |
| .wave |
rolandkorgowski
/ earth-orbit-css-animation.markdown
Created
November 8, 2020 23:42
Earth orbit CSS animation
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
| input#vhs type="checkbox" | |
| label for="vhs" 📼 | |
| .scene | |
| .container | |
| .sun | |
| - for i in (0..9) | |
| .band style="animation-delay: -#{i}s" |
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
| - var n_rays = 8; | |
| - var base_angle = 360/n_rays; | |
| - var sun_rad = 50; | |
| - var ray_rad = sun_rad*1.4; | |
| svg(viewbox='-200 -150 400 300') | |
| defs | |
| line#ray(x1='-5' x2='5') | |
| clipPath#cp | |
| rect(x='-200' y='-150' width='400' height='150') |
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
| <figure class="animation"> | |
| <section class="animation__block" role="img" aria-label="Animation of the sun rising very quickly"> | |
| <div class="hill front red-dk"></div> | |
| <div class="hill back red"></div> | |
| <div class="sun"></div> | |
| </section> | |
| <figcaption class="animation__caption"> | |
| inspired by <a href="https://dribbble.com/shots/2271207-Wallpaper-Icon-Animation" target="_blank">@krishgounder</a> | |
| </figcaption> |
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
| - var fireCount = 40 | |
| #ui | |
| .sun | |
| - for (var i = 0; i < fireCount; i++) | |
| .sun_fire | |
| .sun_fire_inner | |
| .sun_border | |
| .cover | |
NewerOlder