tailwind-css-todesktop/script.js at master · pavcodings/tailwind-css-todesktop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
function showMenu()
{
    console.log("clicked")
    // document.getElementById("hamb").classList.toggle("")
}

function clickHandle()
{
const nav_dialog=document.getElementById("nav-dialog")
nav_dialog.classList.toggle('hidden')
    console.log("clicked todesktop menu")
}


const initialTranslateLTR=48*4
const initialTranslateRTL=-36*4
function setupInterSectionObserver(element,isLTR, speed)
{


    const callback=(entries)=>{
isIntersecting=entries[0].isIntersecting
if(isIntersecting)
{
addEventListener('scroll',scrollHandler)

}
else
{
removeEventListener('scroll',scrollHandler)
}

    }

const interSectionObserver= new IntersectionObserver(callback)
interSectionObserver.observe(element)


function scrollHandler()
{
    const translatex = (window.innerHeight-element.getBoundingClientRect().top) * speed
    let totaltranslate=0

    if(isLTR)
    {
        totaltranslate=initialTranslateLTR+translatex

    }
    else
    {
        totaltranslate=-(initialTranslateRTL+translatex)
    }
    element.style.transform = 'translateX('+totaltranslate+'px)'


}


}

const line1=document.getElementById('line1')
const line2=document.getElementById('line2')
const line3=document.getElementById('line3')
const line4=document.getElementById('line4')

setupInterSectionObserver(line1,true, 0.15)
setupInterSectionObserver(line2,false, 0.15)
setupInterSectionObserver(line3,true,0.15)
setupInterSectionObserver(line4,false,0.50)


// faq controllers


function faqHandle(ielement, ddelement)
{

    ielement.classList.toggle('rotate-180')
    ddelement.classList.toggle('hidden')


}

const dtElement = document.querySelectorAll('dt')
// console.log(dtElement)

dtElement.forEach((element)=>{
   // console.log(element)

   const ddelement=element.parentElement.querySelector('dd')
const ielement=element.querySelector('i')

element.addEventListener('click',(event)=>{

faqHandle(ielement, ddelement)

})

})