Collective #714
Publikováno: 2.6.2022
A three.js Competition * Customizing Color Fonts on the Web * Tetra * Can I Devtools?
The post Collective #714 appeared first on Codrops.
Inspirational Website of the Week: Custo
Perfectly smooth animations with typography that just works. Our pick this week.
This content is sponsored via BuySellAds
Build websites faster with Divi Cloud
Divi Cloud is like Dropbox for your Divi websites: save something to Divi Cloud and it becomes available on all of your and your clients’ websites while you build them.
A three.js Competition
Tiiny Host’s three.js competition has started! Upload and host your web project and show off your WebGL skills!
AutoAnimate
A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app.
Sliderland
A minimalist creative coding playground, using only HTML sliders. Make animations using math!
IndigoStack
The native macOS app which promises to revolutionise the way you configure and run local web servers on your Mac.
Customizing Color Fonts on the Web
WebKit now supports CSS @font-palette-values which can be used to access predefined color palettes of color fonts.
PushIn.js
In case you didn’t know about it: PushIn.js is a lightweight parallax effect, built with JavaScript, that simulates an interactive dolly-in or push-in animation on a webpage.
A calendar and weather forecast in the terminal
A couple of cool terminal tricks to get calendars and the weather, plus how to assign aliases and pass arguments to bash functions. By Jamie Smith.
Tetra
Tetra is a full stack reactive component framework for Django using Alpine.js.
Can I Devtools?
Can I DevTools is like Can I Use but for the browser devtools. Created and curated by Pankaj Parashar.
Top games + source code from Gamedev.js Jam 2022
The best 13 entries from the Gamedev.js Jam 2022.
Processing Arrays non-destructively: `for-of` vs. `.reduce()` vs. `.flatMap()`
Axel Rauschmayer looks at look at three ways of processing Arrays and shows how to use the features.
Drawing with CSS: Anime Character
Alvaro Montoro explains how to draw an anime character with HTML and CSS from scratch.
Pure CSS image zoom
Some amazing CSS magic by Jhey: a thread on how to pull off a pure CSS image zoom using CSS primitives.
Plantarium
Plantarium is an amazing tool for the procedural generation of 3D plants. Made by Max Richter.
How I Built an “OS” with React for My Portfolio Website
Dustin Brett discusses how he made his website look and feel like an Operating System with JavaScript.
Scroll Btween
Tween any CSS values on any DOM element in relation with its position on the viewport. No dependencies.
The Modern JavaScript Tutorial
Freshly updated: Simple, but detailed explanations with examples and tasks, including: closures, document and events, object oriented programming and more.
Building a static website using Iles.js
In this tutorial by Clara Ekekenta you will learn how to code a static website in Vuejs using Iles.js.
Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D
Temani Afif finalizes his series on hover effects and shows how to code complex CSS hover animations.
Arctype SQL Client
Arctype is a fast and easy-to-use database client for writing queries, building dashboards, and sharing data with your team.
State is hard: why SPAs will persist
Nolan Lawson shares some thoughts why Single-Page Apps still persist.
Star Wars Scene Transition Effects in CSS
Learn how to create those wipe transitions from Star Wars movies in CSS.
From Our Blog
Scroll Animation Ideas for Image Grids
Some ideas for scroll animations on image grids using the ScrollTrigger plugin of GSAP and the new smooth scroll library Lenis by Studio Freight.
From Our Blog
Coding an Infinite Slider using Texture Recursion with Three.js
A coding session where you’ll learn how to recreate the infinite image slider from tismes.com using Three.js.
From Our Blog
Inspirational Websites Roundup #38
A new hand-picked selection of fresh websites for your inspiration.
The post Collective #714 appeared first on Codrops.