Collective #714

Original Source: https://tympanus.net/codrops/collective/collective-714/

Inspirational Website of the Week: Custo

Perfectly smooth animations with typography that just works. Our pick this week.

Get inspired

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.

Check it out

A three.js Competition

Tiiny Host’s three.js competition has started! Upload and host your web project and show off your WebGL skills!

Check it out

AutoAnimate

A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app.

Check it out

Sliderland

A minimalist creative coding playground, using only HTML sliders. Make animations using math!

Check it out

IndigoStack

The native macOS app which promises to revolutionise the way you configure and run local web servers on your Mac.

Check it out

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.

Read it

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.

Check it out

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.

Read it

Tetra

Tetra is a full stack reactive component framework for Django using Alpine.js.

Check it out

Can I Devtools?

Can I DevTools is like Can I Use but for the browser devtools. Created and curated by Pankaj Parashar.

Check it out

Top games + source code from Gamedev.js Jam 2022

The best 13 entries from the Gamedev.js Jam 2022.

Check it out

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.

Read it

Drawing with CSS: Anime Character

Alvaro Montoro explains how to draw an anime character with HTML and CSS from scratch.

Read it

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.

Check it out

Plantarium

Plantarium is an amazing tool for the procedural generation of 3D plants. Made by Max Richter.

Check it out

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.

Watch it

Scroll Btween

Tween any CSS values on any DOM element in relation with its position on the viewport. No dependencies.

Check it out

The Modern JavaScript Tutorial

Freshly updated: Simple, but detailed explanations with examples and tasks, including: closures, document and events, object oriented programming and more.

Check it out

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.

Read it

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.

Read it

Arctype SQL Client

Arctype is a fast and easy-to-use database client for writing queries, building dashboards, and sharing data with your team.

Check it out

State is hard: why SPAs will persist

Nolan Lawson shares some thoughts why Single-Page Apps still persist.

Read it

Star Wars Scene Transition Effects in CSS

Learn how to create those wipe transitions from Star Wars movies in CSS.

Read it

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.

Check it out

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.

Check it out

From Our Blog

Inspirational Websites Roundup #38

A new hand-picked selection of fresh websites for your inspiration.

Check it out

The post Collective #714 appeared first on Codrops.