jquery-animate 相关问题

我需要在菜单中制作像这个网站上的动画： https://displaay.net/typefaces/retail/ 有现成的解决方案吗？我尝试过与副驾驶一起做，但没有成功。 </desc> <question vote="0"> <p>我需要在菜单中制作像该网站上那样的动画： <a href="https://displaay.net/typefaces/retail/" rel="nofollow noreferrer">https://displaay.net/typefaces/retail/</a></p> <p>有现成的解决方案吗？我尝试过与副驾驶一起完成，但没有成功。</p> <pre><code><script> document.addEventListener('DOMContentLoaded', function() { var titles = [ 'Text1', 'Text12', 'Text3' ]; var currentIndex = 0; function changeTitle() { // Select the _H1 element var element = document.querySelector('._H1'); if (element) { // Split the current title into characters and wrap each character in a span var chars = element.textContent.split(''); element.innerHTML = chars.map(char => `<span>${char}</span>`).join(''); // Function to change a character to a random one function changeChar(index) { if (index < chars.length) { var randomChar = String.fromCharCode(Math.floor(Math.random() * (126 - 33 + 1)) + 33); chars[index] = `<span class="animate">${randomChar}</span>`; element.innerHTML = chars.join(''); setTimeout(() => changeChar(index + 1), 20); // Adjust the delay as needed } else { // After all characters have changed, change the text to the next title setTimeout(() => { element.innerHTML = titles[currentIndex]; currentIndex = (currentIndex + 1) % titles.length; // Loop through the titles }, 2000); // Wait for 2 seconds before changing the text } } // Start changing the characters changeChar(0); } } // Change the title immediately and then every 5 seconds changeTitle(); setInterval(changeTitle, 5000); // 5000 milliseconds = 5 seconds }); </code></pre> </question> <answer tick="false" vote="0"> <p>受到您初始代码的启发，我做了以下操作。它创建一个随机字符串，只要该字符不正确，它就会继续使用另一个随机字符。直到整个字符串正确或者已经过了 100 个“回合”。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>const max_count = 100; const interval_ms = 30; document.addEventListener('DOMContentLoaded', e => { document.querySelectorAll('.animated').forEach(elm => animateText(elm)); }); function animateText(element, interval) { if (element.initialtext) { element.count++; let randomStr = Object.keys(element.initialtext) .map(i => String.fromCharCode(Math.floor(Math.random() * (126 - 33 + 1)) + 33)).join(''); element.animatedStr = Object.keys(element.initialtext) .map(i => (element.animatedStr[i] == element.initialtext[i]) ? element.animatedStr[i] : randomStr[i]).join(''); element.textContent = (element.count < max_count) ? element.animatedStr : element.initialtext; if (element.textContent != element.initialtext) { setTimeout(() => {animateText(element)}, interval_ms); } else { delete element.count; delete element.initialtext; delete element.animatedStr; } } else { element.count = 0; element.initialtext = element.textContent; element.animatedStr = Object.keys(element.initialtext).map(i => ' ').join(''); element.innerHTML = ''; animateText(element); } }</code></pre> <pre><code><h1 class="animated">Some title</h1> <h1><span class="animated">Some</span> <span class="animated">title</span></h1></code></pre> </div> </div> <p></p> </answer> </body></html>

javascript animation text jquery-animate

回答 0 投票 0

显示和隐藏类（onClick）

上传我在按钮上使用 Bootstrap 3 中的字形图标，该按钮使用 CSS3 关键帧旋转，我想要（.隐藏）此类，直到单击按钮，然后它将出现/显示，然后旋转。 ..

html css twitter-bootstrap jquery-animate

回答 2 投票 0

在纯 JavaScript 中垂直滚动时水平移动元素

我想在图像出现后立即将其从屏幕的最左侧移动，并且在滚动时，它应该移动到屏幕的右侧。我需要用纯 JavaScript 来实现这一点，或者......

javascript jquery css css-animations jquery-animate

回答 1 投票 0

如何Lottie动画SVG

我是lottie文件的新手，我已经在视频的After Effects中创建了动画，我认为这就是我将使用的方法，从illustrator到After Effects，或者figma到After Effects。我正在尝试...

animation jquery-animate lottie

回答 1 投票 0

如何在 CSS 和 jQuery 中重新设置 div 动画

