We Keep Coding

Scroll fix and flipcard stack

I have a flip card where i have put an iframe on the flip side and i want to prevent the front view from scrolling the iframe before resuming normal scroll process. how can I achieve this with JavaScript ?
Prevent from scrolling iframe in flip front for mobile device on touch scroll. Css solution didn't work and now I would like some JavaScript that can help me achieve this for every .flip-box-front
fieldset {
height:200px;}
.card {
position: relative;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
border:0.5px solid #72bcd4;
border-radius:12px;
padding: 2px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #fff;
color: black;
}
.flip-box-back {transform: rotateY(180deg);}
.flip-box-back iframe {
border: 0px none;
frame-border: 0px ;
margin-height: 0px;
}
.card.is-flipped {transform: rotateY(180deg);}
<fieldset>
<legend>header title </legend>
<div class="card">
<div class="flip-box-front">
<h2> title text</h2>
<p> some write up</p>
<p> some write up</p>
<p> some write up</p>
</div>
<div class="flip-box-back">
<iframe src="https://ee-3.blogspot.com">
</iframe>
</div>
</div>
</div>
</fieldset>
<br/>
<fieldset>
<legend>header title </legend>
<div class="card">
<div class="flip-box-front">
<h2> title text</h2>
<p> some write up</p>
<p> some write up</p>
<p> some write up</p>
</div>
<div class="flip-box-back">
<iframe src="https://ee-3.blogspot.com">
</iframe>
</div>
</fieldset>
var cards = document.querySelectorAll('.card');
cards.forEach(card => {
card.addEventListener('click', function() {
card.classList.toggle('is-flipped');
});
})

Adding a z-index to .flip-box-front solved this problem.
.flip-box-front {
background-color: #fff;
color: black;
z-index: 2;
}

Need help to incoprate slide-in/out effect HTML/Javascript

I am having some trouble with some java script code in adding in a slide-in/slide-out effect for a slideshow. Right now, I have the timer working to change pictures every 2 sec. I have the basics of the slide-in and out in CSS just need some help implementing the java script code such that when the picture displays, it slides in and when changing pictures, the current picture slides out. Here is a link to the code pen for my code:
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if(n > slides.length) {
slideIndex = 1
}
if(n < 1) {
slideIndex = slides.length
}
for(i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
var index = 1;
function runSlideShow()
{
index++;
if(index > 5)
index = 1
currentSlide(index);
setTimeout(runSlideShow, 2000)
}
setTimeout(runSlideShow, 2000)
* {
box-sizing: border-box
}
body {
font-family: nunito sans;
margin: 0
}
.mySlides {
display: none;
}
center > img {
vertical-align: middle;
height: 75vh;
width: auto !important;
}
.slideshow-container {
max-width: 1250px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #FFFFFF;
font-size: 22px;
position: absolute;
margin: 5px 0px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #ffffff;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Fading animation */
.slide-in {
-webkit-animation-name: slide-in-right;
-webkit-animation-duration: 1.5s;
animation-name: slide-in-right;
animation-duration: 1.5s;
}
.slide-out {
-webkit-animation-name: slide-out-left;
-webkit-animation-duration: 1.5s;
animation-name: slide-out-left;
animation-duration: 1.5s;
}
#keyframes slide-in {
100% { transform: translateX(0%); }
}
#-webkit-keyframes slide-in {
100% { -webkit-transform: translateX(0%); }
}
#keyframes slide-out {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
#-webkit-keyframes slide-out {
0% { -webkit-transform: translateX(0%); }
100% { -webkit-transform: translateX(-100%); }
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<div class="slideshow-container" width="100%">
<div class="mySlides slide-in" style="display: block;">
<center>
<div class="numbertext">1 / 6</div>
<img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1896.16.jpeg" style="width:100%">
<div class="text">HR Koopman postcard of 112th and Michigan, facing north, in 1896.</div>
</center>
</div>
<div class="mySlides slide-in" style="display: none;">
<center>
<div class="numbertext">2 / 6</div>
<img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1900.34-1.jpeg" style="width:100%">
<div class="text">HR Koopman photograph of workmen digging sewer system on 111th and Michigan in 1900.</div>
</center>
</div>
<div class="mySlides slide-in" style="display: none;">
<center>
<div class="numbertext">3 / 6</div>
<img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1903.13.jpeg" style="width:100%">
<div class="text">111th and Michigan in 1903 taken by HR Koopman.</div>
</center>
</div>
<div class="mySlides slide-in" style="display: none;">
<center>
<div class="numbertext">4 / 6</div>
<img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1904.18.jpeg" style="width:100%">
<div class="text">HR Koopman postcard showing a busy section of South Michigan Avenue on 113th street in 1904.</div>
</center>
</div>
<div class="mySlides slide-in" style="display: none;">
<center>
<div class="numbertext">5 / 6</div>
<img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1909.12.jpeg" style="width:100%">
<div class="text">Roseland celebrates its 60th anniversary with a huge parade on July 5th, 1909.</div>
</center>
</div>
<div class="mySlides fade" style="display: none;">
<center>
<div class="numbertext">6 / 6</div>
<img src="https://www.midstory.org/wp-content/uploads/2022/07/theave1910.24.jpeg" style="width:100%">
<div class="text">HR Koopman photograph of 115th and Michigan in 1910 showing horse and buggies, a streetcar, and bicycles.</div>
</center>
</div>
</div>
<br>
</div></div>
</div></div>
https://codepen.io/philm001/pen/abYqGew

