დაყენების ინსტრუქცია: ქვემოთ მოყვანილი სკრიპტი ჩასვით საიტის ბლოკში
<meta charset="UTF-8"> <link href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" rel="apple-touch-icon" type="image/png" /><meta name="apple-mobile-web-app-title" content="CodePen"> <link href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" rel="shortcut icon" type="image/x-icon" /> <link color="#111" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" rel="mask-icon" type="image/x-icon" /><script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> <title></title> <link href="https://codepen.io/ciprian/pen/xxmomZR" rel="canonical" /> <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@900&display=swap" rel="stylesheet" /> <style type="text/css">body { font-family: "Red Hat Display"; font-weight: 900; font-size: 48px; } p { font-size: 24px; } .marquee-wrapper { overflow: hidden; width: 400px; margin: 0 auto; border: 1px solid red; } </style> <p> </p> <div class="marquee-wrapper"> <div id="marquee">სიახლეების საიტისათვის ალბათ ბევრს ჭირდება ამგვარი სახის მორბენალი სტრიქონი</div> <div id="marquee2">მიიღეთ სკრიპტი და გამოიყენეთ თქვენი საიტის უკეთესად წარმოჩენისათვის</div> </div> <script id="rendered-js" > /** * Initialize a marquee effect for an HTML element. * * @param {HTMLElement} element - The element to apply the marquee effect to. * @param {number} [repeatCount=7] - The number of times to repeat the element's content. * @param {number} [step=1] - The step size for the marquee animation. */ const startMarquee = (element, repeatCount = 7, step = 1) => { /** * Function that animates the marquee effect. */ const animateMarquee = () => { position = position < width ? position + step : 1; element.style.marginLeft = `${-position}px`; element.style.overflow = 'hidden'; element.style.whiteSpace = 'nowrap'; requestAnimationFrame(animateMarquee); }; let position = 0; const space = ''; const content = element.innerHTML; element.innerHTML = Array(repeatCount).fill(content + space).join(''); element.style.position = 'absolute'; const width = element.clientWidth + 1; element.style.position = ''; // Start the marquee animation animateMarquee(); }; // Example usages: startMarquee(document.getElementById('marquee'), 16, 0.5); // Customize repeatCount and step startMarquee(document.getElementById('marquee2'), 16, 1); //# sourceURL=pen.js </script><script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js"></script>
დააკოპირეთ
