Skip to content

Commit b61d371

Browse files
hashmiarsahashmiarsa
committed
laoding animation added
1 parent 1427ab2 commit b61d371

File tree

3 files changed

+258
-70
lines changed

3 files changed

+258
-70
lines changed

‎index.html

+59-65
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,69 @@
1515
<title>Document</title>
1616
</head>
1717
<body>
18+
<div id="loader">
19+
<div class="loaderContent">
20+
<h1>Loading...</h1>
21+
<div class="timer">
22+
<h2 id="time">0</h2>
23+
<h2> - 100</h2>
24+
</div>
25+
</div>
26+
</div>
27+
<!-- <div id="loader">
28+
29+
</div> -->
30+
<!-- <div id="loader">
31+
<div>
32+
<div class="loaderContent">
33+
<div class="timer">
34+
<h2 id="time">0</h2>
35+
<h2> - 100</h2>
36+
</div>
37+
<h1>Your</h1>
38+
</div>
39+
<div class="loaderContent">
40+
<h1>Web Experience</h1>
41+
</div>
42+
<div class="loaderContent">
43+
<h1>is loading right</h1>
44+
<div class="blink">
45+
<h2>NOW</h2>
46+
</div>
47+
</div>
48+
<div class="waiting">
49+
<h3>Please wait <br>
50+
a few seconds</h3>
51+
</div>
52+
</div>
53+
</div> -->
54+
55+
<!-- <div class="loaderContent">
56+
<div class="timer">
57+
<h2 id="time">0</h2>
58+
<h2> - 100</h2>
59+
</div>
60+
<h1>Your</h1>
61+
</div>
62+
<div class="loaderContent">
63+
<h1>library collection</h1>
64+
</div>
65+
<div class="loaderContent">
66+
<h1>is loading right</h1>
67+
<div class="blink">
68+
<h2>NOW</h2>
69+
</div>
70+
</div>
71+
<div class="waiting">
72+
<h3>Please wait <br>
73+
a few seconds</h3>
74+
</div> -->
75+
1876

1977
<div id="video">
2078
<video autoplay loop muted src="./video/4873467-uhd_4096_2160_25fps.mp4"></video>
2179
</div>
2280

23-
<!-- <div id="img">
24-
<img src="./image/priscilla-du-preez-ggeZ9oyI-PE-unsplash.jpg" alt="">
25-
26-
</div> -->
2781

2882
<div id="main">
2983
<div id="page1">
@@ -453,67 +507,7 @@ <h3>By Koga Forescar</h3>
453507

454508
</div>
455509
<div id="page3"></div>
456-
</div>
457-
<!-- <div id="loader">
458-
459-
<div>
460-
<div class="loaderContent">
461-
<div class="timer">
462-
<h2 id="time">0</h2>
463-
<h2> - 100</h2>
464-
</div>
465-
<h1>Your</h1>
466-
</div>
467-
<div class="loaderContent">
468-
<h1>library collection</h1>
469-
</div>
470-
<div class="loaderContent">
471-
<h1>is loading right</h1>
472-
<div class="blink">
473-
<h2>NOW</h2>
474-
</div>
475-
</div>
476-
<div class="waiting">
477-
<h3>Please wait <br>
478-
a few seconds</h3>
479-
</div>
480-
</div>
481-
</div>
482-
483-
<div id="main_nav">
484-
<img id="logo" src="./image//download-removebg-preview.png" alt="library">
485-
<h4>Groups</h4>
486-
<h4>Talk</h4>
487-
<h4>More</h4>
488-
<button class="search-button">
489-
Search
490-
<i class="ri-search-line"></i> Remix icon search -->
491-
<!-- </button>
492-
493-
</div>
494-
<div id="image_div">
495-
<img src="./image/priscilla-du-preez-ggeZ9oyI-PE-unsplash.jpg" alt="">
496-
</div>
497-
<div id="main">
498-
<div id="page1">
499-
<h1>Read. Learn. Explore.</h1>
500-
<h2>Welcome to City Central Library!</h2>
501-
<p>City Central Library is a modern library and community hub in the heart of the city. Dedicated to promoting literacy, providing access to diverse resources, and fostering a love for reading in everyone.</p>
502-
<div id="arrow">
503-
<i class="ri-arrow-down-line"></i>
504-
</div>
505-
506-
507-
</div>
508-
509-
</div>
510-
511-
512-
513-
514-
515-
516-
-->
510+
</div>
517511
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
518512
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
519513
<script src="./script.js"></script>

‎script.js

+74-5
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
// // delay:0
5050

5151
// })
52-
// tl.from("#page1",{
52+
// tl.from("#page1,#page2,#page3",{
5353
// y:1600,
5454
// opacity:0,
5555
// // delay:0.2,
@@ -77,32 +77,101 @@
7777
// }
7878

