neosubhamoy/neosubhamoy-portfolio
1
1
Fork 0
mirror of https://github.com/neosubhamoy/neosubhamoy-portfolio.git synced 2025-12-20 01:09:35 +05:30
Code Issues Wiki Activity

(refactor): allin1 core-animation is introduced to handle external animations

Browse Source
This commit is contained in:
Subhamoy Biswas
2023-12-12 21:59:26 +05:30
parent 7efeac3b4d
commit 6d036e4d47
3 changed files with 39 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
htdocs/assets/js/core-animation.js
View File

@@ -0,0 +1,37 @@
//---hello textbox on pome page (hero-section) config
function animate_hello() {
const texts = ["Namaste! 🙏", "Hello! 👋", "Konnichiwa! 😄", "Anyeonghaseyo! 😊", "Hola! 😃", "Bonjour! 😄", "Zdravstvuyte! 🙂", "Marhabaan! 😊", "Olá! 😃", "Salve! 🤠"];
const textContainer = document.getElementById("helloContainer");
let currentIndex = 0;
function animateText() {
textContainer.textContent = texts[currentIndex];
currentIndex = (currentIndex + 1) % texts.length;
setTimeout(() => {
animateText();
}, 3000);
}
animateText();
}
if(document.getElementById("helloContainer")) {
animate_hello();
}
//---hoverAnimatedContainer animation config
const animate_card_mouseover_effect = e => {
const { currentTarget: target } = e;
const rect = target.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;
target.style.setProperty("--mouse-x",`${x}px`);
target.style.setProperty("--mouse-y",`${y}px`);
}
if(document.querySelectorAll(".hoverAnimatedContainer")){
for(const card of document.querySelectorAll(".hoverAnimatedContainer")){
card.onmousemove = e => animate_card_mouseover_effect(e);
}
}

16
htdocs/contact.php
View File

@@ -110,21 +110,7 @@ require 'core/query_functions.php';
<script type="text/javascript" src="assets/js/preloader-config.js"></script> <script type="text/javascript" src="assets/js/preloader-config.js"></script>
<script type="text/javascript" src="assets/js/floatingbar-config.js"></script> <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
<script type="text/javascript" src="assets/js/keybinding-config.js"></script> <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
<script type="text/javascript" src="assets/js/core-animation.js"></script>
<script type="text/javascript" src="assets/js/contactform-config.js"></script> <script type="text/javascript" src="assets/js/contactform-config.js"></script>
<script type="text/javascript">
const handleOnMouseMove = e => {
const { currentTarget: target } = e;
const rect = target.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;
target.style.setProperty("--mouse-x",`${x}px`);
target.style.setProperty("--mouse-y",`${y}px`);
}
for(const card of document.querySelectorAll(".hoverAnimatedContainer")){
card.onmousemove = e => handleOnMouseMove(e);
}
</script>
</body> </body>
</html> </html>

32
htdocs/home.php
View File

@@ -221,36 +221,6 @@ require 'core/query_functions.php';
<script type="text/javascript" src="assets/js/preloader-config.js"></script> <script type="text/javascript" src="assets/js/preloader-config.js"></script>
<script type="text/javascript" src="assets/js/floatingbar-config.js"></script> <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
<script type="text/javascript" src="assets/js/keybinding-config.js"></script> <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
<script type="text/javascript"> <script type="text/javascript" src="assets/js/core-animation.js"></script>
//---hello textbox (hero-section) config
const texts = ["Namaste! 🙏", "Hello! 👋", "Konnichiwa! 😄", "Anyeonghaseyo! 😊", "Hola! 😃", "Bonjour! 😄", "Zdravstvuyte! 🙂", "Marhabaan! 😊", "Olá! 😃", "Salve! 🤠"];
const textContainer = document.getElementById("helloContainer");
let currentIndex = 0;
function animateText() {
textContainer.textContent = texts[currentIndex];
currentIndex = (currentIndex + 1) % texts.length;
setTimeout(() => {
animateText();
}, 3000);
}
animateText();
//---about me card hover animation config
const handleOnMouseMove = e => {
const { currentTarget: target } = e;
const rect = target.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;
target.style.setProperty("--mouse-x",`${x}px`);
target.style.setProperty("--mouse-y",`${y}px`);
}
for(const card of document.querySelectorAll(".hoverAnimatedContainer")){
card.onmousemove = e => handleOnMouseMove(e);
}
</script>
</body> </body>
</html> </html>