Skip to content

Commit f64b9a8

Browse files
prateekKrOraonRocker2102
prateekKrOraon
and
Rocker2102
authored
[UPDATE] index.html, main.js, style.css (#5)
* Typewriter effect in home page * Removed debug.log Co-authored-by: Ankush Yadav <ankushyadav9302@gmail.com>
1 parent 4cd1a39 commit f64b9a8

3 files changed

Lines changed: 139 additions & 25 deletions

File tree

‎assets/css/style.css‎

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import url('https://fonts.googleapis.com/css?family=Raleway:200,100,400');
2+
13
@font-face {
24
font-family: "Material Icons";
35
font-style: normal;
@@ -29,13 +31,12 @@ html {
2931
}
3032

3133
body {
34+
font-family: 'Raleway', sans-serif;
3235
display: flex;
3336
min-height: 100vh;
3437
width: 100%;
3538
flex-direction: column;
36-
background-image: url(../img/bg-1.jpeg);
37-
background-attachment: fixed;
38-
/* background-image: linear-gradient(to top right, rgba(255, 0, 255, 0.2), rgba(255, 0, 0, 0.1)); */
39+
background: #333;
3940
}
4041

4142
main {
@@ -137,3 +138,47 @@ ul.collapsible .collapsible-body {
137138
vertical-align: text-bottom;
138139
border-radius: 50%;
139140
}
141+
142+
.brand-logo {
143+
font-weight: 200;
144+
}
145+
146+
.welcome-msg {
147+
font-family: 'Raleway', sans-serif;
148+
font-size: 20px;
149+
color: #ccc;
150+
}
151+
152+
.msg {
153+
display: flex;
154+
flex-direction: column;
155+
justify-content: center;
156+
height: 100%;
157+
padding: 0 3rem;
158+
}
159+
160+
.welcome {
161+
height: 100vh;
162+
margin-bottom: 2em;
163+
background: #333 url('../img/bg-1.jpeg') no-repeat center center / cover;
164+
}
165+
166+
h1, h2 {
167+
font-weight: 500;
168+
margin: 0.4rem;
169+
}
170+
171+
h1 {
172+
font-size: 3.5rem;
173+
color: #eee;
174+
}
175+
176+
h2 {
177+
font-size: 2rem;
178+
color: #ccc;
179+
}
180+
181+
/* Cursor */
182+
.txt-type > .txt {
183+
border-right: 0.1rem solid #ccc;
184+
}

‎assets/js/main.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ $(document).ready(function(){
4444

4545
fetchRepos();
4646
fetchTeam();
47+
init();
4748
});
4849

4950
function fetchRepos(force = false) {
@@ -185,3 +186,66 @@ function formatDate(data) {
185186
}
186187
return data;
187188
}
189+
190+
class TypeWriter {
191+
constructor(textElement, words, wait = 3000) {
192+
this.textElement = textElement;
193+
this.words = words;
194+
this.text = '';
195+
this.wordIndex = 0;
196+
this.wait = parseInt(wait, 10);
197+
this.isDeleting = false;
198+
this.type();
199+
}
200+
201+
// Type method
202+
type(){
203+
// current index of word
204+
const current = this.wordIndex % this.words.length;
205+
// Get full text of current word
206+
const fullText = this.words[current];
207+
208+
// Check if deleting
209+
if(this.isDeleting){
210+
// Remove char
211+
this.text = fullText.substring(0, this.text.length - 1);
212+
}else{
213+
// Add char
214+
this.text = fullText.substring(0, this.text.length + 1);
215+
}
216+
217+
// Insert text into element
218+
this.textElement.innerHTML = `<span class="txt">${this.text}</span`;
219+
220+
// Initial type Speed
221+
let typeSpeed = 250;
222+
223+
if(this.isDeleting){
224+
typeSpeed /= 2;
225+
}
226+
227+
// If word is complete
228+
if(!this.isDeleting && this.text === fullText){
229+
// Make pause at end
230+
typeSpeed = this.wait;
231+
// Set delete to true
232+
this.isDeleting = true;
233+
}else if(this.isDeleting && this.text === ''){
234+
this.isDeleting = false;
235+
//
236+
this.wordIndex++;
237+
// Pause before start typing
238+
typeSpeed = 500;
239+
}
240+
setTimeout(() => this.type(), typeSpeed);
241+
}
242+
}
243+
244+
function init(){
245+
const textElement = document.querySelector('.txt-type');
246+
const words = JSON.parse(textElement.getAttribute('data-words'));
247+
const wait = textElement.getAttribute('data-wait');
248+
// init TypeWriter
249+
250+
new TypeWriter(textElement, words, wait);
251+
}

‎index.html‎

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,30 +14,35 @@
1414
</head>
1515

1616
<body>
17-
<header>
18-
<div class="navbar-fixed">
19-
<nav class="red darken-4">
20-
<div class="nav-wrapper">
21-
<a href="#!" class="brand-logo">DevCANS</a>
22-
<a href="#" data-target="mobile-menu" class="sidenav-trigger"><i class="material-icons">menu</i></a>
23-
<ul class="right hide-on-med-and-down">
24-
<li><a href="" class="waves-effect"><i class="material-icons left">layers</i>Repositories</a></li>
25-
<li><a href="" class="waves-effect"><i class="material-icons left">groups</i>Team</a></li>
26-
</ul>
27-
</div>
28-
</nav>
29-
30-
<ul class="sidenav" id="mobile-menu">
31-
<li><a href="" class="waves-effect"><i class="material-icons left">layers</i>Repositories</a></li>
32-
<li><a href="" class="waves-effect"><i class="material-icons left">groups</i>Team</a></li>
33-
</ul>
17+
<div class="welcome">
18+
<header>
19+
<div class="navbar">
20+
<nav class="transparent">
21+
<div class="nav-wrapper">
22+
<a href="#!" class="brand-logo">DevCans</a>
23+
<a href="#" data-target="mobile-menu" class="sidenav-trigger"><i class="material-icons">menu</i></a>
24+
<ul class="right hide-on-med-and-down">
25+
<li><a href="#main" class="waves-effect"><i class="material-icons left">layers</i>Repositories</a></li>
26+
<li><a href="" class="waves-effect"><i class="material-icons left">groups</i>Team</a></li>
27+
</ul>
28+
</div>
29+
</nav>
30+
31+
<ul class="sidenav" id="mobile-menu">
32+
<li><a href="" class="waves-effect"><i class="material-icons left">layers</i>Repositories</a></li>
33+
<li><a href="" class="waves-effect"><i class="material-icons left">groups</i>Team</a></li>
34+
</ul>
35+
</div>
36+
</header>
37+
<div class="container msg">
38+
<h1>DevCans for&nbsp;<span class="txt-type" data-wait="3000" data-words='["Developers", "Coders", "Learners"]'></span>
39+
</h1>
40+
<h2>Welcome To DevCans</h2>
41+
<p class="welcome-msg">To foster coding and developement skills as well as healty competitive environment.</p>
3442
</div>
35-
</header>
43+
</div>
3644

37-
<main class="container">
38-
<div class="row center-align">
39-
<h1 class="tooltipped white-text" data-position="top" data-tooltip="Styles/Animations/Effects to be added">DevCANS</h1>
40-
</div>
45+
<main class="container" id="main">
4146
<div class="row">
4247
<div class="col s12" style="margin-bottom: 2em;">
4348
<ul class="tabs">

0 commit comments

Comments
 (0)