7979
// loadingAnimation();
80+
81+
// gsap.to("#loader",{
82+
// y:-1500,
83+
// duration:4,
84+
// ease:Power4,
85+
// delay:2
86+
// })
87+
// gsap.from("#video,#main",{
88+
// y:1200,
89+
// opacity:0,
90+
// duration:0.5,
91+
// ease:Power4
92+
// })
93+
// GSAP loader timer animation
94+
95+
function loadingAnimation2(){
96+
gsap.from(".timer h2", {
97+
opacity: 0,
98+
duration: 1,
99+
onStart: function () {
100+
let time = document.querySelector("#time");
101+
let grow = 0;
102+
103+
// Timer to increase the number from 0 to 100
104+
let interval = setInterval(function () {
105+
grow++;
106+
if (grow <= 100) {
107+
time.textContent = grow;
108+
} else {
109+
time.textContent = 100;
110+
clearInterval(interval); // Stop the timer once it hits 100
111+
}
112+
}, 20);
113+
},
114+
});
115+
116+
// Loader and main page transition
117+
window.addEventListener('load', function () {
118+
// GSAP Timeline for animations
119+
const tl = gsap.timeline();
120+
121+
// After 5 seconds, move loader up and bring video/main from below
122+
setTimeout(() => {
123+
tl.to("#loader", {
124+
y: "-100%", // Move loader upwards
125+
duration: 1.5,
126+
ease: "power2.inOut"
127+
})
128+
.to("#video", {
129+
top: "0%", // Move video into view from below
130+
duration: 1.5,
131+
ease: "power2.inOut"
132+
}, "-=1") // Start this animation 1 second earlier for smoother transition
133+
.to("#main", {
134+
top: "0%", // Move main content into view from below
135+
duration: 1.5,
136+
ease: "power2.inOut",
137+
onComplete: function () {
138+
// Hide the video and show the main content after the animation completes
139+
document.querySelector('#main').style.display = 'block';
140+
}
141+
}, "-=1");
142+
}, 3000); // Wait 5 seconds before starting the animation
143+
});
144+
145+
146+
}
147+
loadingAnimation2()
148+
80149

81150
function homePageTextAnimation(){
82151
var text=document.querySelector("#text");
83152
gsap.from("#first_text h1",{
84153
y:150,
85154
opacity:0,
86-
delay:0.8,
155+
delay:3.7,
87156
duration:0.5,
88157
stagger:0.25,
89158
})
90159
gsap.from("#sec_text h1",{
91160
y:150,
92161
opacity:0,
93-
delay:0.8,
162+
delay:3.7,
94163
duration:0.5,
95164
})
96165
gsap.from("#para",{
97166
y:150,
98167
opacity:0,
99-
delay:1.3,
168+
delay:4,
100169
duration:0.5,
101170
})
102171
gsap.from("#button",{
103172
y:150,
104173
opacity:0,
105-
delay:1.3,
174+
delay:4,
106175
duration:0.5,
107176
})
108177

‎style.css

+125
Original file line numberDiff line numberDiff line change
@@ -862,6 +862,131 @@ html,body{
862862
min-height: 100vh;
863863
background-color: #FF4411;
864864
}
865+
866+
#loader {
867+
position: absolute;
868+
width: 100%;
869+
height: 100%;
870+
/* background: rgba(255, 255, 255, 0.9); */
871+
background-color: #FF4411;
872+
display: flex;
873+
justify-content: center;
874+
align-items: center;
875+
z-index: 1000;
876+
border-bottom-left-radius: 50px;
877+
border-bottom-right-radius: 50px;
878+
display: flex;
879+
}
880+
.loaderContent h1{
881+
color: whitesmoke;
882+
font-size: 5vw;
883+
884+
}
885+
.timer {
886+
display: flex;
887+
justify-content: center;
888+
align-items: center;
889+
gap: 5px;
890+
}
891+
892+
.timer h2 {
893+
font-size: 4vw;
894+
color: whitesmoke;
895+
}
896+
/* #loader{
897+
width: 100%;
898+
height: 100%;
899+
background-color: #FF4411;
900+
/* position: absolute; */
901+
902+
903+
/* #loader {
904+
width: 100%;
905+
height: 100vh;
906+
background: #FF4411;
907+
position: absolute;
908+
top: 0;
909+
padding: 7vw 6vw;
910+
z-index: 151;
911+
}
912+
.loaderContent{
913+
width: fit-content;
914+
margin: 0.5vw;
915+
overflow: hidden;
916+
display: flex;
917+
align-items: center;
918+
gap: 2.8vw;
919+
}
920+
.timer {
921+
display: flex;
922+
height: 100%;
923+
font-family: 'silk serif';
924+
width: 20vw;
925+
justify-content: flex-end;
926+
align-items: start;
927+
}
928+
.timer h2 {
929+
font-family: "impact";
930+
color: white;
931+
font-size: 4vw;
932+
font-weight: 400;
933+
}
934+
.loaderContent h1 {
935+
font-family: "neo";
936+
color: white;
937+
font-size: 7vw;
938+
text-transform: uppercase;
939+
font-family: "plain light";
940+
font-weight: 600;
941+
}
942+
.blink {
943+
font-size: 4vw;
944+
width: 16vw;
945+
display: flex;
946+
align-items: center;
947+
height: 14vh;
948+
}
949+
.blink h2 {
950+
font-family: "impact";
951+
font-weight: 400;
952+
opacity: 0;
953+
animation-duration: 2s;
954+
animation-iteration-count: infinite;
955+
color: whitesmoke;
956+
}
957+
@keyframes blinker {
958+
0% {
959+
opacity: 1;
960+
color: white;
961+
}
962+
40% {
963+
opacity: 0;
964+
}
965+
60% {
966+
opacity: 1;
967+
font-family: "silk serif";
968+
color: transparent;
969+
-webkit-text-stroke: 1px white;
970+
}
971+
80% {
972+
opacity: 0;
973+
}
974+
100% {
975+
opacity: 1;
976+
}
977+
}
978+
.waiting {
979+
overflow: hidden;
980+
margin-left: 30%;
981+
margin-top: 3vw;
982+
}
983+
.waiting h3 {
984+
font-family: "impact";
985+
color: whitesmoke;
986+
font-size: 1.1vw;
987+
font-weight: 100;
988+
} */
989+
865990
/* .bookmark{
866991
width: 40%;
867992
height: 100%;

0 commit comments

Comments
 (0)