Develop Reference

How can I create scroll effect like Waven Website?

I want to create a scroll effect like Waven Website, using vanilla html, css and javascript, that when you scroll, the whole page goes down, but i don't want to use just CSS like:
section{
scroll-snap-align: start;
}
.container{
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
Because when I use this method, the page scroll a little and after a second scroll the whole section, I want some method when you scroll, the page goes instantly down.
Thank you :)

I think this is what you are looking for, please see snippet below or working codepen .
// original example (without scroll with mouse) :
// https://codepen.io/VeronQ/pen/MVzNOg
function scroll(event) {
event.preventDefault();
// iterate through all inputs
const inputs = document.querySelectorAll('input[name="item"]')
for(var i = 0;i < inputs.length;i++){
if(inputs[i].checked){
//check which input is checked and check next one or previous one according to the event.deltaY (scroll up or down)
if(event.deltaY>0 && i!=inputs.length-1)
inputs[i+1].checked = true
else if(event.deltaY<0 && i!=0)
inputs[i-1].checked = true
break;
}
}
}
// attach scroll function to onwheel event
document.onwheel = scroll;
#import url(https://fonts.googleapis.com/css?family=Carter+One);
input[type=radio] {
display: none;
}
input[type=radio]#section1:checked ~ nav label[for=section1] {
background-color: white;
}
input[type=radio]#section1:checked ~ section:nth-of-type(1) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type=radio]#section1:checked ~ .cover {
background-color: #f8b195;
}
input[type=radio]#section2:checked ~ nav label[for=section2] {
background-color: white;
}
input[type=radio]#section2:checked ~ section:nth-of-type(2) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type=radio]#section2:checked ~ .cover {
background-color: #c06c85;
}
input[type=radio]#section3:checked ~ nav label[for=section3] {
background-color: white;
}
input[type=radio]#section3:checked ~ section:nth-of-type(3) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type=radio]#section3:checked ~ .cover {
background-color: #6c5c7c;
}
input[type=radio]#section4:checked ~ nav label[for=section4] {
background-color: white;
}
input[type=radio]#section4:checked ~ section:nth-of-type(4) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type=radio]#section4:checked ~ .cover {
background-color: #345d7e;
}
.nav {
position: fixed;
z-index: 2;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.nav__item {
width: 12px;
height: 12px;
display: block;
margin: 12px auto;
border: solid 2px white;
border-radius: 50%;
cursor: pointer;
}
.nav__item:hover {
background-color: white;
}
section {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 100%;
right: 0;
left: 0;
transition-delay: 0.5s;
}
section:nth-of-type(1) {
background: #f8b195;
}
section:nth-of-type(2) {
background: #c06c85;
}
section:nth-of-type(3) {
background: #6c5c7c;
}
section:nth-of-type(4) {
background: #345d7e;
}
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
html,
body {
height: 100%;
}
body {
overflow: hidden;
color: white;
font: 100% "Carter One", cursive;
}
h1 {
font-size: 6em;
text-align: center;
}
<!-- Inputs-->
<input type="radio" name="item" checked="checked" id="section1"/>
<input type="radio" name="item" id="section2"/>
<input type="radio" name="item" id="section3"/>
<input type="radio" name="item" id="section4"/>
<!-- Navigation-->
<nav class="nav">
<label class="nav__item" for="section1"></label>
<label class="nav__item" for="section2"></label>
<label class="nav__item" for="section3"></label>
<label class="nav__item" for="section4"></label>
</nav>
<!-- Sections-->
<section>
<h1>One Page</h1>
</section>
<section>
<h1>Pure CSS</h1>
</section>
<section>
<h1>Full Screen</h1>
</section>
<section>
<h1>#Ver_Qn</h1>
</section>
<!-- Fix the white space when scrolling two sections at the time-->
<div class="cover"></div>

How to close navigation bar when I click on other contents in the webpage

I created a navigation bar it works fine.
It consists of several tabs such as Home, about, services, contact.
But I want to close it when I click on the contents of the web page.
Code:
(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 1200px;
background-color: lightgrey;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
How can I close my navigation bar, when I click on the other contents in the web page.
Any help will be appreciated.
Thank you in advance.

The simplest way is to set a "click" event on the "content" area so that whenever anything within it is clicked on, it causes the menu to be hidden again:
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
Demo:
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
P.S. I rearranged the rest of your JavaScript slightly to all be within a "ready" block, I wasn't sure what the logic of it was previously.
P.P.S. Your demo contained jQuery twice. This is both unnecessary and can also lead to unpredictable issues. I've removed the older version in my demo above.

SERBIAN: Jednostavno samo dodaj ovo na kraju svoje skripte:
ENG: Just add this at the end of your script:
$('div').click(function(){
$('nav').removeClass("active-nav");
});

You only have to attach an onclick event handler to document.
var height = $(window).height();
var width = $(window).width();
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(document).on('click', function(e) {
if(!$(e.target).closest(bodyEl).length && bodyEl.hasClass('active-nav')) {
bodyEl.removeClass('active-nav');
}
});
});
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width:50px;
line-height: 40px;
text-align:center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars{
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
</script>
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>

image lightslider has 0px height until window resize

I am using this image slider :https://github.com/sachinchoolur/lightslider
I have the slider in a hidden div, when the div is opened the ul in slider containing images has a height of 0px, until the window is resized. This is inline css seen when you inspect element.
Before resize:
<ul id="content-slider" class="content-slider" style="width: 40px; transform: translate3d(-40px, 0px, 0px); height: 165px; padding-bottom: 0%;"
After resize:
<ul id="content-slider" class="content-slider" style="width: 3112px; transform: translate3d(-778px, 0px, 0px); height: 165px; padding-bottom: 0%;">
It seems to be a common issue and there are solutions such as turning autoWidth to false, but it's already false. Also a suggestion to add this but I'm not sure where:
$.each($(".light-slider"), function(i, instance){
$(instance).imagesLoaded(function(){
$(instance).lightSlider();
});
});
This is the js file used with the below code https://github.com/sachinchoolur/lightslider/blob/master/src/js/lightslider.js
Functions:
<script type="text/javascript" src="js/libs/jquery.min.js"></script>
<script src="js/lightslider.js"></script>
/* show and hide content */
$('document').ready(function() {
$('#show5').click( function() {
var $div = $('#' + $(this).data('href'));
$('#project-one').not($div).hide();
$div.slideToggle();
});
$('#show6').click( function() {
var $div = $('#' + $(this).data('href'));
$('#project-one').not($div).hide();
$div.slideToggle();
});
});
/* image slider */
$(document).ready(function() {
$("#content-slider").lightSlider({
loop:true,
keyPress:true
});
$('#image-gallery').lightSlider({
gallery:true,
item:1,
thumbItem:9,
slideMargin: 0,
speed:500,
auto:true,
loop:true,
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
});
});
HTML:
<div id="projects-container" class="row">
<div class="w-33 ml-100 mp-100 project" id="first-project">
<img class="project-image" src="img/proj-temp.jpg" alt="" title="" id="show5" data-href="project-one" >
<h4>Title</h4>
<a class="learn-more" id="show6" data-href="project-one">Explore <span>This Project</span></a>
<div class="panel" id="project-one">
<div class="project-gallery-container w-100">
<div class="item">
<ul id="content-slider" class="content-slider">
<li>
<h3>1</h3>
</li>
<li>
<h3>2</h3>
</li>
<li>
<h3>3</h3>
</li>
<li>
<h3>4</h3>
</li>
<li>
<h3>5</h3>
</li>
<li>
<h3>6</h3>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS:
#projects-container .panel {
display:none;
}
.project {
margin-left: 2%!important;
transition: .5s;
}
.panel .w-100 {
padding:0!important;
}
.project-gallery-container ul {
list-style: none outside none;
padding-left: 0;
margin: 0;
}
.content-slider li{
background-color: #333;
text-align: center;
color: #FFF;
}
.content-slider h3 {
margin: 0;
padding: 70px 0;
}
.lSSlideOuter {
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.lightSlider:before, .lightSlider:after {
content: " ";
display: table;
}
.lightSlider {
overflow: hidden;
margin: 0;
}
.lSSlideWrapper {
max-width: 100%;
overflow: hidden;
position: relative;
}
.lSSlideWrapper > .lightSlider:after {
clear: both;
}
.lSSlideWrapper .lSSlide {
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition: all 1s;
-webkit-transition-property: -webkit-transform,height;
-moz-transition-property: -moz-transform,height;
transition-property: transform,height;
-webkit-transition-duration: inherit !important;
transition-duration: inherit !important;
-webkit-transition-timing-function: inherit !important;
transition-timing-function: inherit !important;
}
.lSSlideOuter .lSPager.lSpg {
margin: 10px 0 0;
padding: 0;
text-align: center;
}
.lSSlideOuter .lSPager.lSpg > li {
cursor: pointer;
display: inline-block;
padding: 0 5px;
}
.lSSlideOuter .lSPager.lSpg > li a {
background-color: #222222;
border-radius: 30px;
display: inline-block;
height: 8px;
overflow: hidden;
text-indent: -999em;
width: 8px;
position: relative;
z-index: 99;
-webkit-transition: all 0.5s linear 0s;
transition: all 0.5s linear 0s;
}
.lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a {
background-color: #428bca;
}
.lSSlideOuter .media {
opacity: 0.8;
}
.lSSlideOuter .media.active {
opacity: 1;
}
.lSAction > a {
width: 32px;
display: block;
top: 50%;
height: 32px;
background-image: url('../img/controls.png');
cursor: pointer;
position: absolute;
z-index: 99;
margin-top: -16px;
opacity: 0.5;
-webkit-transition: opacity 0.35s linear 0s;
transition: opacity 0.35s linear 0s;
}
.lSAction > a:hover {
opacity: 1;
}
.lSAction > .lSPrev {
background-position: 0 0;
left: 10px;
}
.lSAction > .lSNext {
background-position: -32px 0;
right: 10px;
}
.lSSlideOuter.lSrtl {
direction: rtl;
}
.lSSlideOuter .lightSlider, .lSSlideOuter .lSPager {
padding-left: 0;
list-style: none outside none;
}
.lSSlideOuter .lightSlider > *, .lSSlideOuter .lSGallery li {
float: left;
}
.lightSlider.lsGrabbing > * {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: -o-grabbing;
cursor: -ms-grabbing;
cursor: grabbing;
}
When I take the slider outside the hidden div it works without needing to resize.

I just had the exact same issue... Thanks to your post, I figured out that resizing the window did make the gallery appear! As such, I triggered a resize event manually:
var triggerResize = function(){
window.dispatchEvent(new Event('resize'));
}

Change Background on ID load

I want to know how can I change my background on Id load. Right now the background is set to a colour for the preloader. I have figured out how I can hide the loader on body load but someone help me on how to change my background to a picture. Also eve when the loader is present the elements of the body popup so any solution to hide that? The background link is in the background 1 id.
https://www.w3schools.com/code/tryit.asp?filename=FEMJ1DP31QMZ
function hidespinner() {
document.getElementById('spinner').style.display = 'none';
document.getElementById('heading').style.display = 'none';
document.getElementById('background1').style.display.backgroundImage = 'url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg)';
}
html {
background-color: #ace5f4;
background-size: cover;
}
#spinner {
height: 50px;
width: 50px;
left: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
}
#spinner .inner {
height: 50px;
width: 50px;
position: absolute;
border: 5px solid transparent;
opacity: 0.7;
border-radius: 100%;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#spinner .inner:nth-child(1) {
border-top-color: white;
border-bottom-color: white;
animation-duration: 2s;
}
#spinner .inner:nth-child(2) {
border-left-color: #3bb3ee;
border-right-color: #3bb3ee;
animation-duration: 3s;
}
#spinner .inner:nth-child(3) {
border-top-color: #34abdb;
border-bottom-color: #34abdb;
animation-duration: 4s;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
#heading {
color: white;
font-family: Helvetica;
text-align: center;
font-size: 72px;
}
#background1 {
background: url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg) no-repeat center fixed;
background-size: cover;
}
<link rel="shortcut icon" type="image/png" href="https://image.flaticon.com/icons/png/128/222/222506.png">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Fonts Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<body onload="hidespinner()">
<h1 id="heading"><i class="fa fa-plane"></i> v<strong>Crew</strong></h1>
<div id="spinner">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
Hello Is the spinner on?
</body>
Please see that even the current code is copyrighted. I would also like to add this loader which I made to the page so can anyone suggest something on how to add it or add it to the webpage and give me the code.
https://www.w3schools.com/code/tryit.asp?filename=FEAZZM840UQS
function hideloader() {
document.getElementById("loading").style.display = "none";
}
#import url('https://fonts.googleapis.com/css?family=Spirax');
#import url('https://fonts.googleapis.com/css?family=Indie+Flower|Spirax');
body {
background-color: #58e8f8;
}
.silly {
color: white;
text-align: center;
font-family: "Indie Flower"
}
.spinner {
width: 80px;
height: 80px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: white;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -2.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes sk-bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
#keyframes sk-bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
<title>Page Title</title>
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/88CE1C4C-84C0-9E49-A763-9D3DCEC43907/main.js" charset="UTF-8"></script>
<body onload="hideloader">
<h1 class="silly"> vCrew </h1>
<div id="loading" class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</body>
Would this work w3schools.com/code/tryit.asp?filename=FEMJIZCDHJBW ?

You can try adding a loading div on top of your content and hide/show the loading sequence until your data is present.
onReady(function() {
toggleClass(document.getElementById('page'), 'hidden');
toggleClass(document.getElementById('loading'), 'hidden');
});
function onReady(callback) {
var intervalID = window.setInterval(function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}, 1000);
}
// http://youmightnotneedjquery.com/
function toggleClass(el, className) {
if (el.classList) el.classList.toggle(className);
else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
}
body {
background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x;
font-family: "Brush Script MT", cursive;
}
h1 {
font-size: 2em;
margin-bottom: 0.2em;
padding-bottom: 0;
}
p {
font-size: 1.5em;
margin-top: 0;
padding-top: 0;
}
#loading {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.9);
background-image: url("http://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
.hidden {
display: none !important;
}
<script src="https://rawgit.com/bgrins/loremjs/master/lorem.js"></script>
<div id="page" class="hidden">
<h1>The standard Lorem Ipsum passage</h1>
<div class="content" data-lorem="7s"></div>
</div>
<div id="loading"></div>

Hiding a text when a sections width is set to 0

so I've had a bit of a problem with trying to make a section's width to 0 and have everything inside the object do the same thing. Essentially hide the section and everything inside it. Thing is, the section will change to a width of 0px but the text inside still displays and also sort of pushes off to the side. Is there any way that I can use either css or javascript to hide the text and bring it back when the sections width changes back over?
Code pasted into jsfiddle:
http://jsfiddle.net/t6ck9ajb/
$(document).ready(function(){
$("#about").click(function(){
if ($("#about-me").css("width") <= "0vw") {
$("#introduction").animate({width:"0vw"}, 500);
/*$("#intro").css("display","none");
$("#port").css("display","none");
$("#about").css("display","none"); */
}
else {
$("#introduction").animate({width:"0vw"});
}
});
});
This is what I have to attempt at hiding the text, but this didn't really hide it.

Here is a different approach:
$(function(){
$('#about').on('click', homeAboutToggle);
$('#home').on('click', homeAboutToggle);
});
function homeAboutToggle(){
$('#introduction').toggleClass('active');
$('#about-me').toggleClass('active');
}
* {
margin: 0px 0px;
padding: 0px 0px;
font-family: "Open Sans";
}
#container{
width: 100vw;
height: 100vh;
overflow:hidden;
position:relative;
}
.full-page {
width: 100vw;
height: 100vh;
background-color: #5085aa;
position: absolute;
float: left;
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
}
.full-page.right{
transform: translateX(100vw);
-webkit-transform: translateX(100vw);
}
.full-page.left{
transform: translateX(-100vw);
-webkit-transform: translateX(-100vw);
}
.full-page.active{
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
transform: translateX(0);
-webkit-transform: translateX(0);
}
#introduction {
z-index: 1;
}
#about-me {
z-index: 0;
}
#information {
text-align: center;
}
#intro {
font-size: 4vw;
color: white;
text-align: center;
padding-top: 30vh;
}
#port{
position: absolute;
right: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#home,
#about{
position: absolute;
left: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#about:active #about-me {
width: 100vw;
}
.big {
font-size: 8vw;
color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container">
<section class="full-page right" id="about-me">
<h1 id="information">About Me</h1>
<a id="home">Back home</a>
</section>
<section class="full-page left active" id="introduction">
<h1 id="intro">Hello, my name is<br/><span class="big">Michael!</span> </h1>
<a id="port">Portfolio</a>
<a id="about">About Me</a>
</section>
</div>
</body>

If you're wanting to hide the content when the '#about' selector is clicked, why not just use $('#introduction').toggle()?

This a CSS issue. You need to add overflow: hidden; to whatever you want to be hidden with a change of width, in this case #intro.

Here a working fiddle with the intended animation: fiddle
CSS:
#introduction {
z-index: 1;
visibility:"visible";
overflow:hidden;
}
jQuery
$(document).ready(function () {
$("#about").click(function () {
if ($("#about-me").css("width") <= "0px") {
$("#introduction").animate({
width: "0px"
}, 500, function () {
$("#introduction").css("visibility", "hidden");
})
} else {
$("#introduction").animate({
width: "0px"
});
}
});
});