modified: package.json modified: src/index.css modified: src/shared/components/Header.tsx new file: src/shared/components/animated/QnASection.css new file: src/shared/components/animated/TypingText.tsx modified: src/shared/components/backtotop/index.tsx modified: src/shared/providers/RouterProviderComponent.tsx modified: tailwind.config.cjsmain
Thuong_e
2 years ago
parent
e7cc1d132d
commit
3cb558ad6a
@ -0,0 +1,15 @@ |
||||
/* .list-answer { |
||||
animation: modalFadeIn ease 0.5s; |
||||
background-color: red; |
||||
} |
||||
@keyframes modalFadeIn { |
||||
0% { |
||||
opacity: 0; |
||||
transform: translateY(-150px); |
||||
} |
||||
|
||||
100% { |
||||
opacity: 1; |
||||
transform: translateY(0px); |
||||
} |
||||
} */ |
||||
@ -0,0 +1,28 @@ |
||||
import React, { useEffect, useState } from "react"; |
||||
|
||||
type Props = { |
||||
children: string; |
||||
}; |
||||
const TypingText = ({ children, ...props }: Props) => { |
||||
const [text, setText] = useState(``); |
||||
|
||||
useEffect(() => { |
||||
setText(children); |
||||
}); |
||||
const [typedText, setTypedText] = useState(""); |
||||
|
||||
useEffect(() => { |
||||
if (text.length === typedText.length) { |
||||
return; |
||||
} |
||||
|
||||
const timeoutId = setTimeout(() => { |
||||
setTypedText(text.slice(0, typedText.length + 1)); |
||||
}, 70); |
||||
|
||||
return () => clearTimeout(timeoutId); |
||||
}, [text, typedText]); |
||||
|
||||
return <h1> {typedText}</h1>; |
||||
}; |
||||
export default TypingText; |
||||
@ -1,39 +1,44 @@ |
||||
import { useState } from 'react' |
||||
import robotLogo from '../../../assets/images/robot-coin1.png' |
||||
import { MdOutlineKeyboardDoubleArrowUp } from 'react-icons/md' |
||||
import { useState } from "react"; |
||||
import robotLogo from "../../../assets/images/robot-coin1.png"; |
||||
import { MdOutlineKeyboardDoubleArrowUp } from "react-icons/md"; |
||||
import { VscFoldUp } from "react-icons/vsc"; |
||||
const BackToTopButton = () => { |
||||
const [isVisible, setIsVisible] = useState(false) |
||||
const [isVisible, setIsVisible] = useState(false); |
||||
|
||||
const toggleVisibility = () => { |
||||
if (window.pageYOffset > 100) { |
||||
setIsVisible(true) |
||||
setIsVisible(true); |
||||
} else { |
||||
setIsVisible(false) |
||||
} |
||||
setIsVisible(false); |
||||
} |
||||
}; |
||||
|
||||
const scrollToTop = () => { |
||||
window.scrollTo({ |
||||
top: 0, |
||||
behavior: 'smooth', |
||||
}) |
||||
} |
||||
behavior: "smooth", |
||||
}); |
||||
}; |
||||
|
||||
window.addEventListener('scroll', toggleVisibility) |
||||
window.addEventListener("scroll", toggleVisibility); |
||||
|
||||
return ( |
||||
<div |
||||
className={`bg-orange-500 back-to-top ${ |
||||
isVisible ? 'visible' : '' |
||||
isVisible ? "visible" : "" |
||||
} group relative m-12 flex justify-center`}
|
||||
onClick={scrollToTop} |
||||
> |
||||
<VscFoldUp |
||||
className="absolute top-[-18px] right-[50%] translate-x-[50%] opacity-70 w-4 h-4 transition-all rounded text-center" |
||||
width={50} |
||||
></VscFoldUp> |
||||
<img src={robotLogo} className="rounded-full" alt="back" /> |
||||
<span className="absolute scale-0 transition-all rounded bg-orange-500 group-hover:scale-100 p-1 text-center"> |
||||
👆 |
||||
</span> |
||||
</div> |
||||
) |
||||
} |
||||
); |
||||
}; |
||||
|
||||
export default BackToTopButton |
||||
export default BackToTopButton; |
||||
|
||||
Loading…
Reference in new issue