Skip to content

Commit 9e06668

Browse files
AyushSojitraAyushSojitra
committed
changes
1 parent 84c4762 commit 9e06668

3 files changed

Lines changed: 196 additions & 6 deletions

File tree

‎app/Online3DViewer/website/animation.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Wrap every letter in a span
2+
var textWrapper = document.querySelector('.ml11 .letters');
3+
textWrapper.innerHTML = textWrapper.textContent.replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>");
4+
5+
anime.timeline({loop: false})
6+
.add({
7+
targets: '.ml11 .line',
8+
scaleY: [0,1],
9+
opacity: [0.5,1],
10+
easing: "easeOutExpo",
11+
duration: 700
12+
})
13+
.add({
14+
targets: '.ml11 .line',
15+
translateX: [0, document.querySelector('.ml11 .letters').getBoundingClientRect().width + 10],
16+
easing: "easeOutExpo",
17+
duration: 700,
18+
delay: 100
19+
}).add({
20+
targets: '.ml11 .letter',
21+
opacity: [0,1],
22+
easing: "easeOutExpo",
23+
duration: 600,
24+
offset: '-=775',
25+
delay: (el, i) => 34 * (i+1)
26+
}).add({
27+
targets: '.ml11',
28+
opacity: 100,
29+
duration: 1000,
30+
easing: "easeOutExpo",
31+
delay: 1000
32+
});

‎app/Online3DViewer/website/style.css‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
*{
2+
background-color: #FDFEFE;
3+
}
4+
5+
.animated {
6+
font-weight: 800;
7+
font-size: 2.8em;
8+
text-transform: none;
9+
letter-spacing: 0em;
10+
color: #70D2DB;
11+
text-align: left;
12+
padding-bottom: 10px;
13+
-webkit-animation-duration: 2s;
14+
animation-duration: 2s;
15+
-webkit-animation-fill-mode: both;
16+
animation-fill-mode: both;
17+
}
18+
19+
@-webkit-keyframes fadeIn {
20+
0% {
21+
opacity: 0;
22+
}
23+
24+
100% {
25+
opacity: 1;
26+
}
27+
}
28+
29+
@keyframes fadeIn {
30+
0% {
31+
opacity: 0;
32+
}
33+
34+
100% {
35+
opacity: 1;
36+
}
37+
}
38+
39+
.fadeIn {
40+
-webkit-animation-name: fadeIn;
41+
animation-name: fadeIn;
42+
}
43+
44+
.main-wrapper{
45+
border: 2px dashed black;
46+
height: 87vh;
47+
display: flex;
48+
flex-direction: column;
49+
justify-content: center;
50+
align-items: center;
51+
overflow: hidden;
52+
}
53+
54+
input{
55+
font-family: cursive;
56+
font-size: medium;
57+
color: tomato;
58+
}
59+
60+
.buttons{
61+
z-index: 3;
62+
z-index: 3;
63+
font-size: 3rem;
64+
text-align: center;
65+
font-weight: 600;
66+
margin: 0px;
67+
}
68+
69+
button{
70+
padding: .9rem 1.5rem;
71+
border: none;
72+
border-radius: 6px;
73+
cursor: pointer;
74+
font-family: cursive;
75+
}
76+
77+
.button1{
78+
background-color: #85C1E9 ;
79+
color: #fff;
80+
transition: all 0.3s ease-in-out;
81+
}
82+
83+
.button2{
84+
background-color: #fff;
85+
color: #0c8775;
86+
transition: all 0.3s ease-in-out;
87+
}
88+
89+
.button1:hover {
90+
background-color: #fff;
91+
color: #0c8775;
92+
}
93+
.button2:hover {
94+
background-color: #85C1E9;
95+
color: #fff;
96+
}
97+
98+
.box{
99+
margin-top: 24px;
100+
}
101+
102+
.ml11 {
103+
font-weight: 700;
104+
font-size: 2.5em;
105+
color: #333;
106+
}
107+
108+
.ml11 .text-wrapper {
109+
position: relative;
110+
display: inline-block;
111+
padding-top: 0;
112+
padding-right: 0;
113+
padding-bottom: 0;
114+
}
115+
116+
.ml11 .line {
117+
opacity: 0;
118+
position: absolute;
119+
left: 0;
120+
height: 100%;
121+
width: 3px;
122+
background-color: #333;
123+
transform-origin: 0 50%;
124+
}
125+
126+
.ml11 .line1 {
127+
top: 0;
128+
left: 0;
129+
}
130+
131+
.ml11 .letter {
132+
display: inline-block;
133+
line-height: 1em;
134+
}
135+
136+

‎app/Online3DViewer/website/upload.html‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -125,19 +125,41 @@
125125
OV.Init3DViewerElements ();
126126
</script>
127127

128+
<link rel="stylesheet" href="style.css">
128129

129130

130131

131132
</head>
132133
<body>
133-
<input type="file" id="photo" />
134-
<button onclick="uploadImage()">Upload Image</button>
134+
<div id="animated-example" class="animated fadeIn">Quick3D</div>
135135

136-
<div class="box">
137-
<img id="image" src="">
136+
<script>
137+
function myFunction() {
138+
location.reload();
139+
}
140+
</script>
141+
<div class="main-wrapper">
142+
<div>
143+
<h1 class="ml11">
144+
<span class="text-wrapper">
145+
<span class="line line1"></span>
146+
<span class="letters">Convert your 2D images to 3D model</span>
147+
</span>
148+
</h1>
149+
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
150+
<script src="animation.js"></script>
151+
</div>
152+
<div class="buttons">
153+
<input type="file" id="photo" />
154+
<button onclick="uploadImage()" class="button2">Upload Image</button>
155+
<button onclick="Show3DModel()" class="button1">Show 3D Model</button>
156+
<div class="box">
157+
<img id="image" src="">
158+
</div>
159+
160+
161+
</div>
138162
</div>
139163

140-
<button onclick="Show3DModel()">Show 3D Model</button>
141-
142164
</body>
143165
</html>

0 commit comments

Comments
 (0)