Playful inner-page navigation

Developer
Ross B
Size
4,689 Kb
Views
12,144
  1. Playful inner-page navigation Previews
  2. Playful inner-page navigation HTML Codes
  3. Playful inner-page navigation CSS Codes
  4. Playful inner-page navigation JS Codes

How do I make an playful inner-page navigation?

WIP - not responsive, near impossible to use on smaller resolutions.Tiles that can be clicked on to reveal additional information.. What is a playful inner-page navigation? How do you make a playful inner-page navigation? This script and codes were developed by Ross B on 24 November 2022, Thursday.

Playful inner-page navigation Previews
IQ Test

Playful inner-page navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playful inner-page navigation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="contain"> <div class="progress-background"> <i class="target"></i> <i class="fa fa-times"></i> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur facilis, repellat sit, reiciendis eum, ducimus sapiente quo modi maxime neque suscipit consequatur, recusandae at mollitia voluptatum maiores illum tenetur ad! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque corporis, delectus dolores quo, voluptate modi similique, quidem minima excepturi quis ipsa voluptatum eius ipsum totam, id natus aperiam molestias a.</p> </div>
</div>
<div class="grid"> <div class="cell red"> <i class="fa fa-heartbeat"></i> </div> <div class="cell yellow"> <i class="fa fa-wrench"></i> </div> <div class="cell blue"> <i class="fa fa-subway"></i> </div> <div class="cell green"> <i class="fa fa-university"></i> </div> <div class="cell purple"> <i class="fa fa-gamepad"></i> </div> <div class="cell orange"> <i class="fa fa-rocket"></i> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.3.1/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Playful inner-page navigation - Script Codes CSS Codes

html, body { margin: 0;
}
body { margin: 0;
}
.contain { position: absolute; overflow: hidden; width: 100%; height: 100vh;
}
.progress-background { position: absolute; width: 100%; height: 100vh; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: all 300ms linear; transition: all 300ms linear; opacity: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.progress-background.fill { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;
}
.progress-background.fill i { -webkit-transition-delay: 300ms; transition-delay: 300ms; opacity: 1;
}
.progress-background i { color: white; position: absolute; top: 20px; right: 30px; font-size: 30px; opacity: 0; -webkit-transition: opacity 150ms linear; transition: opacity 150ms linear; -webkit-transition-delay: 300ms; transition-delay: 300ms; cursor: pointer;
}
.progress-background p { width: 400px; line-height: 1.4; text-align: center; font-size: 20px; color: white;
}
.target { position: absolute; top: 20px; left: 30px;
}
.grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 800px; margin: auto; height: 100vh; -webkit-perspective: 1000px; perspective: 1000px;
}
.grid.hide { display: none;
}
.cell { width: 30%; height: 14rem; background-color: #333; color: white; font-size: 5em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all 300ms ease-out; transition: all 300ms ease-out;
}
.cell.hide { opacity: 0;
}
.cell .shadow { position: absolute; content: ''; background-color: rgba(0, 0, 0, 0.5); left: 0; top: 0; right: 0; bottom: 0;
}
.cell:hover { -webkit-transform: translate3d(0, 0, 50px); transform: translate3d(0, 0, 50px);
}
.cell i { /* text-shadow: 1px 1px rgba(50,50,50,0.2); */
}
.cell:nth-child(even) { margin-top: 10px;
}
.cell:nth-child(odd) { margin-bottom: 10px;
}
.cell.offscreen { /* transform: translate3d(0, 0, 1000px); */ /* opacity: 0; */ -webkit-transition-delay: 300ms; transition-delay: 300ms;
}
.red { background: #FF514D;
}
.blue { background: #62C6FF;
}
.green { background: #5CE87B;
}
.purple { background: #954EE8;
}
.yellow { background: #FFF755;
}
.orange { background-color: #FF7D46;
}

Playful inner-page navigation - Script Codes JS Codes

'use strict';
var body = document.body, cells = document.querySelectorAll('.cell'), progressBackground = document.querySelector('.progress-background'), closeButton = document.querySelector('.progress-background i.fa.fa-times'), getStyle = function getStyle(el) { return document.defaultView.getComputedStyle(el)['background-color'];
}, where = document.querySelector('.progress-background .target');
_.each(cells, function (cell) { cell.addEventListener('click', function () { progressBackground.style.background = getStyle(this); progressBackground.classList.toggle('fill'); var movey = cell.offsetTop * -1, movex = cell.offsetLeft * -1; cell.style.transform = 'translate3d(' + movex + 'px, ' + movey + 'px , 0)'; cell.classList.toggle('offscreen'); _.each(cells, function (other) { if (other !== cell) { other.classList.add('hide'); } }); });
});
closeButton.addEventListener('click', function () { progressBackground.classList.toggle('fill'); _.each(cells, function (cell) { // cell.style.opacity = 1; cell.style.transform = null; cell.classList.remove('hide'); cell.classList.remove('offscreen'); });
});
Playful inner-page navigation - Script Codes
Playful inner-page navigation - Script Codes
Home Page Home
Developer Ross B
Username rocbear
Uploaded November 24, 2022
Rating 3
Size 4,689 Kb
Views 12,144
Do you need developer help for Playful inner-page navigation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ross B (rocbear) Script Codes
Name
Responsive grid based FLIP.js demo
Context menu experiment
Plane vertex manipulation experiment
Unfolding circular menu
Wobbly list
UFO
Full page scroll-over with Skrollr
Full page scroll-over with ScrollMagic
Hovergram
Babel React template
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!