Giter VIP home page Giter VIP logo

web_animation's Introduction

Web_Animation

Open Source Love Hacktober Badge Star Badge Contributions

This repository aims to help code beginners with their first successful pull request and open source contribution. 🥳

⭐ Feel free to use this project to make your first contribution to an open-source project on GitHub. Practice making your first pull request to a public repository before doing the real thing!

⭐ Make sure to grab some cool swags during Hacktoberfest by getting involved in the open-source community.

This repository is open to all members of the GitHub community. Any member can contribute to this project! 😁

What is Hacktoberfest? 🤔

A month-long celebration from October 1st to October 31st presented by Digital Ocean and DEV Community collaborated with GitHub to get people involved in Open Source. Create your very first pull request to any public repository on GitHub and contribute to the open-source developer community.

https://hacktoberfest.digitalocean.com/

Rules 🔥

To qualify for the official limited edition Hacktoberfest shirt, you must register here and make four Pull Requests (PRs) between October 1-31, 2023 (in any time zone). PRs can be made to any public repository on GitHub, not only the ones with issues labeled Hacktoberfest. This year, the first 40,000 participants who complete Hacktoberfest can elect to receive one of two prizes: a tree planted in their name.

Steps to follow 📜

Tip : Complete this process in GitHub (in your browser)

flowchart LR
    Fork[Fork the project]-->branch[Create a New Branch]
    branch-->Edit[Edit file]
    Edit-->commit[Commit the changes]
    commit -->|Finally|creatpr((Create a Pull Request))
Loading

Star the repository by pressing the topmost-right button to start your wonderful journey.

Help Contributing Guides 👑

We love to have articles and codes in different languages and the betterment of existing ones.

Please discuss it with us first by creating a new issue.

🎉 🎊 😃 Happy Contributing 😃 🎊 🎉

web_animation's People

Contributors

amarranjan1 avatar ankitsharma495 avatar charmee123 avatar durgesh4993 avatar karansharma73 avatar mrghost100348 avatar pradyumna14 avatar robinrai2612 avatar sanchita1304 avatar serhatbek avatar sumantaraj avatar vishwajeetfate avatar vivekyadav193 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar

Forkers

mrghost100348 sanchita1304 pradyumna14 anikettewari amarranjan1 harshs0891 gyanendu01 prashantwadhwa ankitsharma495 serhatbek vivekyadav193 robinrai2612 davidsaga90 sumantaraj real-coder007ravi guranshdeol shivamani02 shubhamshk balajithegr8 abhishekpandey2203 vishwajeetfate ayushhacktoberfest2k23 karansharma73 manansharma2710 abhika3021 ashu9335 saurav2208

web_animation's Issues

I want to add Elastic Stroke Text Animation

Animation Name : Elastic Stroke Text Animation

Description

Elastic Stroke is a beautiful text animation for the people who don't want default boring texts on their website. The code is easy to modify. HTML and CSS are the only 2 programming languages are used to create this animation.

Screenshot Section

Elastic Stroke

Demo Video Section*

Elastic.Stroke.mp4

Task

Adding Hoverboard Animation

Hoverboard Animation

Description

when we'll hover our mouse cursor on it the boards will split in two parts.

Screenshot Section

Screenshot 2023-10-06 110411

Demo Video Section*

Document.-.Personal.-.Microsoft.Edge.2023-10-06.11-10-21.mp4

Task

Sorting Algo Visulaizer Animation Using HTML,CSS & JS

Animation Name

Sorting Algo Visulaizer Animation

Description

A Sorting Algorithm Visualizer is a web application that uses animation to demonstrate how various sorting algorithms work. It helps users understand and compare the efficiency and behavior of sorting algorithms like Bubble Sort, Quick Sort, Merge Sort, and more, by displaying the step-by-step sorting process in a visually engaging manner.

Task

car

Animation Name

Description

Screenshot Section

Demo Video Section*

Task

