No. 809, Thursday, January 25, 2024 View in browser |
 |
Olá, frontend friends! 👋
A little while back, Maxwell Barvian reached out to share some fantastic demos based on designs by Francesco Zagami. The coolest part? He used the latest CSS scroll animation features to bring them to life! Don't miss these three awesome demos – they're perfect for getting into scroll-based animations using just CSS, no need for any fancy JavaScript magic!
Quick heads up – Gmail and Yahoo! Mail are rolling out some new rules for sending out lots of emails (like newsletters). To keep receiving the Collective, please hit reply and just say “Hi” (or feel free to stay silent if you're a bit shy like me 😅).
This way, our emails won't end up in your spam, and you'll keep getting frontend goodness!
Have a wonderful Thursday! 💙 |
|
|
 |
|
TRIONN's latest design impresses with delightful details such as a smokey cursor effect, magnetic buttons, and an exceptional scrolling experience that unveils beautifully crafted layouts. The unique typography adds an extra layer of stylishness. |
Standout Web Design Picks |
|
|
|
|
| Nathan Sobo is excited to announce that Zed, a code editor, is now open source, inviting the community to contribute and improve it, with the goal of building the world's most advanced code editor. |
|
|
|
|
|
|
|
|
|
| Stephanie Eckles' article, "One-Line CSS Upgrades," offers a practical guide to enhancing applications with 12 essential properties, promoting reduced technical debt, minimized JavaScript reliance, and easy wins for user experience. |
|
|
|
|
|
|
|
|
|
| Over 200 optimized SVG country flag icons, perfectly crafted on a 32px grid and free. By the folks of Nucleo. |
|
|
|
|
|
|
|
|
|
| A set of stylish Tailwind CSS buttons without JavaScript that you can use right away in your projects by copy and pasting. Made by Ibelick. |
|
|
|
|
|
|
|
|
|
| Maxime Heckel shares his work on creating a realistic and physically based caustic effect using shaders in WebGL, detailing the process of simulating light rays through a target mesh, leveraging normals and render targets to compute caustic patterns, and implementing additional effects like chromatic aberration. |
|
|
|
|
|
|
|
|
|
| Christopher Kirk-Nielsen built this free app to simplify creating SVG filters with a GUI. Very handy, with many options and a preview for image and text. |
|
|
|
|
|
|
|
|
|
| Brad Woods breaks down a scroll-drawn effect using SVG, clip-path, and path elements, specifically demonstrating how to use clip-path to reveal parts of a line as the user scrolls. |
|
|
|
|
|
|
|
|
|
| Yasmin p. shares how she made an interactive 3D scene with Blender and React-three-fiber in this X thread. |
|
|
|
|
|
|
|
|
|
| A fast and collaborative Headless CMS with AI-native content management, designed for efficient website editing through features like Notion-like document creation, drag-and-drop workflows, GraphQL integration, and more. |
|
|
|
|
|
|
|
|
|
| A computational photography pipeline that utilizes various algorithms and pre-trained models for tasks like monocular depth estimation, optical flow, segmentation, and camera pose estimation, allowing users to process images and videos for 3D reconstruction or real-time post-processing operations. By Patricio Gonzalez Vivo who wrote The Book of Shaders. |
|
|
|
|
|
|
|
|
|
| An article about how a French demoscene group made a real-time animation, "The Sheep and the Flower," constrained to 8 kilobytes, covering technical details such as GPU-based real-time visuals, raymarching for rendering, music composition using OpenMPT and 4klang, and more. |
|
|
|
|
|
|
|
|
|
| Maxwell Barvian shares three carousel experiments made with CSS scroll-driven animations, based on Francesco Zagami’s designs. |
|
|
|
|
|
|
|
|
|
|
Video Vault |
|
|
|
|
Animation Spotlight |  | |
|
|
|
|
|
|
|
|
|
|
Demo Corner |
| | An experiment with BabylonJS where you can drive the epic Yugo car. By the folks of Quince Creative. |
|
|
|
|
|
|
|
|
|
|
❓Did you know that… |
…the term "patch" in software updates has a fascinating history dating back to the early 1700s? Back then, punched holes in paper were used in looms to weave intricate textile patterns. Fast forward to 1889, when engineer Herman Hollerith adapted this concept for machine-readable punch cards, laying the groundwork for the birth of IBM in 1924. To fix coding errors or enhance programs, programmers would literally "patch" punched cards with paper tape. 😃 |
|
|
And that’s all! Thank you for reading the Collective! If you have something you would like us to feature in the next edition, simply reply to this email! |
|
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future. |
|
|
|
