Long and short click animation

Hello Coder! Welcome to Codewithshobhit Blog. Today we are going to Create Long and short click animation


Project Folder Structure:

  • Create a file called  index.html  to serve as the main file.

  • Create a file called  style.css  for the CSS code.
  • Create a file called  script.js  for the JavaScript code.

HTML CODE

HTML 
<div>
      <p class="short" onclick="shortSize()">Short</p>
      <p class="long" onclick="longSize()">Long</p>
</div>

Explanation Of HTML CODE

Here, you have a simple HTML structure with two paragraphs (p elements) inside a div. Each paragraph has a class (short and long), and they have onclick attributes pointing to JavaScript functions (shortSize and longSize).

CSS CODE

CSS 
*{
  margin: 0;
  padding: 0;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  text-align: center;
}

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.short{
  font-size: 10em;
  cursor: pointer;
  transition: 0.5s ease;
}

.short:hover{
    background-image: linear-gradient(0deg, red, black 50%);
    -webkit-background-clip: text;  /* cut de text background */
    background-clip: text;
    -webkit-text-fill-color: transparent; /*fill the text color*/
    color: transparent;
}

.short.shortDuration{
  font-size: 1em;
  transition: 0.5s ease;
}

.long{
  font-size: 1em;
  cursor: pointer;
  transition: 10s ease;
}

.long.longDuration{
  font-size: 10em;
  transition: 10s ease;
}

.long:hover{
  background-image: linear-gradient(0deg,blue, black 85%);
  -webkit-background-clip: text;  /* cut de text background */
  background-clip: text;
  -webkit-text-fill-color: transparent; /*fill the text color*/
  color: transparent;
}

Explanation Of CSS CODE

In the CSS, you define styles for the entire page (*), set up the body to be centered both horizontally and vertically, and then define styles for the short and long paragraphs. The :hover pseudo-class is used to apply styles when the paragraphs are hovered. The transition property is used to create smooth transitions for the font size changes.

JS CODE

JS 
function shortSize(){
  let short = document.querySelector(".short");
  short.classList.toggle("shortDuration");
}

function longSize(){
  let long = document.querySelector(".long");
  long.classList.toggle("longDuration");
}

Explanation Of JS CODE

In the JavaScript part, you have two functions (shortSize and longSize). Each function selects the corresponding element (short or long) using document.querySelector and then toggles the class (shortDuration or longDuration). This toggling of class triggers the transition effect defined in the CSS.
So, when you click on the "Short" text, it toggles the class shortDuration, and when you click on the "Long" text, it toggles the class longDuration, leading to the animated transitions as defined in your CSS.

Live Preview 

See the Pen Long and short click animation by Codewithshobhit (@Codewithshobhit) on CodePen.

Conclusion

In conclusion, your code creates a simple long short click animation using HTML, CSS, and JavaScript. The HTML defines two paragraphs within a div, each associated with a specific class (short and long). The CSS styles the paragraphs, incorporating hover effects with smooth transitions for font size changes and gradient backgrounds. JavaScript functions are employed to toggle classes on click, triggering the defined transition effects. As a result, clicking on the "Short" text rapidly adjusts its font size, while clicking on the "Long" text initiates a slower font size transition, delivering an engaging and visually dynamic user experience.

How to run this Html Css and Js Project in Our Browser?

first, you need a code editor either you can use VS code studio or notepad and then copy the html,css, and javascript code, create separate or different files for coding then combine them, after creating file just click .html file or run from VS Code studio and you can project preview.


Which Code Editor do you use to create those projects?

I am using VS Code Studio.


is this project responsive or not?

Yes! this project is a responsive project.

If you enjoyed reading this post and found it useful, please share it with your friends and follow me on Instagram.

Thanks for reading!

Author: Shobhit 😊