Animation

SMOOTH INFINITE MARQUEE with text or image – Elementor and HTML, CSS Create captivating, endlessly scrolling marquees with text or images effortlessly using the Smooth Infinite Marquee feature in Elementor for WordPress. Utilizing HTML and CSS, enhance your website with dynamic motion, seamlessly grabbing attention and guiding visitors through your content with finesse. Code Script Live Preview View Tutorial [elementor-template id=”104″] Format: Tutorial: Updated: CSS, HTML View [elementor-template id=”130″][elementor-template id=”153″][elementor-template id=”176″] SMOOTH INFINITE MARQUEE with text HTML hello there ➺ hello there ➺ hello there ➺ hello there ➺ hello there ➺ hello there ➺ CSS .marquee { display: flex; overflow: hidden; height: 10vh; user-select: none; gap: 2rem; padding-top: 1rem; padding-bottom: 1rem; /*background-color: green;*/ /*transform: skewY(-3deg); */ /*transform: rotate(-5deg) translateY(-30px) translateX(50px);*/ } .marquee:hover { -webkit-text-stroke: 1.5px #fff; text-stroke: 1.5px #fff; -webkit-text-fill-color: transparent; text-fill-color: transparent; color: transparent; transition: all 0.5s ease; -webkit-font-smoothing: antialiased; /*-moz-osx-font-smoothing: grayscale;*/ } .marquee__group { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-width: 100%; animation: scroll 15s linear infinite reverse; } .marquee__group span { color: white; font-size: 5vw; font-weight: 800; white-space: nowrap; font-family: ‘Syne’, sans-serif !important; /*text-transform: uppercase;*/ } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% – 2rem)); } } @media only screen and (min-width: 360px) { .marquee__group span { font-size: 6.5vw; } } SMOOTH INFINITE MARQUEE with IMAGE HTML CSS .marquee__three { display: flex; overflow: hidden; height: 68vh; user-select: none; gap: .1rem; padding-top: 2rem; padding-bottom: 2rem; /*transform: rotate(-5deg) translateY(-100px) translateX(50px);*/ /*animation: scroll 18s linear infinite;*/ /*background-color: green;*/ /*transform: skewY(-8deg); */ /*-webkit-mask-image:radial-gradient(rgba(0, 0, 0,1) 15%, transparent 68%);*/ /*mask-image: linear-gradient(transparent, black 10%, black 70%, transparent 100%);*/ } .marquee–hover-pause:hover .marquee__group__three { animation-play-state: paused; } .marquee__group__three { flex-shrink: 0; display: flex; align-items: center; /*justify-content: space-between;*/ gap: .1rem; min-width: 100%; animation: scroll 30s linear infinite reverse; } .marquee__group__three img:hover { transition: all 0.5s ease-in-out; /*transform: skewY(-8deg);*/ transform: scale(1.1); background-color: #c1532f; object-fit: cover; aspect-ratio: 1; border-radius: 50%; will-change: transform; margin-top: 1rem; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% – .1rem)); } }

Animated gradient text in Elementor CSS Add eye-catching flair to your WordPress Elementor website with animated gradient text! Elevate your design with dynamic color transitions that captivate your audience. Harness the power of CSS to create striking visual effects effortlessly. Code Script Live Preview View Tutorial [elementor-template id=”104″] Format: Tutorial: Updated: CSS View [elementor-template id=”130″][elementor-template id=”153″][elementor-template id=”176″] /* – Animated Gradient Text – */ .gradient-text h1, .gradient-text h2, .gradient-text h3, .gradient-text h4, .gradient-text h5, .gradient-text h6 { background: linear-gradient(45deg, #2FEBDC, #EB413B, #FFA300, #E422EB); background-size:400%; animation: text-gradient 15s ease infinite; padding:5px 0; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } @keyframes text-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } Class: gradient-text