Skip to content

Instantly share code, notes, and snippets.

@TrueSlu

TrueSlu/index.html

Created September 4, 2018 18:10
Show Gist options
  • Save TrueSlu/800cfb53bf86fc623d2fef4faf6ed76d to your computer and use it in GitHub Desktop.
Save TrueSlu/800cfb53bf86fc623d2fef4faf6ed76d to your computer and use it in GitHub Desktop.
Download ZIP
Landing Page With Typer
Raw
index.html
<header id="header">
<div class="vert-text">
<div class="p-img">
<img src="https://res.cloudinary.com/pashagord/image/upload/v1468545314/Portfolio/logos/codepen_logo.png"/>
</div>
<h1 id="typer-size">
<!-- TEXTS -->
<span id="typed"></span>
<div id="typed-strings">
<p>Codepen</span> </p>
<p>I'm Zayn</p>
<p><span class="#">Let's Code</span></p>
<p>I like web development</p>
<p>I love coding</p>
<p>PHP</p>
<p>PYTHON</p>
<p>JAVASCRIPT</p>
<p>CSS</p>
<p>Simple Landing Page</p>
<p>Ruby</p>
<p>Most Powerful Typer</p>
<p>Codepen</p>
<p>Apple</p>
<p>Facebook</p>
<p>You can still add more</p>
</div>
<!-- TEXTS ENDS -->
</h1>
<!-- TITLE -->
<h3>CODEPEN | ZAYN AUDI</h3>
Raw
landing-page-with-typer.markdown
Raw
script.js
var scrollToElement = function(el, ms){
var speed = (ms) ? ms : 600;
$('html,body').animate({
scrollTop: $(el).offset().top
}, speed);
}
$(document).ready(function() {
$('.nav-link').on('click', function(e) {
e.preventDefault();
var el = $(this).attr('href');
scrollToElement(el);
});
$(window).scroll(function() {
var x = $(window).scrollTop();
if (x >= 42) {
$("#navbar").fadeIn(300);
} else {
$("#navbar").fadeOut(300);
}
});
});
(function () {
'use strict';
// WAIT FOR ALL TO BE LOADED
window.onload = function() {
// add loaded class to html
var root = document.documentElement;
root.className += ' loaded';
// TYPING EFFECT
Typed.new('#typed', {
stringsElement: document.getElementById('typed-strings'),
loop: true,
typeSpeed: 7,
backSpeed: 2,
startDelay: 1000,
backDelay: 1200
});
}; // all loaded
}());
/*
PLUGINS
*/
! function(t, s, e) {
"use strict";
var i = function(t, s) {
var i = this;
this.el = t, this.options = {}, Object.keys(r).forEach(function(t) {
i.options[t] = r[t]
}), Object.keys(s).forEach(function(t) {
i.options[t] = s[t]
}), this.isInput = "input" === this.el.tagName.toLowerCase(), this.attr = this.options.attr, this.showCursor = !this.isInput && this.options.showCursor, this.elContent = this.attr ? this.el.getAttribute(this.attr) : this.el.textContent, this.contentType = this.options.contentType, this.typeSpeed = this.options.typeSpeed, this.startDelay = this.options.startDelay, this.backSpeed = this.options.backSpeed, this.backDelay = this.options.backDelay, e && this.options.stringsElement instanceof e ? this.stringsElement = this.options.stringsElement[0] : this.stringsElement = this.options.stringsElement, this.strings = this.options.strings, this.strPos = 0, this.arrayPos = 0, this.stopNum = 0, this.loop = this.options.loop, this.loopCount = this.options.loopCount, this.curLoop = 0, this.stop = !1, this.cursorChar = this.options.cursorChar, this.shuffle = this.options.shuffle, this.sequence = [], this.build()
};
i.prototype = {
constructor: i,
init: function() {
var t = this;
t.timeout = setTimeout(function() {
for (var s = 0; s < t.strings.length; ++s) t.sequence[s] = s;
t.shuffle && (t.sequence = t.shuffleArray(t.sequence)), t.typewrite(t.strings[t.sequence[t.arrayPos]], t.strPos)
}, t.startDelay)
},
build: function() {
var t = this;
if (this.showCursor === !0 && (this.cursor = s.createElement("span"), this.cursor.className = "typed-cursor", this.cursor.innerHTML = this.cursorChar, this.el.parentNode && this.el.parentNode.insertBefore(this.cursor, this.el.nextSibling)), this.stringsElement) {
this.strings = [], this.stringsElement.style.display = "none";
var e = Array.prototype.slice.apply(this.stringsElement.children);
e.forEach(function(s) {
t.strings.push(s.innerHTML)
})
}
this.init()
},
typewrite: function(t, s) {
if (this.stop !== !0) {
var e = Math.round(70 * Math.random()) + this.typeSpeed,
i = this;
i.timeout = setTimeout(function() {
var e = 0,
r = t.substr(s);
if ("^" === r.charAt(0)) {
var o = 1;
/^\^\d+/.test(r) && (r = /\d+/.exec(r)[0], o += r.length, e = parseInt(r)), t = t.substring(0, s) + t.substring(s + o)
}
if ("html" === i.contentType) {
var n = t.substr(s).charAt(0);
if ("<" === n || "&" === n) {
var a = "",
h = "";
for (h = "<" === n ? ">" : ";"; t.substr(s + 1).charAt(0) !== h && (a += t.substr(s).charAt(0), s++, !(s + 1 > t.length)););
s++, a += h
}
}
i.timeout = setTimeout(function() {
if (s === t.length) {
if (i.options.onStringTyped(i.arrayPos), i.arrayPos === i.strings.length - 1 && (i.options.callback(), i.curLoop++, i.loop === !1 || i.curLoop === i.loopCount)) return;
i.timeout = setTimeout(function() {
i.backspace(t, s)
}, i.backDelay)
} else {
0 === s && i.options.preStringTyped(i.arrayPos);
var e = t.substr(0, s + 1);
i.attr ? i.el.setAttribute(i.attr, e) : i.isInput ? i.el.value = e : "html" === i.contentType ? i.el.innerHTML = e : i.el.textContent = e, s++, i.typewrite(t, s)
}
}, e)
}, e)
}
},
backspace: function(t, s) {
if (this.stop !== !0) {
var e = Math.round(70 * Math.random()) + this.backSpeed,
i = this;
i.timeout = setTimeout(function() {
if ("html" === i.contentType && ">" === t.substr(s).charAt(0)) {
for (var e = "";
"<" !== t.substr(s - 1).charAt(0) && (e -= t.substr(s).charAt(0), s--, !(s < 0)););
s--, e += "<"
}
var r = t.substr(0, s);
i.attr ? i.el.setAttribute(i.attr, r) : i.isInput ? i.el.value = r : "html" === i.contentType ? i.el.innerHTML = r : i.el.textContent = r, s > i.stopNum ? (s--, i.backspace(t, s)) : s <= i.stopNum && (i.arrayPos++, i.arrayPos === i.strings.length ? (i.arrayPos = 0, i.shuffle && (i.sequence = i.shuffleArray(i.sequence)), i.init()) : i.typewrite(i.strings[i.sequence[i.arrayPos]], s))
}, e)
}
},
shuffleArray: function(t) {
var s, e, i = t.length;
if (i)
for (; --i;) e = Math.floor(Math.random() * (i + 1)), s = t[e], t[e] = t[i], t[i] = s;
return t
},
reset: function() {
var t = this;
clearInterval(t.timeout);
this.el.getAttribute("id");
this.el.textContent = "", "undefined" != typeof this.cursor && "undefined" != typeof this.cursor.parentNode && this.cursor.parentNode.removeChild(this.cursor), this.strPos = 0, this.arrayPos = 0, this.curLoop = 0, this.options.resetCallback()
}
}, i["new"] = function(t, e) {
var r = Array.prototype.slice.apply(s.querySelectorAll(t));
r.forEach(function(t) {
var s = t._typed,
r = "object" == typeof e && e;
s && s.reset(), t._typed = s = new i(t, r), "string" == typeof e && s[e]()
})
}, e && (e.fn.typed = function(t) {
return this.each(function() {
var s = e(this),
r = s.data("typed"),
o = "object" == typeof t && t;
r && r.reset(), s.data("typed", r = new i(this, o)), "string" == typeof t && r[t]()
})
}), t.Typed = i;
var r = {
strings: ["These are the default values", "Try them", "Use your own!", ".."],
stringsElement: null,
typeSpeed: 0,
startDelay: 0,
backSpeed: 0,
shuffle: !1,
backDelay: 500,
loop: !1,
loopCount: !1,
showCursor: !0,
cursorChar: "|",
attr: null,
contentType: "html",
callback: function() {},
preStringTyped: function() {},
onStringTyped: function() {},
resetCallback: function() {}
}
}(window, document, window.jQuery);
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Raw
style.css
body {
font-family: 'Comfortaa', cursive;
background: #B24592; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F15F79, #B24592); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #F15F79, #B24592); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
h1.major,
h2.major,
h3.major,
h4.major,
h5.major,
h6.major {
padding-bottom: 1em;
border-bottom: solid 2px rgba(255, 255, 255, 0.125);
margin-bottom: 20px;
}
a {
color: #33A9B7;
}
#typer-size{
font-size: 40px;
}
a:hover,
a:focus {
color: #00E4FF;
text-decoration: none;
}
header {
display: table;
position: relative;
width: 100%;
height: 100vh;
color: white;
}
header #particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
header .vert-text {
display: table-cell;
position: relative;
vertical-align: middle;
text-align: center;
}
header .vert-text h1 {
padding: 0;
margin: 0;
font-size: 4.5em;
font-weight: 700;
}
header .vert-text .scroll-down {
display: block;
position: absolute;
bottom: 12%;
left: 50%;
color: #fff;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
header .vert-text .scroll-down:hover {
opacity: 0.5;
}
header .vert-text .scroll-down::after {
position: absolute;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
header .vert-text .scroll-down::before {
position: absolute;
top: -22px;
left: -22px;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1);
border-radius: 100%;
opacity: 0;
-webkit-animation: sdb 3s infinite;
animation: sdb 3s infinite;
box-sizing: border-box;
}
#contacts {
margin: 0 auto;
padding: 100px 0;
background: #224;
width: 100%;
color: #fff;
transition: all 1.7s ease;
}
#contacts:hover{
background: #fa3380;
color: #fff;
}
#contacts .social {
padding-bottom: 20px;
border-bottom: solid 2px rgba(255, 255, 255, 0.125);
}
form{
margin-top: 70px;
width: 100%;
}
input[type=text]{
margin-top: 20px;
width: 390px;
height: 55px;
border-radius: 100px;
padding: 10px;
outline: none;
background: rgba(0,0,0,0.2);
border: 1px solid #fff;
transition: all 0.3s ease;
}
input[type=text]:focus{
background: rgba(102,51,153, 0.3);
color: #fff;
border: 1px solid violet;
}
::placeholder{
color: #fff;
}
.zayn{
margin-top: -70px;
}
hr.style17 {
border-top: 1px solid pink;
text-align: center;
width: 250px;
margin-top: 10px;
}
hr.style17:after{
border-top: 1px solid pink;
border-right: 1px solid pink;
border-bottom: 1px solid pink;
border-left: 1px solid pink;
}
hr.style17:after {
content: '§';
display: inline-block;
position: relative;
top: -10px;
padding: 0 10px;
background: #fa3380;
color: #fff;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
button{
border-radius: 100px;
color: #fff;
margin-top: 20px;
margin-bottom: 10px;
padding: 10px;
height: 45px;
width: 200px;
text-align: center;
outline: none;
background: #fa3380;
border: 1px solid #eee;
box-shadow: 8px 10px 20px 0px rgba(46,61,73,0.15);
transition: all 0.3s ease;
}
button:hover{
background: purple;
}
.p-img{
text-align: center;
position: relative;
top: -70px;
}
img{
z-index: 100;
border-radius: 50%;
width: 170px;
height:170px;
}
@-webkit-keyframes sdb {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes sdb {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
/* FOLLOW*/
.Follow { background:url("https://pbs.twimg.com/profile_images/959092900708544512/v4Db9QRv_bigger.jpg")no-repeat center / contain;
width: 50px;
height: 50px;
bottom: 9px;
right: 20px;
display:block;
position:fixed;
border-radius:50%;
z-index:999;
animation: rotation 10s infinite linear;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
Raw
styles
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment