Skip to content

Making the page a little interactive #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Making the page a little interactive #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7c5906b
Update index.html
reihan97 Jun 29, 2020
0a1faef
Making it more interactive
reihan97 Jun 29, 2020
cde2e67
Moving the charaters of h1
reihan97 Jun 29, 2020
da6c0bc
Update index.html
reihan97 Jun 29, 2020
5388ed1
Update yellow-black.css
reihan97 Jun 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion css/themes/yellow-black.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,9 @@ main {

.icons-social a svg path{
fill: #1E1E1E;
}
}

i:hover{
color:#691818;;
}

10 changes: 7 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,21 @@
<link href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/themes/indigo-white.css">
<!-- <link rel="stylesheet" href="css/themes/indigo-white.css"> -->
<!-- <link rel="stylesheet" href="css/themes/green-white.css"> -->
<!-- <link rel="stylesheet" href="css/themes/red-white.css"> -->
<!-- <link rel="stylesheet" href="css/themes/grey-white.css"> -->
<!-- <link rel="stylesheet" href="css/themes/white-indigo.css"> -->
<!-- <link rel="stylesheet" href="css/themes/white-blue.css"> -->
<!-- <link rel="stylesheet" href="css/themes/white-grey.css"> -->
<!-- <link rel="stylesheet" href="css/themes/white-red.css"> -->
<!-- <link rel="stylesheet" href="css/themes/yellow-black.css"> -->
<link rel="stylesheet" href="css/themes/yellow-black.css">
</head>
<body>
<main>
<div class="intro">Hello, I'm Dinesh!</div>
<div class="intro">Hello, I'm <span class="txt-rotate" data-period="2000"
data-rotate='[ "Dinesh!", "Code Fanatic!" ]'></span>
</div>
<div class="tagline">All-Star Dev | Code Fanatic | Linux Hacker | Bleh</div>
<!-- Find your icons from here - https://fontawesome.com/icons?d=gallery&s=brands -->
<div class="icons-social">
Expand All @@ -40,5 +42,7 @@
<a target="_blank" href="https://codepen.io"><i class="fab fa-codepen"></i></a>
</div>
</main>

<script src="index.js"></script>
</body>
</html>
60 changes: 60 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
var TxtRotate = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};

TxtRotate.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];

if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}

this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

var that = this;
var delta = 300 - Math.random() * 100;

if (this.isDeleting) { delta /= 2; }

if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}

setTimeout(function() {
that.tick();
}, delta);
};

window.onload = function() {
var elements = document.getElementsByClassName('txt-rotate');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-rotate');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtRotate(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
document.body.appendChild(css);
};

/* Thanks to
https://codepen.io/gschier/pen/jkivt?editors=1010
*/