Facebook-f Instagram Linkedin-in

Infinite Scrolling Text Animation with HTML & CSS only

Here’s the easiest way to build Inifinite maquee scroller with HTML+CSS only. Easy to use for Elementor, Custom HTML Website animations for Call to action blocks.

Easy to implement code

HTML :

<div class="scroll-bar">
  <div class="scroll-items">
   <span>Schedule <i>a call</i> <span class="dot"></span></span>
   <span>Schedule <i>a call</i> <span class="dot"></span></span>
   <span>Schedule <i>a call</i> <span class="dot"></span></span>
  </div>

  <div class="scroll-items" aria-hidden="true">
   <span>Schedule <i>a call</i> <span class="dot"></span></span>
   <span>Schedule <i>a call</i> <span class="dot"></span></span>
   <span>Schedule <i>a call</i> <span class="dot"></span></span>
  </div>
</div>

CSS :

.scroll-bar {
   display: flex;
   overflow: hidden;
   user-select: none;
   gap: 4rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   font-family: "Questrial";
   background: #0b0b1d;
}

.scroll-items {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 4rem;
   min-width: 100%;
   animation: scroll 45s linear infinite;
}

@keyframes scroll {
   0% {
    transform: translateX(0);
   }
   100% {
    transform: translateX(calc(-100% - 4rem));
   }
}

.scroll-items span {
   font-size: 5vw;
   font-weight: 500;
   white-space: nowrap;
   display: flex;
   align-items: center;
   color: #ffffff;
   transition: all 0.5s ease;
}

.scroll-bar:hover span {
   color: #32dd9f;
}

.scroll-items span.dot {
   width: 0.4rem;
   height: 0.4rem;
   background: #0b0b1d;
   border-radius: 50%;
   border: 10px solid #ffffff;
   display: inline-block;
   margin-left: 4.5rem;
   transition: all 0.5s ease;
}

.scroll-bar:hover span.dot {
   border-color: #32dd9f;
}

LIVE PREVIEW :

Schedule a call Schedule a call Schedule a call

Discover more Articles

Top 5 Common Ecommerce Website Design Mistakes and How to Fix Them

Running an ecommerce website is no small feat. With the rise of online shopping, it’s critical that your website delivers a seamless and enjoyable user experience. However, many ecommerce businesses make design mistakes that can hurt their sales, customer satisfaction, and overall success.

Fix common design mistakes to boost conversions and enhance user experience.

1. Slow Page Load Times

Mistake: One of the most common mistakes ecommerce businesses make is having slow page load times. Consumers expect fast-loading websites, and if your pages take too long to load, you risk losing potential customers. According to Google, 53% of mobile users abandon sites that take longer than 3 seconds to load.

How to Fix It:
  • Optimize your website’s images, compressing them without sacrificing quality.
  • Use caching to speed up page loads.
  • Consider using a content delivery network (CDN) to serve content faster to users around the world.
  • Regularly test your website’s speed with tools like Google PageSpeed Insights and make improvements as needed.

At Designomad, we prioritize website speed to ensure your ecommerce site performs efficiently and retains visitors.

2. Complicated Navigation

Mistake: Complex or cluttered navigation is a major turnoff for users. If customers can’t quickly find what they’re looking for, they’ll likely leave your site without making a purchase. Confusing menus, hard-to-read categories, or too many options can cause frustration and hurt conversions.

How to Fix It:
  • Simplify your main navigation with clear categories that make sense for your products.
  • Implement filters and search options that help customers quickly narrow down their choices.
  • Ensure that important pages (like contact info, shipping details, or customer support) are easy to find.
We help Designomad clients create clear and intuitive navigation, ensuring users can easily browse products and find what they want in just a few clicks.

3. Unclear Calls to Action (CTAs)

Mistake: Having vague or hard-to-find calls to action (CTAs) is another common mistake. If users can’t easily understand how to take the next step (like adding an item to the cart or checking out), they may leave your site without completing a purchase.

How to Fix It:
  • Use clear, concise, and compelling CTAs like “Add to Cart,” “Shop Now,” or “Checkout.”
  • Ensure CTAs are prominently displayed, especially on product pages, to guide customers toward the next step.
  • Use contrast in the design of your CTAs to make them stand out from the rest of the content.

At Designomad, we ensure that every ecommerce site we design has strategically placed CTAs that lead users toward conversion.

4. Lack of Mobile Optimization

Mistake: A non-responsive website that doesn’t function well on mobile devices is a critical mistake. With mobile ecommerce sales accounting for over 70% of total ecommerce sales in some regions, a mobile-friendly design is no longer optional.

How to Fix It:
  • Ensure that your website is fully responsive, meaning it adjusts seamlessly to any screen size.
  • Optimize buttons, images, and text to ensure usability on smaller devices.
  • Test your mobile design regularly to ensure that all functions (like checkout or product filters) work flawlessly.

At Designomad, we specialize in mobile-first design, ensuring that your ecommerce site performs excellently on all devices.

5. Poor Product Imagery

Mistake: Low-quality or insufficient product images can turn customers away. Shoppers want to see high-resolution images that show your products from multiple angles. Without these, they may not trust the quality of what you’re selling.

How to Fix It:
  • Use high-resolution images that clearly show your products from various angles.
  • Offer zoom functionality on product images so users can get a closer look.
  • Include lifestyle images that show how your products are used in real life.