我正在制作这个演示。为什么我无法在单击后重新设置动画？ CSS 规则和 jQuery 仅适用于首次点击。我正在制作这个演示。为什么我无法在单击后重新设置动画？ CSS 规则和 jQuery 仅适用于首次点击。 <div class="animatetop"></div> <button id="clicker">Click Me</button> .animatetop { height:250px; width:250px; background-color:#FFCC33 } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); animation-delay:2s; } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); animation-delay:2s; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); animation-delay:2s; } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; animation-delay:2s; } $(document).ready(function () { $("#clicker").on("click", function () { // alert( "man nemidanam" ); $('.animatetop').addClass('animated fadeInUp'); }); }); 您只能向对象添加类一次。一旦存在，再次添加它就没有任何作用。动画完成后，您必须删除这些类 animated fadeInUp。一种方法是使用 setTimeout(): $(document).ready(function () { $("#clicker").on("click", function () { // alert( "man nemidanam" ); $('.animatetop').addClass('animated fadeInUp'); setTimeout(function(){ $('.animatetop').removeClass('animated fadeInUp'); }, 1500); }); }); JSFiddle 在这种情况下，您可以使用 queue() 和 deque() 添加和删除您的类： $(document).ready(function () { $("#clicker").on("click", function () { // alert( "man nemidanam" ); $('.animatetop').addClass('animated fadeInUp').delay(500).queue(function () { $(this).removeClass("animated fadeInUp"); $(this).dequeue(); }); }) }); 更新了小提琴

jquery css jquery-animate css-animations

回答 2 投票 0

隐藏和显示右侧边栏[关闭]

所以，我正在尝试创建一个 JavaScript 或查询来隐藏右侧边栏 div。事实证明这比我预期的要困难得多，但我已经很接近了。我创建了一个隐藏/显示右侧边栏，当

javascript jquery jquery-animate sidebar

回答 1 投票 0

使用 jQuery 动画 addClass/removeClass

我正在使用 jQuery 和 jQuery-ui，想要为各种对象上的各种属性设置动画。为了在这里解释这个问题，我将其简化为一个 div，当用户移动时该 div 会从蓝色变为红色......

javascript jquery css jquery-ui jquery-animate

回答 6 投票 0

控制动画徽标帧的最佳库方法是什么？

所以我正在为一个霓虹灯名称的网站制作一个动画徽标。我希望它一开始，字母一次打开一个，一个字母振动，然后有帧的某些部分我......

javascript jquery jquery-animate gif animated-gif

回答 1 投票 0

如何在jQuery中延迟执行回调函数

我有两个函数在元素及其子元素上触发动画（用于不透明度和顶部），第二个是第一个的回调函数。他们之间有 5 秒的停顿，我

javascript jquery jquery-animate

回答 2 投票 0

带有匹配媒体的 jQuery 媒体查询

我正在尝试根据屏幕分辨率更改我的 jQuery 代码。我正在对主要内容区域进行动画处理，并且想在不同的屏幕尺寸上更改其宽度。经过网上大量搜索...

jquery jquery-animate media-queries

回答 4 投票 0

Jquery 按类制作动画，但通过每个 div 的单独数据属性动态设置距离

我需要能够通过回调函数将一系列动画链接在一起，以便它们一个接一个地精确执行。然而，其中一些动画会影响

jquery jquery-animate

回答 1 投票 0

jQuery/CSS不同颜色的半圆进度条

我是 jQuery 和 CSS3 的新手。我需要下面的 HTML 看起来像这样：请帮我。 </script...</desc> <question vote="0"> <p>我是 jQuery 和 CSS3 的新手。我需要以下 HTML 看起来像这样：</p> <p><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzVjb05lLnBuZw==" alt="here"/></p> <p>请帮助我。</p> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="progress"> <div class="barOverflow"> <div class="bar"></div> </div> <span>10</span>% </div> <div class="progress"> <div class="barOverflow"> <div class="bar"></div> </div> <span>100</span>% </div> <div class="progress"> <div class="barOverflow"> <div class="bar"></div> </div> <span>34</span>% </div> <div class="progress"> <div class="barOverflow"> <div class="bar"></div> </div> <span>67</span>% </div> </code></pre> </question> <answer tick="false" vote="0"> <p>就是这里，</p> <p>我实际上没有得到你的问题，但这是我想出的，你可以相应地进行更改。</p> <p><strong>HTML</strong></p> <pre><code><div class="circle"></div> </code></pre> <p><strong>CSS</strong></p> <pre><code>.circle { background: transparent; width: 120px; height: 120px; border: 12px solid; border-top-color: blue; border-right-color: red; border-bottom-color: green; border-left-color: yellow; border-radius: 50%; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(359deg) } } </code></pre> <p>请添加动画、变换等属性的供应商前缀。</p> <p>希望有帮助！</p> </answer> </body></html>

javascript jquery css jquery-animate css-animations

回答 0 投票 0

jquery-animate 相关问题

最新问题