You can add and remove the animations dynamically toggling classes.
When showing a new slide:
slideToShow.classList.add(“slide-in”)
slideToShow.classList.remove(“slide-out”)
slideToHide.classList.remove(“slide-in”)
slideToHide.classList.add(“slide-out”)
I wrote this answer on mobile so beware of the quotation marks I used. They are not the correct character.

Fullscreen expand transform and Set element style as a child

English is not my first language so It's hard to explain details but I'll try hard as I can. I'm really really sorry about that.
I'm making thumbnail expanding fullscreen transition.
like google photos, thumbnail should expand to fullscreen and transform animation should apply too.
My method is make a clone of clicked element, then set initial style(top and left, width and height, etc) same as original element and add class which sets position to zero, and make full expanding. width:100vw and height:100vh, top:0 left:0, position:fixed(class .fullscreen) is it.
I borrowed some idea on http://jsfiddle.net/a7nzy6w6/299/ here.
but in setting styles,
clone.style.top = rect.top;
clone.style.left = rect.left;
clone.style.height = img.offsetHeight
clone.style.width = img.offsetWidth
This approach will replace all child classes's top, left and height width. even it will ignore "fullscreen" class too.
So it won't transform or expand and remain original style. If I'm not setting styles, transform animation will not apply.
How am I apply fullscreen expand transform animation? Is there any better solution? or How am I Set element's initial style as a child style without replacing added classes in javascript?
again, I'm really sorry for my english. I tried as I can
by the way, I don't know why element.style is not working in snippet
function handler(element)
{
var type = element.getAttribute("data-type")
switch(type)
{
case "image":
transition_fullscreen(element);
break;
default:
break;
}
}
function transition_fullscreen(element)
{
var img = element.getElementsByClassName('el_view')[0];
var rect = img.getBoundingClientRect();
var clone = img.cloneNode(true);
clone.style.top = rect.top;
clone.style.left = rect.left;
clone.style.height = img.offsetHeight
clone.style.width = img.offsetWidth
clone.classList.add('fullscreen');
var ap = document.getElementById('form').appendChild(clone);
}
#form
{
width: 100%;
text-align:center;
}
#form .element
{
display:inline-block;
float:left;
width: 10%;
height: 20%;
margin: 1.9em;
cursor: default;
transition: background .1s ease-in-out;
animation:animatezoom 0.5s;
}
#form .highlight
{
padding:14px;
transition: transform .1s ease-out;
padding-top:auto;
/*border: 1px solid #ddd;
border-radius: 4px;*/
}
#form .highlight:hover { transform: translateY(-0.5rem) scale(1.0125);
box-shadow: 0 0.5em 1.9rem -1rem rgba(0,0,0,0.5); }
#form .highlight:active { transform:scale(0.8); }
#form .el_img { max-height: 124px; vertical-align: middle; }
#form .el_img img { max-width: 88px; max-height: 124px; margin-top: 5%; border-radius:5px; box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); border-radius:5px;
opacity: 1;
transition: all 3s;
}
#form .el_img .fullscreen
{
z-index:9999;
max-width:100vw;
max-height:100vh;
width:100vw;
height:100vh;
position:fixed;
top:1%;
left:1%;
transition: all 3s;
}
<div id="form">
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/oKsgcsHtHu_nIkpNd-mNCAyzUD8xo68laRPOfvFuO0hqv6nDXVNNjEMmoiv9tIDgTj8=w170">
</div>
<div id="el_name#somefile.exe" class="el_name">
somefile.exe
</div>
</div>
</div>
</div>
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/hYQO8ekNvsPWMSzMe6IZdCAT6p8qq-SlzA0jiZstV7qBcWg5kn-39qHY0ZaBPqd3usc=w170">
</div>
<div id="el_name#somefile.exe" class="el_name">
blahblah.exe
</div>
</div>
</div>
</div>
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/UMB2HRRRAAzXAEaCM9Gg-baCaDx_1RTXHscW5k2Ge3P4KP4mwTt2m6oyEHBWex3c4SxU=w300">
</div>
<div id="el_name#somefile.exe" class="el_name">
mehhhhh.cool
</div>
</div>
</div>
</div>
</div>

