Awesome GitHub RepositoriesCSS Transitions

React هي مكتبة JavaScript لبناء واجهات المستخدم تعتمد على معمارية قائمة على المكونات وتدفق بيانات أحادي الاتجاه.

This project is an educational code repository containing a collection of over 50 mini web development exercises. It serves as a front-end learning resource designed to help developers practice foundational skills by building small, interactive projects using standard HTML, CSS, and JavaScript. The repository distinguishes itself by focusing on standalone interactive component prototyping and the implementation of client-side logic. Each project is organized into a decoupled directory structure, allowing users to explore individual interface patterns and visual effects in isolation. These exe

Sortable is a framework-agnostic JavaScript library for creating reorderable lists through drag and drop interactions. It functions as a reorderable list manager that allows users to rearrange DOM elements using pointer interactions on modern browsers and touch devices. The library enables the transfer or cloning of items between different lists using shared group identifiers. It supports complex organizational structures, including nested reorderable lists for managing hierarchical data across different levels. Its capabilities cover the animation of element movements and the configuration

Hover is a collection of pre-defined CSS3 animations and reusable stylesheets for links, buttons, and images. It serves as a web UI animation kit and a library of styles written in CSS, Sass, and LESS to provide visual feedback when a user hovers over an element. The library includes specialized interactive effects that simulate tactile behaviors, such as page curls and the rendering of speech bubbles. It also provides a set of animation primitives to manipulate backgrounds, borders, shadows, and glow effects to simulate depth and elevation. The project covers a wide range of element motion

nprogress is a lightweight JavaScript UI component and web progress bar library. It provides a minimalist DOM progress indicator used to track the state of asynchronous operations within a browser document. The library allows for the visualization of loading states through a thin progress bar and spinner. It supports progress state management, enabling the bar to be started, stopped, or marked as complete, with support for incremental progress tracking and percentage-based updates. Users can modify the visual style by overriding default CSS or replacing the markup template. The component als

Vue.Draggable is a component-based library for Vue.js that enables drag-and-drop functionality within web interfaces. It functions as a wrapper for the SortableJS engine, bridging the gap between imperative DOM manipulation and the declarative nature of the Vue.js reactive system. By synchronizing user interface interactions with the underlying data model, it ensures that list reordering and element movement are automatically reflected in the application state. The library supports complex interaction patterns, including the ability to move items between lists, clone elements using keyboard m

This project is a vanilla JavaScript reference guide and implementation collection designed to replace legacy libraries with native browser patterns. It provides a set of native JavaScript patterns for selecting, modifying, and navigating HTML elements, alongside a web API implementation guide for handling events and styles. The project serves as a reference for implementing asynchronous JavaScript patterns using native promises and fetch for remote data and background tasks. It also includes a client-side utility collection for performing data transformations, type validation, and element me

Draggable is a JavaScript library for implementing draggable elements and sortable lists within a web browser. It provides a functional toolset for creating accessible drag and drop interfaces and a mechanism for dynamically swapping, sorting, and reordering HTML elements in real time. The library features a cross-input interaction layer that unifies mouse, touch, and force-touch events into a single stream for consistent behavior across different devices. It specifically includes tools for providing screen reader feedback and assistive technology support to ensure drag operations are accessi

This is a browser-based puzzle game and HTML5 JavaScript application where players slide and merge numbered tiles on a grid to reach a target value. The game runs entirely on the client side, using web standard technologies to handle game logic and rendering directly in the browser. The application is a mobile-compatible web app that translates touch-swipe gestures and keyboard inputs into directional commands. It includes a local storage score tracker to save and maintain a record of high scores across different sessions.

vue-awesome-swiper is a Vue.js component wrapper for the Swiper library, providing a declarative interface for creating touch-enabled carousels. It serves as a virtualized slider component that can render only visible slides to maintain performance when handling large datasets. The project distinguishes itself through high-performance rendering and a wide array of visual effects, including 3D transitions, parallax movements, and image zoom capabilities. It also supports the synchronization of multiple slider instances and provides accessibility features such as ARIA roles and focus-scrolling

Slideout is a touch-gesture UI component and navigation menu designed for mobile web applications. It provides a side panel that slides across the screen to reveal navigation options, utilizing CSS transitions to animate the movement of the viewport. The component manages the expanded or collapsed state of the navigation menu and includes logic to restrict gestures for specific interface elements to prevent interaction conflicts. It employs a system for executing custom logic triggered by menu state transitions and user drag gestures.

