0 views collected around this technical thread.
This tutorial demonstrates how to create a visually striking card component with light‑following and 3D parallax effects using React, Tailwind CSS, and custom hooks, covering setup of three boxes, mouse event handling, CSS transforms, and reusable hook encapsulation.
This article explains how to create a continuous "one‑shot" 3D scrolling effect with CSS3 by leveraging perspective, 3D transforms, and animation, providing detailed code examples and practical tips for front‑end developers.
This article explains how to create a bottom navigation bar that jumps along a parabolic trajectory using a mathematical formula for the curve, CSS3 mask and radial‑gradient techniques, and a requestAnimationFrame‑driven JavaScript animation loop.
This tutorial explains how to build a pure‑CSS3 image carousel with a clean, minimalist look by using Flexbox layout and @keyframes animation, providing complete HTML and CSS code that runs without any JavaScript, making it a handy reference for front‑end developers.
This article presents several front‑end approaches for implementing password‑strength validation—including jQuery plugins, a Vue component, and a CSS3 indicator—each accompanied by live demo links and brief usage explanations to improve user experience during registration.
This article explains the newly supported individual CSS transform properties in Chrome 104, demonstrates how to split transform into translate, rotate, and scale declarations, discusses ordering effects, compatibility considerations, and provides practical code examples for complex layouts and animations.
This tutorial demonstrates how to create a festive CSS3 animation of a spoon scooping dumplings, providing complete HTML and CSS code, visual examples, and download links for learners to copy, preview, and use the effect in their own projects.
This article explains how to build a rotating 3D coin effect for a web page using CSS3 animations, @keyframes, LESS variables and loops, and a React component that generates the coin's faces and edges, providing a visual cue to attract users to an activity.
This article introduces five free, downloadable JavaScript/CSS3 countdown effect templates for the 2021 New Year, each with a brief description, preview image, and direct download link for developers to integrate into their web projects.
This article presents a curated list of free, visually appealing Christmas-themed animation effects built with HTML5, CSS3, and jQuery, each accompanied by a brief description and a download link for the source code.
This article provides a comprehensive guide to the CSS background property, covering its syntax, individual sub‑properties, tables of default values, basic usage examples, advanced topics such as multiple images, gradients, positioning, sizing, attachment, and even the experimental element() function, all illustrated with clear code snippets and visual diagrams.
The team created a reusable front‑end animation library by researching common effects, packaging them into an npm module, building a Vue‑based management backend, and integrating the library into business pages, which boosted user stay time by ~30%, performance by ~10% and cut bounce rates by ~60%, as demonstrated in the Douluo Dalu and Dark Angel case studies.
This article explains CSS stacking context, stacking level, and stacking order concepts to clarify the internal logic of Z-axis display order for web elements.
This article explains the concept of CSS stacking context, its creation rules, characteristics, and stacking order, using practical code examples to illustrate how z‑index values and other CSS properties affect element layering on the Z‑axis in web pages.
This article explains the CSS Scroll Snap feature introduced in Chrome 69, describing how snapping points work, providing two practical examples—a horizontal photo gallery and a paginated document—while detailing related properties such as scroll‑snap‑type, scroll‑padding, scroll‑margin, and scroll‑snap‑align.
This article explains how to create smooth, multi‑path paper‑plane flight animations for a mini‑program using CSS3 keyframes, transform versus position, canvas drawing, a reusable Game class, Bezier curve calculations, and inverse‑trigonometric rotation to achieve realistic motion and design flexibility.
This article explains how to create a smooth, multi‑mode paper‑plane animation for a JD mini‑program by comparing position and transform, writing CSS3 keyframes, combining translateX/Y, using canvas with a reusable Game class, defining quadratic and cubic Bézier curves, calculating points with a parametric function, and rotating the plane with atan2 for realistic motion.
This article walks through the design and implementation of a 3D book‑cover effect for Qidian's homepage using CSS3 perspective and transforms, explains the underlying HTML structure, provides full SASS code, and details cross‑browser compatibility solutions for Firefox, IE9, and Safari.
This article surveys the most widely used JavaScript frameworks for mobile web development, highlighting their touch‑optimized features, cross‑platform capabilities, lightweight nature, and support for HTML5/CSS3 standards, helping developers quickly build responsive mobile applications across iOS, Android, and other devices.