I founded it:
In your CSS you search for your image like:
#form .el_img .fullscreen
This searches elements in #form that are in .el_img and they have a fullsceen class.
But not an element that is in #form and has el_img and fullscreen classes at the same time.
So you need the remove the the space before .el_img from your selection so it looks like this:
#form .el_img.fullscreen {
/* Rest of your code */
And it will work.
Demo: https://www.w3schools.com/code/tryit.asp?filename=FOBUOKP41CYW

I just made it like Google photos.
By adding some HTML, CSS and JS.
This works with all of your products.
Demo:
let modal = document.getElementById('myModal'),
modalImg = document.getElementById('img01'),
captionText = document.getElementById('caption');
function handler(e) {
switch (e.getAttribute('data-type')) {
case 'image':
transition_fullscreen(e);
}
}
function transition_fullscreen(e) {
modal.style.display = 'block',
modalImg.src = e.children[0].children[0].children[0].children[0].src, captionText.innerHTML = e.children[0].children[0].children[1].innerHTML;
}
const close_btn = document.getElementsByClassName('close')[0];
close_btn.onclick = function() {
modal.style.display = 'none';
},
window.onclick = function(e) {
e.target == modal && (modal.style.display = 'none');
};
#myImg,
.close {
transition: .3s;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
#myImg {
border-radius: 5px;
cursor: pointer;
}
#myImg:hover {
opacity: .7;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #000;
background-color: rgba(0, 0, 0, .9);
}
#caption,
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
#caption,
.modal-content {
-webkit-animation-name: zoom;
-webkit-animation-duration: .6s;
animation-name: zoom;
animation-duration: .6s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0);
}
to {
-webkit-transform: scale(1);
}
}
#keyframes zoom {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: 700;
}
.close:focus,
.close:hover {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width:700px) {
.modal-content {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="form">
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/oKsgcsHtHu_nIkpNd-mNCAyzUD8xo68laRPOfvFuO0hqv6nDXVNNjEMmoiv9tIDgTj8=w170">
</div>
<div id="el_name#somefile.exe" class="el_name">
somefile.exe
</div>
</div>
</div>
</div>
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/hYQO8ekNvsPWMSzMe6IZdCAT6p8qq-SlzA0jiZstV7qBcWg5kn-39qHY0ZaBPqd3usc=w170">
</div>
<div id="el_name#somefile.exe" class="el_name">
blahblah.exe
</div>
</div>
</div>
</div>
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/UMB2HRRRAAzXAEaCM9Gg-baCaDx_1RTXHscW5k2Ge3P4KP4mwTt2m6oyEHBWex3c4SxU=w300">
</div>
<div id="el_name#somefile.exe" class="el_name">
mehhhhh.cool
</div>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</body>
</html>

The Slide Effect got some problems

When I click <div class="itemBox"> it's will be show the correspond <div class="workItem> with slide up effect.(every workItem has different id, itemBox also has different href, and it works correctly)
Every workItem has button to close itself, it look like fadeOut...but I need them close with slide down effect.
There is my code, and I need some suggestion.
HTML
<div class="itemBox">
<div class="wrap" style="background-image:url('img/01.jpg')"></div>
<div>titletitle</div>
</div>
<div class="itemBox">
<div class="wrap" style="background-image:url('img/02.jpg')"></div>
<div>titletitle</div>
</div>
<div class="itemBox">
<div class="wrap" style="background-image:url('img/01.jpg')"></div>
<div>titletitle</div>
</div>
The workItem ↓
<div class="workContent">
<div class="workItem customScroll" id="work1" style="background-color:#999999;">
<div class="wrapper" id="workBox1"></div>
</div>
<div class="workItem customScroll" id="work2" style="background-color:#333333;">
<div class="wrapper" id="workBox2"></div>
</div>
<div class="workItem customScroll" id="work3" style="background-color:#333333;">
<div class="wrapper" id="workBox3"></div>
</div>
</div>
JS
var refElement = [];
$('.workItem').each(function(index,el){
refElement[index] = $(this).attr('id');
$(".itemBox").each(function(index, el) {
$(this).on('click', 'a', function(e) {
var target = $(this).attr('href');
$('.workItem').removeClass('workOpen');
$('.workItem').removeClass('workClose');
$('.workItem').attr('style','');
if(refElement[index]=target) {
$(refElement[index]).removeClass('workClose');
$(refElement[index]).addClass('workOpen');
$('body').addClass('lockBody');
}
$('html, body').scrollTop(0);
return false;
});
});
});
function closeWork(){
$('.close').click(function(){
var workItem = $(this).parents('.workItem');
if(workItem.hasClass('workOpen')){
workItem.hide("slow",function(){
workItem.removeClass('workOpen');
workItem.addClass('workClose');
});
$('body').removeClass('lockBody');
}
});
}
CSS(SCSS)
.workItem {
display: none;
bottom:0;
&.workOpen {
display: block;
opacity: 1;
position: absolute;
color:#ffffff;
background-color: #787878;
z-index: 5;
overflow: auto;
height: calc(100% - 102px);
width: 100% !important;
left: 0;
animation-name: slide;
animation-duration: 1s;
animation-fill-mode: forwards;
-webkit-animation-name: slide;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
}
&.workClose {
bottom: 0;
opacity: 1;
height: 0;
}
img {
width: 100%;
margin-bottom: 40px;
}
}
#keyframes slide {
from {
height: 0;
}
to {
height: calc(100% - 102px);
}
}

Why is my preloader animation continuing to display on my website after the preload is finished?

Why is my preloaded animation continuing to display on my website after the preloaded animation is finished and my website launches?
I only want the preloaded animation to display for the amount of seconds specified and for it not to continue over when my website launches. Just to confirm I want to remove the preload animation from my active website after it launches. I only want the animation to be there for the specified seconds and when the site launches I don't want to see it. How can I remove this?
This is an jsfiddle example example of how it looks currently with the loading animation carrying over to my website in the JSFIDDLE, this is what I want to be removed and only have the preload animation before the website launches
I believe the issue is with my html. I have two sets of <body> tags due to the preloaded page being separate to my website. Could this be confusing the process and causing the preloading animation to carry over to my actual site when it launches?
Please Note
The splash divrepresents the webpage which displays for a few seconds at the start.
The app divrepresents my actual website.
Here is what I want removed this whole preloaded animation part with the text and black background from my website after it launches.
I want my website to look like this when it launches after the preloaded animation is finished.

This is because you have set .splash as the class of that div. And you are trying to get document.getElementById('splash'), which as the name says, gets the element by id attribute which is why it is giving you an error. Simply change the class attribute to id or just change the js to-
document.getElementsByClassName('splash')[0]
I have demonstrated that in your code using the id-
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
body{
background:#333;
background: -webkit-gradient(radial, center center, 120, center center, 900, from(#111), to(#111));
background:-moz-radial-gradient(circle, #111, #111);
}
#app {
display: none;
}
#splash{
margin:200px auto;
}
h1{
font-family: 'Actor', sans-serif;
color:#FFF;
font-size:16px;
letter-spacing:1px;
font-weight:200;
text-align:center;
}
#splash span{
width:16px;
height:16px;
border-radius:50%;
display:inline-block;
position:absolute;
left:50%;
margin-left:-10px;
-webkit-animation:3s infinite linear;
-moz-animation:3s infinite linear;
-o-animation:3s infinite linear;
}
#splash span:nth-child(2){
background:blue;
-webkit-animation:kiri 1.2s infinite linear;
-moz-animation:kiri 1.2s infinite linear;
-o-animation:kiri 1.2s infinite linear;
}
#splash span:nth-child(3){
background:red;
z-index:100;
}
#splash span:nth-child(4){
background:red;
-webkit-animation:kanan 1.2s infinite linear;
-moz-animation:kanan 1.2s infinite linear;
-o-animation:kanan 1.2s infinite linear;
}
#-webkit-keyframes kanan {
0% {-webkit-transform:translateX(20px);
}
50%{-webkit-transform:translateX(-20px);
}
100%{-webkit-transform:translateX(20px);
z-index:200;
}
}
#-moz-keyframes kanan {
0% {-moz-transform:translateX(20px);
}
50%{-moz-transform:translateX(-20px);
}
100%{-moz-transform:translateX(20px);
z-index:200;
}
}
#-o-keyframes kanan {
0% {-o-transform:translateX(20px);
}
50%{-o-transform:translateX(-20px);
}
100%{-o-transform:translateX(20px);
z-index:200;
}
}
#-webkit-keyframes kiri {
0% {-webkit-transform:translateX(-20px);
z-index:200;
}
50%{-webkit-transform:translateX(20px);
}
100%{-webkit-transform:translateX(-20px);
}
}
#-moz-keyframes kiri {
0% {-moz-transform:translateX(-20px);
z-index:200;
}
50%{-moz-transform:translateX(20px);
}
100%{-moz-transform:translateX(-20px);
}
}
#-o-keyframes kiri {
0% {-o-transform:translateX(-20px);
z-index:200;
}
50%{-o-transform:translateX(20px);
}
100%{-o-transform:translateX(-20px);
}
}
body, {
width: 100%;
height: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
padding: 10px 0;
-webkit-transition: background .1s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .1s ease-in-out,padding .5s ease-in-out;
transition: background .1 ease-in-out,padding .1s ease-in-out;
//background-color: transparent;
background-color: white;
}
.top-nav-collapse {
padding: 0;
}
}
.nav.navbar-nav li a {
color: black;
}
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 auto;
}
.intro-section {
height: 100%;
padding-top: 70px;
text-align: center;
min-height: auto;
background: #333;
}
.main1 {
color: #FFFFFF;
font-family: "Helvetica";
font-weight: bold;
font-size: 2em
}
.about-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
p {
color: white;
font-family: "Helvetica";
font-size: 1.3em;
margin: 10px auto;
white-space: nowrap;
overflow: hidden;
width: 0px
}
.main1 {
animation: type 1s 0s forwards steps(60, end);
}
.main2 {
animation: type2 1s 1s forwards steps(60, end);
}
.main3 {
animation: type3 1s 2s forwards steps(60, end);
}
span {
animation: blink 1s infinite;
}
#keyframes type{
from { width: 0; }
to { width: 430px; }
}
#keyframes type2{
from { width: 0; }
to { width: 224px; }
}
#keyframes type3{
from { width: 0; }
to { width: 364px; }
}
#keyframes blink{
to{opacity: .0;}
}
::selection{
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
setTimeout(function(){
document.getElementById('app').style['display'] = 'block';
document.getElementById('splash').style['display'] = 'none';
}, 3000);
</script>
<!--The script above in my code is placed in my code is head-->
<body>
<div id="splash">
<h1>LIAM DOCHERTY'S PORTFOLIO IS</h1>
<span></span>
<span></span>
<span></span>
<br>
<h1>LOADING</h1>
</div>
<div id="app">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" <img src="##############" alt="Personal Logo Design"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li>
<a class="page-scroll" href="#page-top">Home</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container header-container">
<div class="row">
<div class="col-lg-12 text-center">
<p class="main1">Welcome To My Digital Portfolio</p>
<p class="main2">My name is Liam Docherty</p>
<p class="main3">I'm a front end web developer from London.</p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About Section</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
</div>
</div>
</div>
</section>
</div>