@@ -2,83 +2,134 @@ document.addEventListener("contextmenu", (event) => {
22 event . preventDefault ( ) ;
33} ) ;
44
5- const texts = [ "I'm Rifzkhy" , "I'm Programmer" , "I'm Desainer " ] ;
5+ const texts = [ "I'm Rifzkhy" , "I'm Programmer" , "I'm Designer " ] ;
66
7- const typingElement = document . querySelector ( ".typing" ) ;
8- let textIndex = 0 ;
7+ const typingElements = document . querySelectorAll ( ".typing" ) ;
98
10- function type ( ) {
9+ function type ( element , text ) {
1110 let i = 0 ;
12- const text = texts [ textIndex ] ;
11+
1312 const typingInterval = setInterval ( ( ) => {
1413 if ( i < text . length ) {
15- typingElement . textContent += text . charAt ( i ) ;
14+ element . textContent += text . charAt ( i ) ;
1615 i ++ ;
1716 } else {
1817 clearInterval ( typingInterval ) ;
19- setTimeout ( erase , 1000 ) ; // Wait for a moment before erasing
18+ setTimeout ( ( ) => erase ( element ) , 1000 ) ;
2019 }
21- } , 200 ) ; // Adjust the typing speed by changing the interval (e.g., 50 for faster typing).
20+ } , 200 ) ;
2221}
2322
24- function erase ( ) {
23+ function erase ( element ) {
24+ const text = element . textContent ;
25+
2526 const typingInterval = setInterval ( ( ) => {
26- if ( typingElement . textContent . length > 0 ) {
27- typingElement . textContent = typingElement . textContent . slice ( 0 , - 1 ) ;
27+ if ( element . textContent . length > 0 ) {
28+ element . textContent = element . textContent . slice ( 0 , - 1 ) ;
2829 } else {
2930 clearInterval ( typingInterval ) ;
30- textIndex = ( textIndex + 1 ) % texts . length ; // Move to the next text
31- setTimeout ( type , 500 ) ; // Wait for a moment before typing the next text
31+ setTimeout ( ( ) => {
32+ textIndex = ( textIndex + 1 ) % texts . length ;
33+ type ( element , texts [ textIndex ] ) ;
34+ } , 500 ) ;
3235 }
33- } , 50 ) ; // Adjust the erasing speed if needed
36+ } , 50 ) ;
3437}
3538
36- window . addEventListener ( "load" , ( ) => {
37- $ ( window ) . on ( "load" , function ( ) {
38- $ ( "html, body" ) . animate ( { scrollTop : 0 } ) ;
39- $ ( ".loader" ) . fadeOut ( 1000 ) ;
40- $ ( ".content" ) . fadeIn ( 1000 ) ;
41- setTimeout ( type , 1000 ) ;
39+ function checkInView ( ) {
40+ typingElements . forEach ( ( element ) => {
41+ const rect = element . getBoundingClientRect ( ) ;
42+ if ( rect . top >= 0 && rect . bottom <= window . innerHeight ) {
43+ // Element is in view, start typing effect
44+ if ( element . textContent === "" ) {
45+ textIndex = ( textIndex + 1 ) % texts . length ;
46+ type ( element , texts [ textIndex ] ) ;
47+ }
48+ } else {
49+ // Element is out of view, reset effect
50+ element . textContent = "" ;
51+ }
4252 } ) ;
43- } ) ;
53+ }
54+
55+ // Check if elements are in view when the page loads
56+ checkInView ( ) ;
57+
58+ // Check if elements are in view when the user scrolls
59+ window . addEventListener ( "scroll" , checkInView ) ;
4460
61+ //! Scroll effect
4562const scrollElements = document . querySelectorAll ( ".js-scroll" ) ;
4663
47- const elementInView = ( el , dividend = 1 ) => {
64+ function elementInView ( el , dividend = 1 ) {
4865 const elementTop = el . getBoundingClientRect ( ) . top ;
49-
5066 return (
5167 elementTop <=
5268 ( window . innerHeight || document . documentElement . clientHeight ) / dividend
5369 ) ;
54- } ;
70+ }
5571
56- const elementOutofView = ( el ) => {
72+ function elementOutofView ( el ) {
5773 const elementTop = el . getBoundingClientRect ( ) . top ;
58-
5974 return (
6075 elementTop > ( window . innerHeight || document . documentElement . clientHeight )
6176 ) ;
62- } ;
77+ }
6378
64- const displayScrollElement = ( element ) => {
79+ function displayScrollElement ( element ) {
6580 element . classList . add ( "scrolled" ) ;
66- } ;
81+ }
6782
68- const hideScrollElement = ( element ) => {
83+ function hideScrollElement ( element ) {
6984 element . classList . remove ( "scrolled" ) ;
70- } ;
85+ }
7186
72- const handleScrollAnimation = ( ) => {
87+ function handleScrollAnimation ( ) {
7388 scrollElements . forEach ( ( el ) => {
7489 if ( elementInView ( el , 1.25 ) ) {
7590 displayScrollElement ( el ) ;
7691 } else if ( elementOutofView ( el ) ) {
7792 hideScrollElement ( el ) ;
7893 }
7994 } ) ;
80- } ;
95+ }
8196
82- window . addEventListener ( "scroll" , ( ) => {
83- handleScrollAnimation ( ) ;
84- } ) ;
97+ // Check if elements are in view when the page loads
98+ handleScrollAnimation ( ) ;
99+
100+ // Check if elements are in view when the user scrolls
101+ window . addEventListener ( "scroll" , handleScrollAnimation ) ;
102+
103+ //! Writing effect
104+ const elements = document . querySelectorAll ( ".write" ) ;
105+
106+ function type ( element ) {
107+ const text = element . textContent ;
108+ element . textContent = "" ;
109+
110+ let i = 0 ;
111+
112+ function typeCharacter ( ) {
113+ if ( i < text . length ) {
114+ element . textContent += text . charAt ( i ) ;
115+ i ++ ;
116+ setTimeout ( typeCharacter , 200 ) ;
117+ }
118+ }
119+
120+ function checkInView ( ) {
121+ const rect = element . getBoundingClientRect ( ) ;
122+ if ( rect . top >= 0 && rect . bottom <= window . innerHeight ) {
123+ // Element is in view, start typing effect
124+ typeCharacter ( ) ;
125+ }
126+ }
127+
128+ // Check if element is in view when the page loads
129+ checkInView ( ) ;
130+
131+ // Check if element is in view when the user scrolls
132+ window . addEventListener ( "scroll" , checkInView ) ;
133+ }
134+
135+ elements . forEach ( type ) ;
0 commit comments