Animation Name : Coffee Cup filling Animation

Description

It is a coffee cup filling animation which can be turned as a loading screen. It is done by using HTML and CSS.

Screenshot Section

Screenshot (83)
Screenshot (82)

Demo Video Section

Coffee.Cup.Filling.and.1.more.page.-.Work.-.Microsoft.Edge.2023-10-14.00-00-12.mp4

pls assign it to me under hacktoberfest. I would like to contribute :)

Unnecessary jQuery Dependency

Dynamic Gradient Background Animation

Description

The code includes a reference to jQuery for a simple background gradient animation. jQuery is a JavaScript library that provides various utility functions for DOM manipulation and simplifies cross-browser compatibility. However, in this code, jQuery is used only for a basic task, and its inclusion adds unnecessary overhead.

Screenshot Section

image

Demo Video Section*

screen-capture.webm

Task

I want to add Animated Background Gradient html file in this repository

Animation Name: Animated Background Gradient

Description :

Gradient background animation can be a beautiful design technique for making background colors come to life on your website. It is a perfect solution for those who want something more lifelike than a static background color without having to resort to slow-loading video background.

The animation is designed using html, css and javascript programming languages.

Screenshot Section

Animated Gradient Background

Demo Video Section*

Animated.Background.Gradient.mp4

Task

Tourist Hovering Cards Animation

Animation Name

Tourism Cards Amination.

Description

3 cards that have a hovering effect, when a mouse hovers over one of the cards it stands up and for user to read clearly.

Task

I want to add Navigation bar animation

Animation Name : Navigation Bar Animation

Description

It is a navigation bar animation which have visual effects and transitions applied to it. It have hover effects with changing color which enhance the user experience.
This is done by using HTML and CSS.

Screenshot Section

nav bar image

Demo Video Section*

navigation.bar.video.webm

Task

I want to add Button Animation

Animation Name : Button Animation

Description

It is a Button Animation which have hover effects and it glows as the user take the cursor in the button. It is done by using HTML and CSS.

Screenshot Section

button css
Button html

Demo Video Section*

button.animation.webm

Task

Animation Name: Loaders

Description

10 different type of loaders that can used in wesite and web game

Screenshot Section

Screenshot 2023-10-16 145350
Screenshot 2023-10-16 145647
Screenshot 2023-10-16 145709
Screenshot 2023-10-16 145724

Demo Video Section

Untitled.video.-.Made.with.Clipchamp.4.mp4

pls assign it to me under hacktoberfest. I would like to contribute :)

I want to create a Panda animation with HTML & CSS

Animation Name

Create a panda animation with HTML & CSS

Description

In this HTML and CSS animation project, we will create an adorable panda animation using CSS keyframes and HTML elements. This animation will bring a playful panda to life, making it blink its eyes and sway its head, adding a touch of whimsy to your web page. Follow the step-by-step instructions below to create this delightful panda animation.

Advanced staggering with anime.js

Animation Name

Advanced staggering with anime.js

Description

Advanced Staggering with Anime.js is a concept in web animation that involves using the Anime.js library to create intricate and synchronized animations with staggered effects. Anime.js is a powerful JavaScript animation engine that allows you to apply various transformations to multiple elements on a web page, and when combined with advanced staggering techniques, it enables you to create visually appealing and dynamic animations that captivate users' attention. This advanced approach is ideal for web developers and designers looking to push the boundaries of web animation and create more complex and engaging user experiences.

Task

Liquid Drop Login Page Animation

Animation Name

Liquid Drop Login Page Animation

Description

The Liquid Drop Login Page Animation is a visually captivating and dynamic user interface design created using a combination of HTML and CSS. This login page animation aims to provide a unique and engaging experience for users as they access a web application or website. The animation's central theme revolves around fluidity, with elements resembling liquid drops moving and transforming to guide the user through the login process.

Task

@Durgesh4993 I would like to work on this issue. Kindly assign it to me.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.