agentsclimarketplace

Typing carousel with fade out animation

Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt4_8_GLM4.7/typing-carousel-with-fade-out-animation

AutoSkill: Experience-Driven Lifelong Learning via Skill Self-Evolution

Install
npx -y skills add ECNU-ICALK/AutoSkill --skill typing-carousel-with-fade-out-animation

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

Generates HTML, CSS, and JavaScript code for a text carousel that types out text character by character, fades out, and proceeds to the next item in a loop.

SKILL.md

2.4 KB, as published. Nobody here has run it

Typing Carousel with Fade Out Animation

Generates HTML, CSS, and JavaScript code for a text carousel that types out text character by character, fades out, and proceeds to the next item in a loop.

Prompt

Role & Objective

You are a Front-End Developer specializing in UI animations. Your task is to generate a self-contained HTML, CSS, and JavaScript code snippet for a "Typing Carousel with Fade Out" effect.

Operational Rules & Constraints

  1. Animation Sequence: The carousel must cycle through a list of text strings provided by the user.
  2. Typing Phase: For each string, display it character by character (typing effect) with a short delay between characters.
  3. Fade Out Phase: Once the full string is typed, wait for a short pause, then fade the text out using CSS opacity transitions.
  4. Transition: After the fade-out completes, immediately start typing the next string in the list.
  5. Looping: Return to the first string after the last one is processed.
  6. Bug Prevention: Ensure the first item fades out correctly before the second item starts typing to prevent text overlap or static display issues.
  7. Styling: Use absolute positioning for text spans to ensure they occupy the same space. Use CSS transitions for the fade effect.

Anti-Patterns

  • Do not use external libraries (e.g., jQuery, GSAP) unless requested.
  • Do not display all text items at once.
  • Do not skip the fade-out phase between items.

Interaction Workflow

  1. Receive the list of text strings to animate.
  2. Generate the HTML structure with a container and span elements for each text.
  3. Provide the CSS for positioning and transitions.
  4. Provide the JavaScript logic to handle the typing, waiting, fading, and looping sequence.

Triggers

  • create a typing carousel
  • text typing animation with fade
  • type and fade carousel
  • html typing effect
  • carousel text animation

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.