亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在動畫從側面引入標題之前,我有一些標題。我該如何擺脫它?

在動畫從側面引入標題之前,我有一些標題。我該如何擺脫它?

汪汪一只貓 2023-03-18 16:42:51
我正在建立一個網站來放置我所有的項目并恢復,我正在使用一些動畫從加載的一側引入標題元素,如下面的代碼片段所示。但是當頁面最初加載時,標題文本閃爍得非???,然后 JavaScript 加載并將它們從側面引入。這是預加載問題嗎?它似乎沒有解決它。這與元素/JavaScript 的加載順序有關嗎?或者我是否在我的 JavaScript 中遺漏了一些阻止這種情況的行?window.addEventListener('DOMContentLoaded', function () {    /* Function to bring in navbar from top staggered */    gsap.from(".btn",{duration:2,opacity:0,y:-300,stagger:0.25,});    /* Function to bring h1 in from the left */    gsap.from("h1",{duration:2.5,ease:"power2.out",x:-2000});    /* Function to bring in h2 from right */    gsap.from("h2",{duration:2.5,ease:"power2.out",x:2000});    /* Function to register gsap scroll plugin */    gsap.registerPlugin(ScrollToPlugin);    /* Function to scroll to About me when button is clicked */    document.getElementById('scroll').addEventListener('click', function clicked() {    gsap.to(window, {duration: 0.8, scrollTo:'#red' });    });});
查看完整描述

2 回答

?
喵喵時光機

TA貢獻1846條經驗 獲得超7個贊

從文檔:

DOMContentLoaded 事件在初始 HTML 文檔已完全加載和解析時觸發,無需等待樣式表、圖像和子框架完成加載。

這意味著您的網頁將在執行回調之前呈現。


查看完整回答
反對 回復 2023-03-18
?
慕雪6442864

TA貢獻1812條經驗 獲得超5個贊

嘗試將您移動<script src="main.js"></script>到 html 正文的最底部,以便其他所有內容首先運行。我剛剛向項目中添加了一些動畫……我是這樣做的:


window.onload(animations());


function animations(){

    const tl = gsap.timeline({defaults: {ease: "power1.out"}});


    tl.to(".intro", {y: "-100%", duration: 1, delay: 1});

    tl.fromTo(".intro", {opacity: 1}, {opacity: 0, duration: 1}, "-=1");

    tl.fromTo(".card", {y: "100%"}, {y: "0%", duration: 1, stagger: 0.25}, "-=1");

    tl.fromTo("#logo-blk", {y: "-400%", rotation: "-30"}, {y: "-100%", rotation: "0", 

        duration: 0.5}, "-=0.5");

}


查看完整回答
反對 回復 2023-03-18
  • 2 回答
  • 0 關注
  • 124 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號