Glidejs is a lightweight, dependency-free JavaScript library for creating sliders and carousels. It functions as a standalone UI component and content slider that supports ES6. The library uses a modular architecture, allowing for the extension of core logic through a plugin system to implement specialized features and custom behaviors. The project provides capabilities for implementing web carousels and interactive sliding interfaces. It integrates sliding content displays into webpages without the use of external libraries or frameworks.

This project is a technical study guide and architectural analysis of the Vue.js framework. It serves as an educational resource for understanding the implementation of a reactive framework, providing source code analysis and architectural visualizations to explain the internal workings of the Model-View-ViewModel pattern. The project focuses on the mechanics of reactive framework implementation, specifically how dependency tracking, getters, and setters are used to synchronize state with a user interface. It includes detailed examinations of the virtual DOM and the process of reconciling ele

fancyBox is a jQuery-based lightbox plugin and JavaScript modal gallery used to render images and videos within a full-screen overlay. It isolates media from the background page by utilizing a responsive gallery system that dims the rest of the screen to focus attention on the selected content. The tool functions as a touch-enabled content overlay, incorporating support for swipe gestures and pinch-to-zoom for navigating media on mobile devices and tablets. It ensures media scales correctly across different screen sizes through a responsive gallery system. The project covers a broad range of

This project is a jQuery plugin and animation extension that enables hardware-accelerated CSS3 transitions and transformations. It serves as a wrapper that shifts animation logic from script-based updates to native browser style transitions. The library provides tools for managing the scale, rotation, and orientation of page elements. It uses relative-value coordinate calculations to handle element movement and maps generic transformation properties to browser-specific vendor prefixes. The capability surface covers high-performance visual effects, including the management of timing and easin

react-burger-menu هو مكون تنقل جانبي لتطبيقات React. ينفذ نمط قائمة خارج اللوحة (off-canvas) باستخدام انتقالات CSS ورسوم متحركة SVG لإنشاء تأثيرات انزلاق. يوفر المكون انتقالات رسوم متحركة قابلة للتكوين، بما في ذلك تأثيرات الانزلاق والتكديس والقياس. ويستخدم تحويل مسار SVG لتحريك أيقونة الهامبرغر أثناء تفاعلات القائمة. تدعم المكتبة تخصيص نمط القائمة من خلال كائنات التكوين وأوراق الأنماط الخارجية. وهي مصممة للتنقل عبر الويب المستجيب عن طريق إخفاء الروابط خلف زر تبديل لتوفير مساحة الشاشة.

Colorbox is a jQuery-based lightbox plugin and modal overlay library used to display images, HTML, and external content within a centered window. It functions as a customizable UI component and an AJAX content loader capable of fetching remote data via GET or POST requests. The library distinguishes itself through its ability to group multiple media items into a sequential image gallery slideshow. It includes a state-based sequencing system that provides previous and next navigation controls to cycle through these collections. The tool covers a broad range of rendering and management capabil

FloatingActionButton is a scroll-driven UI controller and mobile-first interface element. It provides a circular button that floats above content and toggles its visibility based on scroll direction to maximize available screen space. The component functions as a CSS-animated UI element, utilizing stylesheet transitions to handle the visual sliding and fading of the interface controls. It is designed for mobile interfaces to provide quick access to primary actions without obscuring page content. The system manages visibility by monitoring scroll events on a designated DOM container and detec

Animsition is a CSS page transition library and frontend motion framework designed to create fluid visual effects, such as fades and zooms, between web pages. It functions as a DOM navigation animator that manages the timing and sequence of page removal and insertion to provide continuous movement between screens. The system operates as a page overlay animator, utilizing a coordinate-based slide controller to move covering elements across the screen in specific directions. These overlays mask background changes during transitions to maintain visual continuity. The framework leverages hardwar

FastDev4Android is an all-in-one development framework for building Android applications. It accelerates app creation by integrating networking, data parsing, dependency injection, image loading, and UI components into a single workflow, bundling these capabilities to speed up mobile app development. The framework provides annotation-driven dependency injection that automatically wires components, views, event handlers, and threading into Android components at compile time. It implements the Model-View-Presenter (MVP) pattern to separate data, UI, and business logic into distinct layers for i