We work with clients at Designomad to ensure their product images are visually appealing and provide the level of detail that customers expect.

Discover more Articles

The Power of Motion Design: Elevating Your Sales and Marketing Strategies

Before diving into how motion design can transform your marketing, let’s take a moment to define it. Motion design refers to the use of animation, video, and other moving visual elements to communicate messages, tell stories, or enhance brand experiences. From animated logos to explainer videos and dynamic social media ads, motion design can be applied across various platforms to create compelling, eye-catching content.

How Motion Design Enhances Your Sales and Marketing Strategies

1. Captures Attention and Keeps Viewers Engaged

In a world where consumers are bombarded with an overwhelming amount of information every day, grabbing attention is more difficult than ever. Motion design has a unique ability to instantly grab attention with its dynamic visuals and movement, making it an excellent way to stand out from the static noise of traditional marketing content.
How It Works:
  • Animated ads on social media or websites have higher engagement rates than static images.
  • Video content featuring motion design is more likely to be shared, increasing your reach.
When applied strategically, motion design helps cut through the clutter, making sure your message isn’t lost in the noise.

2. Improves Communication and Simplifies Complex Ideas

Explaining complex ideas or services can be challenging, especially when you’re trying to convey your message in a limited amount of time. Motion design can help break down these complexities and present information in a more digestible, engaging way.
How It Works:
  • Explainer videos featuring motion design can visually demonstrate how your product or service works, making it easier for potential customers to understand your offerings.
  • Infographics with animation can illustrate data in a dynamic, easy-to-follow format, enhancing comprehension.
At Designomad, we know that simplifying your message through creative animation can significantly improve how your audience perceives your brand.

3. Boosts Brand Awareness and Recognition

Motion design can help you build a consistent visual identity that resonates with your audience. Whether it’s an animated logo, dynamic video intro, or a series of engaging social media posts, motion design can reinforce your brand’s identity, helping people recognize and remember you.
How It Works:
  • Animated logos or intros set the tone for your brand and make your content instantly recognizable.
  • Branded motion graphics in your marketing materials create a sense of professionalism and consistency.
By incorporating motion design into your marketing strategy, you can increase brand recall and make your business more memorable.

4. Increases Conversion Rates and Drives Action

One of the most significant benefits of motion design is its ability to drive action. Motion elements, such as call-to-action (CTA) buttons, animated icons, and compelling videos, encourage viewers to take the next step in their buyer’s journey—whether that’s making a purchase, signing up for a newsletter, or downloading a resource.
How It Works:
When motion design is strategically used on your website, in emails, or in ads, it can significantly boost your conversion rates and accelerate the decision-making process for potential customers.
  • Animated CTAs draw attention to key actions you want visitors to take, increasing the likelihood of conversion.
  • Product demonstration videos or testimonials with motion graphics can showcase your offerings in an engaging, persuasive way.

5. Enhances Social Media Marketing

Social media is a key part of any modern marketing strategy, and motion design can take your social media game to the next level. Animated videos and motion graphics not only stand out in crowded newsfeeds but also encourage users to engage, share, and comment.
How It Works:
  • Short animated videos can be used for announcements, promotions, or tutorials, catching the eye of social media users.
  • Motion design elements like GIFs, animated infographics, and story highlights can increase user interaction on platforms like Instagram, Facebook, and LinkedIn.
At Designomad, we’ve seen how brands using motion design on social media experience higher engagement, leading to better brand awareness and customer loyalty.

Discover more Articles

Navigating the Web: Overcoming Challenges in the Web Agency Business

In the fast-paced and ever-evolving world of web design, businesses and entrepreneurs are constantly seeking reliable partners to bring their digital visions to life. This has created a competitive environment for web agencies, making it essential for them to overcome various challenges to thrive.

The Challenges Web Design Agencies Face

1. Keeping Up with Rapid Technological Advancements

The digital landscape is constantly evolving, with new tools, technologies, and trends emerging regularly. For web agencies like Designomad, staying ahead of the curve can be a significant challenge. Web development frameworks, content management systems (CMS), and design principles evolve, requiring continuous learning and adaptation.

2. Balancing Client Expectations and Project Scope

Clients often come to us with grand visions for their websites, but the reality of balancing design ambitions with budgets, timelines, and functionality can be tricky. One common issue we face is scope creep, when a project starts to grow beyond the agreed-upon parameters.

3. Designing and Developing with Collaboration

Designing a website and bringing it to life requires close collaboration between designers and developers. At times, a disconnect between the two teams can cause delays and frustrations, affecting the quality of the final product.

4. Managing Multiple Projects Simultaneously

Managing several client projects at once can be overwhelming, especially when each project has its own set of requirements, deadlines, and challenges. If we’re not careful, the quality of our work or the timeliness of our delivery can be compromised.

5. SEO and User Experience: The Balancing Act

Design is important, but a website also needs to perform well in search engines and offer a seamless user experience. Achieving this balance is a challenge, especially when we must consider the technical aspects of SEO and site speed alongside stunning visuals and functionality.

6. Standing Out in a Saturated Market

The web design industry is crowded, and with so many agencies out there, differentiating ourselves can be challenging. We’re constantly looking for ways to stand out and prove to clients that we’re the right choice for their business.

Discover more Articles