The navigation works well, but the active status should show in a better way:
-- If the circle was active it stay active.(
-- Going back the a class active goes.
so, if page down remain active if page up(going back) remove active class.
At the moment just a a class active works,
I hope makes sense. Please ask question, this is a really nice animation but need a bit of more work.
I will post the code with a Demo.
Also . FIDDLE
$(document).ready(function() {
var $half = $(".circle .half"),
halfLen = $half[0].getTotalLength(),
$nav = $(".circle .active-nav"),
navLen = $nav[0].getTotalLength(),
$pages = $(".pages"),
scrolling = false,
curPage = 1,
numOfPages = $(".page").length,
headingH = $(".heading").height(),
SPHASE1 = 500,
SPHASE2 = 300,
SPHASE3 = 900,
SDELAY = SPHASE1 + SPHASE2 + SPHASE3,
SDUR = 500,
SDOTS = SDELAY + SDUR,
DOTTRANSTIME = 300,
SDOTSRDY = SDOTS + DOTTRANSTIME + (numOfPages - 2) * 100,
PAGETRANSITION = 500;
TweenMax.to($half, .5, {strokeDasharray: halfLen, strokeDashoffset: halfLen, ease:Power1.easeOut}, 0)
TweenMax.to($nav, .5, {strokeDasharray: navLen, strokeDashoffset: navLen, ease:Power1.easeOut}, 0)
$half.delay(SDELAY).velocity({strokeDashoffset: 0}, {duration: SDUR, easing: "ease-in"});
setTimeout(function() {
$(".nav-el").addClass("showing visible");
}, SDOTS);
setTimeout(function() {
$(".nav-el").removeClass("showing").addClass("white");
$(".nav-el-1").addClass("active");
$(".heading").removeClass("invisible");
$pages.removeClass("removed");
setTimeout(function() {
activateHandlers();
}, PAGETRANSITION + 300);
}, SDOTSRDY);
function pagination(page) {
scrolling = true;
curPage = page;
$(".nav-el").removeClass("active");
$(".nav-el-" + page).addClass("active");
var newNavLen = navLen - navLen / 5 * (page - 1);
$nav.velocity({strokeDashoffset: newNavLen}, {duration: PAGETRANSITION});
$(".numbers").css("transform", "translateY("+ (0 - (page - 1) * headingH) +"px)");
$pages.css("transform", "translate3D(0,"+ (0 - (page - 1) * 100) +"%,0)");
setTimeout(function() {
scrolling = false;
}, PAGETRANSITION);
if($(".nav-el-").hasClass('active')){
console.log('if active')
}else{
console.log('else active')
}
}
function activateHandlers() {
$(document).on("click", ".nav-el", function() {
var pg = +$(this).attr("data-page");
pagination(pg);
});
$(window).resize(function() {
headingH = $(".heading").height();
});
}
var diff = 0;
});
#font-face {
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/polar.otf");
font-family: Polar;
}
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
}
.instant {
transition: all 0 0 !important;
}
html, body {
font-size: 62.5%;
height: 100%;
overflow: hidden;
background: #90CAF9;
}
#media (max-width: 960px) {
html, body {
font-size: 50%;
}
}
#media (max-width: 768px) {
html, body {
font-size: 40%;
}
}
#media (max-width: 480px) {
html, body {
font-size: 30%;
}
}
.scene {
position: relative;
height: 100%;
}
.circle {
z-index: 4;
position: fixed;
top: calc(50% - 20rem);
left: calc(50% - 20rem);
width: 40rem;
height: 40rem;
opacity: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.rotater {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
width: 500rem;
height: 500rem;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: #020202;
border-radius: 50%;
}
.rotater.phase1 {
width: 0.1rem;
height: 0.1rem;
transition: width 0.5s, height 0.5s;
}
.rotater.phase2 {
width: 2.5rem;
height: 2.5rem;
transition: width 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46), height 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
.rotater.phase3 {
width: 1rem;
height: 1rem;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(180deg);
transform: translateX(-50%) translateY(-50%) rotate(180deg);
transition: width 0.1s, height 0.1s, opacity 0.4s 1.3s, -webkit-transform 0.6s 0.87s ease-in;
transition: width 0.1s, height 0.1s, transform 0.6s 0.87s ease-in, opacity 0.4s 1.3s;
transition: width 0.1s, height 0.1s, transform 0.6s 0.87s ease-in, opacity 0.4s 1.3s, -webkit-transform 0.6s 0.87s ease-in;
opacity: 0;
}
.rotater.phase3 .rotater--line {
max-width: 20rem;
}
.rotater.phase3 .rotater--line:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.rotater--line {
position: absolute;
top: calc(50% - 0.1rem);
left: 50%;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
width: 20rem;
max-width: 0;
height: 0.2rem;
background: #020202;
transition: max-width 0.5s 0.1s;
will-change: max-width;
}
.rotater--line:after {
content: "";
position: absolute;
top: -0.4rem;
left: 19.4rem;
width: 1rem;
height: 1rem;
background: #020202;
border-radius: 50%;
-webkit-transform: scale(0);
transform: scale(0);
transition: -webkit-transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46), -webkit-transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
.rotater--line.left {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.nav-elems {
z-index: 5;
position: fixed;
top: calc(50% - 20rem);
left: calc(50% - 20rem);
width: 40rem;
height: 40rem;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.heading {
position: absolute;
top: 50%;
left: 50%;
font-size: 9rem;
width: 40rem;
height: 9rem;
line-height: 1;
font-family: Polar;
text-transform: uppercase;
text-align: center;
color: rgba(255, 255, 255, 0.5);
margin-left: -3rem;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
transform: translateX(-50%) translateY(-50%) scale(1);
overflow: hidden;
transition: opacity 0.3s 0.7s, -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: opacity 0.3s 0.7s, transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: opacity 0.3s 0.7s, transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46), -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
.heading.invisible {
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0);
transform: translateX(-50%) translateY(-50%) scale(0);
}
.numbers {
position: absolute;
top: 0;
right: 5rem;
width: 1rem;
display: inline-block;
vertical-align: top;
height: 90rem;
line-height: 1;
word-break: break-all;
transition: -webkit-transform 0.7s;
transition: transform 0.7s;
transition: transform 0.7s, -webkit-transform 0.7s;
will-change: transform;
}
.nav-el {
position: absolute;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #020202;
-webkit-transform: scale(0);
transform: scale(0);
transition: background-color 0.7s, -webkit-transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46), background-color 0.7s;
transition: transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46), background-color 0.7s, -webkit-transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46);
cursor: pointer;
}
.nav-el:after {
content: "";
position: absolute;
top: calc(50% - 0.2rem);
left: calc(50% - 0.2rem);
width: 0.4rem;
height: 0.4rem;
background: #020202;
border-radius: 50%;
-webkit-transform: scale(0);
transform: scale(0);
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.nav-el.visible {
-webkit-transform: scale(1);
transform: scale(1);
}
.nav-el.white {
background: #fff;
}
.nav-el.active, .nav-el:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.nav-el.active:after, .nav-el:hover:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.nav-el-1 {
left: 19.5rem;
top: -0.4rem;
}
.nav-el-1.showing {
transition-delay: 0s;
}
.nav-el-2 {
left: 38.42602rem;
top: 13.35056rem;
}
.nav-el-2.showing {
transition-delay: 0.1s;
}
.nav-el-3 {
left: 31.19693rem;
top: 35.59944rem;
}
.nav-el-3.showing {
transition-delay: 0.2s;
}
.nav-el-4 {
left: 7.80307rem;
top: 35.59944rem;
}
.nav-el-4.showing {
transition-delay: 0.3s;
}
.nav-el-5 {
left: 0.57398rem;
top: 13.35056rem;
}
.nav-el-5.showing {
transition-delay: 0.4s;
}
.pages {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 0.7s;
transition: transform 0.7s;
transition: transform 0.7s, -webkit-transform 0.7s;
will-change: transform;
}
.pages.removed {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.pages.removed .scroll-down {
-webkit-transform: scale(0);
transform: scale(0);
}
.page {
position: relative;
width: 100%;
height: 100%;
}
.page:after {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.page.page-1 {
position: relative;
background: #F44336;
}
.page.page-2 {
background: #009688;
}
.page.page-3 {
background: #3F51B5;
}
.page.page-4 {
background: #FFA726;
}
.page.page-5 {
background: #795548;
}
.page.page-6 {
background: #607D8B;
}
.page.page-7 {
position: relative;
background: #000000;
padding: 10rem;
}
.scroll-down {
position: absolute;
bottom: 5rem;
left: 50%;
-webkit-transform: translateX(-50%) scale(1);
transform: translateX(-50%) scale(1);
font-size: 5rem;
font-family: Polar;
color: #fff;
transition: -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
transition: transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46), -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
#media (max-width: 768px) {
.scroll-down {
display: none;
}
}
#media (max-height: 610px) and (min-width: 769px) {
.scroll-down {
display: none;
}
}
.check-out {
z-index: 10;
position: relative;
font-size: 5rem;
font-family: Polar;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.2.0/velocity.min.js"></script>
<div class="scene">
<svg class="circle" viewBox="0 0 400 400">
<path class="half" stroke="rgba(255,255,255,0.5)" stroke-width="2" fill="none" d="M1,200 a199,199 0 0,1 398,0"/>
<path class="half" stroke="rgba(255,255,255,0.5)" stroke-width="2" fill="none" d="M399,200 a199,199 0 0,1 -398,0"/>
<path class="active-nav" stroke="#fff" stroke-width="2" fill="none" d="M200,1 a199,199 0 0,1 0,398 a199,199 0 0,1 0,-398"/>
</svg>
<div class="rotater">
<div class="rotater--line left"></div>
<div class="rotater--line right"></div>
</div>
<div class="nav-elems">
<div data-page="1" class="nav-el nav-el-1"></div>
<div data-page="2" class="nav-el nav-el-2"></div>
<div data-page="3" class="nav-el nav-el-3"></div>
<div data-page="4" class="nav-el nav-el-4"></div>
<div data-page="5" class="nav-el nav-el-5"></div>
</div>
<div class="pages removed">
<div class="page page-1">
<p class="scroll-down">Scroll down</p>
</div>
<div class="page page-2"></div>
<div class="page page-3"></div>
<div class="page page-4"></div>
<div class="page page-5"></div>
</div>
</div>
Related
Rather new to this sorry in advance for the mess. I'm trying to put this menu section together before moving on to the next stages as this will be in the header of all pages.
it all started going suspiciously well then boom! all of a sudden my pc violently reminding me i should've stayed in school :( anyway i made a function that removes the menu on a click but the function to close the menu is somehow called before the link click is registered. This results in a useless menu that i just spend a fair feww hours wrapping my head around.
heres the code - p.s. i said it was messy.
Will be forever grateful if solved!
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Official EST Performance</title>
</head>
<body data-barba="wrapper">
<!-- header and sidebar -->
<header class="navbar" id="intro">
<a href="/index.html"
><img src="images/EST-Logo.png" alt="Logo" class="logo"
/></a>
<div class="side-bar">
<!-- <a href="/menu.html">
<img src="images/menu.png" class="menu" alt="Menu Icon" />
</a> -->
<div class="social-links">
<img src="images/facebook-6-64.png" />
<img src="images/instagram-64.png" />
<img src="images/phone-30-64.png" />
</div>
<div class="useful-links">
<img src="images/help-64.png" />
<img src="images/business-contact-64.png" />
</div>
</div>
</header>
<div class="circle"></div>
<div class="menu">
<ul>
<li>About</li>
<li>Share</li>
<li>Activity</li>
<li>Settings</li>
<li>Contact</li>
</ul>
</div>
<div class="burger">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</div>
<div class="load-container">
<div class="loader"></div>
</div>
<div class="page-top" data-barba="container">
<section class="one">
<div class="sections">
<div class="content">
<small>15 years of...</small>
<h1>Stock to Track</h1>
<button type="button">Take a tour</button>
</div>
<div class="spacer">
<p>.</p>
</div>
</div>
<div class="scrolldown">
</div>
</section>
<section class="two">
<div class="sections">
<div class="content">
<small>best in class</small>
<h1>ECU Remapping</h1>
<button type="button">Take a tour</button>
</div>
</div>
</section>
<section class="three">
<div class="sections">
<div class="content">
<small>high accuracy</small>
<h1>4-Wheel Dyno</h1>
<button type="button">Learn more</button>
</div>
</div>
</section>
<section class="four">
<div class="sections">
<div class="content">
<small>shop here for</small>
<h1>Genuine Parts</h1>
<button type="button">Take a tour</button>
</div>
</div>
</section>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/#barba/core"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="js/main.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</html>
css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
font-family: "good_timesregular", serif;
font-weight: 400;
font-size: 16px;
line-height: 30px;
background-color: #0c0f15;
overflow-x: hidden;
color: #ababab;
background: rgb(12, 12, 12);
height: 100%;
width: 100%;
}
#font-face {
font-family: "good_timesregular";
src: url("/css/good_times_rg.woff2") format("woff2"),
url("/css/good_times_rg.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.loader {
position: fixed;
width: 100vw;
height: 200vh;
pointer-events: none;
background: linear-gradient(rgb(12, 12, 12), rgb(12, 12, 12));
background-size: cover;
background-repeat: repeat;
background-position: center;
z-index: 2;
visibility: hidden;
opacity: 0;
overflow: hidden;
}
.load-container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100%;
width: 100%;
max-width: 100% !important;
overflow-x: hidden !important;
background-attachment: fixed;
}
.page-top {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100%;
width: 100%;
max-width: 100% !important;
overflow-x: hidden !important;
background-attachment: fixed;
transform: translateY(-100%);
}
.is-transitioning {
pointer-events: none;
cursor: progress;
}
/* ----------------section snapping----------------- */
section {
height: 95%;
display: flex;
position: relative;
scroll-snap-align: start;
}
.one {
background: linear-gradient(rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0.5)),
url(/images/Hero.jpg);
background-size: cover;
background-position: center;
background-blend-mode: screen;
}
.two {
background: linear-gradient(rgba(0, 0, 0, 0.726), rgba(0, 0, 0, 0.5)),
url(/images/Image-3-ECU-Tuning-Image.jpg);
background-size: cover;
background-position: center;
background-blend-mode: darken;
}
.three {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(/images/Image-2-Tuning-Main-Top-Photo.jpg);
background-size: cover;
background-position: center;
background-blend-mode: multiply;
}
.four {
background: linear-gradient(rgba(0, 0, 0, 0.651), rgba(0, 0, 0, 0.5)),
url(/images/PerformaceParts.jpg);
background-size: cover;
background-position: center;
}
.sections {
width: 100%;
height: 100%;
position: relative;
overflow: none;
}
.logo {
width: 100px;
cursor: pointer;
margin: 0 0 0 60px;
z-index: 1;
}
.navbar {
width: 95%;
height: 10%;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
}
button {
color: #fbfcfd;
padding: 10px 25px;
background: transparent;
border-radius: 20px;
border: 1px solid #fff;
outline: none;
cursor: pointer;
margin-left: 30px;
}
header {
height: 0;
z-index: 2;
}
.content {
color: #fbfcfd;
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
}
.scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -16px;
display: block;
width: 32px;
height: 32px;
border: 2px solid rgba(122, 6, 6, 0.705);
background-size: 14px auto;
border-radius: 50%;
z-index: 1;
-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.scroll-down:before {
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 6px);
transform: rotate(-45deg);
display: block;
width: 12px;
height: 12px;
content: "";
border: 2px solid white;
border-width: 0px 0 2px 2px;
}
#keyframes bounce {
0%,
100%,
20%,
50%,
80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
}
h1 {
position: relative;
color: #fbfcfd;
text-decoration: none;
font-size: clamp(40px, 10vw, 70px);
margin: 10px 0 10px 30px;
line-height: 60px;
text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
}
small {
font-size: clamp(10px, 3vw, 20px);
margin-left: 30px;
}
.side-bar {
width: 50px;
height: 100%;
background: linear-gradient(#a4373bb2, #0f0f0f31);
position: fixed;
top: 0;
padding-top: 2%;
left: 0;
}
.social-links img,
.useful-links img {
width: 25px;
margin: 5px auto;
cursor: pointer;
}
.social-links {
width: 50px;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.useful-links {
width: 50px;
text-align: center;
position: absolute;
bottom: 30px;
}
h1:hover {
color: rgba(245, 245, 245, 0.568);
text-shadow: 0 0 px whitesmoke;
}
h1::before {
content: "";
position: absolute;
display: block;
width: 70%;
height: 4px;
bottom: 0;
left: 0;
background-color: #fbfcfd4f;
transform: scaleX(0);
transform-origin: top left;
transition: transform 0.3s ease;
}
h1:hover::before {
transform: scaleX(1);
}
/*
icon selection
----------------------- */
::-webkit-scrollbar {
width: 6px;
background-color: #090809;
}
::-webkit-scrollbar-thumb {
background-color: #a4373b;
background-image: -webkit-linear-gradient(
45deg,
rgba(10, 8, 8, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(10, 8, 8, 0.116) 50%,
rgba(10, 8, 8, 0.2) 75%,
transparent 75%,
transparent
);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(107, 104, 104, 0.363);
background-color: #0908099c;
}
.heading-page {
text-transform: uppercase;
font-size: 43px;
font-weight: bolder;
letter-spacing: 3px;
color: white;
}
a {
color: inherit;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
padding-bottom: 20px;
}
a:hover,
a:focus {
color: #ababab;
text-decoration: none;
outline: 0 none;
}
h2,
h3,
h4,
h5,
h6 {
color: #171718;
font-family: "Open Sans", sans-serif;
margin: 0;
line-height: 1.3;
}
/* =========start of circle-out menu ================ */
div.burger {
height: 30px;
width: 40px;
position: absolute;
top: 11px;
left: 21px;
cursor: pointer;
z-index: 4;
}
div.x,
div.y,
div.z {
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
background: #ddd;
border-radius: 2px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
div.x,
div.y,
div.z {
height: 3px;
width: 26px;
}
div.y {
top: 18px;
}
div.z {
top: 37px;
}
div.collapse {
top: 20px;
background: #b5171a;
-webkit-transition: all 70ms ease-out;
-moz-transition: all 70ms ease-out;
-ms-transition: all 70ms ease-out;
-o-transition: all 70ms ease-out;
transition: all 70ms ease-out;
}
div.rotate30 {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-transition: all 50ms ease-out;
-moz-transition: all 50ms ease-out;
-ms-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate150 {
-ms-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
-webkit-transition: all 50ms ease-out;
-moz-transition: all 50ms ease-out;
-ms-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.rotate135 {
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.circle {
border-radius: 50%;
width: 0px;
height: 0px;
position: absolute;
top: 35px;
left: 36px;
background: #090909;
opacity: 1;
z-index: 1;
-webkit-transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.circle.expand {
width: 1200px;
height: 1200px;
top: -560px;
left: -565px;
-webkit-transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.menu {
height: 568px;
width: 320px;
position: absolute;
left: -500px;
z-index: 3;
}
div.menu.drop {
top: 0;
left: 0;
-webkit-transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.menu ul li {
list-style: none;
position: absolute;
top: 50px;
left: 0;
opacity: 0;
width: 320px;
text-align: center;
z-index: 8;
-webkit-transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.menu ul li a {
color: #f3f3f3;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 3px;
z-index: 8;
padding: 10px;
}
div.menu li.animate {
font-size: 21px;
opacity: 1;
z-index: 8;
margin-top: 10px;
-webkit-transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.menu li.animate:nth-of-type(1) {
top: 120px;
transition-delay: 0s;
}
div.menu li.animate:nth-of-type(2) {
top: 190px;
transition-delay: 0.03s;
}
div.menu li.animate:nth-of-type(3) {
top: 260px;
transition-delay: 0.06s;
}
div.menu li.animate:nth-of-type(4) {
top: 330px;
transition-delay: 0.09s;
}
div.menu li.animate:nth-of-type(5) {
top: 400px;
transition-delay: 0.12s;
}
div.menu li.animate:nth-of-type(6) {
top: 470px;
transition-delay: 0.15s;
}
/*=========end of circle-out menu ================ */
li a:hover {
color: rgba(245, 245, 245, 0.568);
text-shadow: 0 0 px whitesmoke;
}
li a::before {
content: "";
position: absolute;
display: block;
width: 70%;
height: 4px;
bottom: 0;
left: 0;
background-color: #fbfcfd4f;
transform: scaleX(0);
transform-origin: top left;
transition: transform 0.3s ease;
}
li a:hover::before {
transform: scaleX(1);
}
js:
/*Loader =========================*/
function init(){
const loader = document.querySelector('.loader');
// reset position of the loading screen
gsap.set(loader, {
scaleX: 0,
rotation: 6,
xPercent: -5,
yPercent: -50,
transformOrigin: 'left center',
autoAlpha: 1
});
function loaderIn() {
// GSAP tween to stretch the loading screen across the whole screen
return gsap.fromTo(loader,
{
rotation: 16,
scaleX: 0,
xPercent: -5
},
{
duration: 0.8,
xPercent: 0,
scaleX: 1,
rotation: 0,
ease: 'Power4.inOut',
transformOrigin: 'left center'
});
}
function loaderAway() {
// GSAP tween to hide the loading screen
return gsap.to(loader, {
duration: 0.8,
scaleX: 0,
xPercent: 5,
rotation: -16,
transformOrigin: 'right center',
ease: 'Power4.inOut'
});
}
// do something before the transition starts
barba.hooks.before(() => {
document.querySelector('html').classList.add('is-transitioning');
barba.wrapper.classList.add('is-animating');
});
// do something after the transition finishes
barba.hooks.after(() => {
document.querySelector('html').classList.remove('is-transitioning');
barba.wrapper.classList.remove('is-animating');
});
// scroll to the top of the page
barba.hooks.enter(() => {
window.scrollTo(0, 0);
});
barba.init({
transitions: [{
async leave() {
await loaderIn();
},
enter() {
loaderAway();
}
}]
})
}
window.addEventListener('load', function(){
init();
});
/*End of loader*/
/*menu*/
if( 'ontouchstart' in window ){ var click = 'touchstart'; }
else { var click = 'click'; }
$('div.burger').on(click, function(){
if( !$(this).hasClass('open') ){ openMenu(); }
else { closeMenu(); }
});
$('div.menu ul li a').on(click, function(e){
e.preventDefault();
closeMenu();
});
function openMenu(){
$('div.circle').addClass('expand');
$('div.burger').addClass('open');
$('div.x, div.y, div.z').addClass('collapse');
$('.menu li').addClass('animate');
$('div.menu').addClass('drop');
setTimeout(function(){
$('div.y').hide();
$('div.x').addClass('rotate30');
$('div.z').addClass('rotate150');
}, 70);
setTimeout(function(){
$('div.x').addClass('rotate45');
$('div.z').addClass('rotate135');
}, 120);
}
function closeMenu(){
$('div.burger').removeClass('open');
$('div.x').removeClass('rotate45').addClass('rotate30');
$('div.z').removeClass('rotate135').addClass('rotate150');
$('div.circle').removeClass('expand');
$('.menu li').removeClass('animate');
$('div.menu').removeClass('drop');
setTimeout(function(){
$('div.x').removeClass('rotate30');
$('div.z').removeClass('rotate150');
}, 50);
setTimeout(function(){
$('div.y').show();
$('div.x, div.y, div.z').removeClass('collapse');
}, 70);
}
closeMenu function calls the removeClass method on the wrong elements therefore the menu disappears every time you click on it.
Replace $('.menu li') and $('div.menu') with $('.burger')
/*Loader =========================*/
function init() {
const loader = document.querySelector(".loader");
// reset position of the loading screen
gsap.set(loader, {
scaleX: 0,
rotation: 6,
xPercent: -5,
yPercent: -50,
transformOrigin: "left center",
autoAlpha: 1,
});
function loaderIn() {
// GSAP tween to stretch the loading screen across the whole screen
return gsap.fromTo(
loader,
{
rotation: 16,
scaleX: 0,
xPercent: -5,
},
{
duration: 0.8,
xPercent: 0,
scaleX: 1,
rotation: 0,
ease: "Power4.inOut",
transformOrigin: "left center",
}
);
}
function loaderAway() {
// GSAP tween to hide the loading screen
return gsap.to(loader, {
duration: 0.8,
scaleX: 0,
xPercent: 5,
rotation: -16,
transformOrigin: "right center",
ease: "Power4.inOut",
});
}
// do something before the transition starts
barba.hooks.before(() => {
document.querySelector("html").classList.add("is-transitioning");
barba.wrapper.classList.add("is-animating");
});
// do something after the transition finishes
barba.hooks.after(() => {
document.querySelector("html").classList.remove("is-transitioning");
barba.wrapper.classList.remove("is-animating");
});
// scroll to the top of the page
barba.hooks.enter(() => {
window.scrollTo(0, 0);
});
barba.init({
transitions: [
{
async leave() {
await loaderIn();
},
enter() {
loaderAway();
},
},
],
});
}
window.addEventListener("load", function () {
init();
});
/*End of loader*/
/*menu*/
if ("ontouchstart" in window) {
var click = "touchstart";
} else {
var click = "click";
}
$("div.burger").on(click, function () {
if (!$(this).hasClass("open")) {
openMenu();
} else {
closeMenu();
}
});
$("div.menu ul li a").on(click, function (e) {
e.preventDefault();
closeMenu();
});
function openMenu() {
$("div.circle").addClass("expand");
$("div.burger").addClass("open");
$("div.x, div.y, div.z").addClass("collapse");
$(".menu li").addClass("animate");
$("div.menu").addClass("drop");
setTimeout(function () {
$("div.y").hide();
$("div.x").addClass("rotate30");
$("div.z").addClass("rotate150");
}, 70);
setTimeout(function () {
$("div.x").addClass("rotate45");
$("div.z").addClass("rotate135");
}, 120);
}
function closeMenu() {
$("div.burger").removeClass("open");
$("div.x").removeClass("rotate45").addClass("rotate30");
$("div.z").removeClass("rotate135").addClass("rotate150");
$("div.circle").removeClass("expand");
// 👇
$(".burger").removeClass("animate");
$(".burger").removeClass("drop");
// 👆
setTimeout(function () {
$("div.x").removeClass("rotate30");
$("div.z").removeClass("rotate150");
}, 50);
setTimeout(function () {
$("div.y").show();
$("div.x, div.y, div.z").removeClass("collapse");
}, 70);
}
I'm kind of new to the programming world and the professor requires me to stop the popping and play the music in the background of the main page when he clicks on the word "PLAY MUSIC". I don't know how to do that, although I have tried a lot. Is it even possible to do that ?
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
body {
background: #aaa;
font-family: "Open Sans", sans-serif;
}
.slider {
position: relative;
height: 100vh;
width: 100vw;
background: #777;
overflow: hidden;
}
.slider__wrap {
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: 0% 50%;
transition-delay: 450ms;
opacity: 0;
}
.slider__wrap--hacked {
opacity: 1;
}
.slider__back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
opacity: 0;
box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
padding: 15vh;
box-sizing: border-box;
}
.slider__content {
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: "Heebo", sans-serif;
opacity: 0;
transition: opacity 450ms;
}
.slider__content h1 {
font-weight: 900;
font-size: 9vh;
line-height: 0.85;
margin-bottom: 0.75vh;
pointer-events: none;
text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
cursor: pointer;
font-size: 2.4vh;
letter-spacing: 0.3vh;
font-weight: 100;
position: relative;
}
.slider__content a:after {
content: "";
display: block;
width: 9vh;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 6vh;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
content: "";
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: 1vh;
height: 1vh;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: "Heebo", sans-serif;
font-weight: 100;
top: 50%;
left: 15vh;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
transform: scaleX(1.5);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
transform: translateX(6vh) translateY(-50%) rotate(45deg);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 600ms;
pointer-events: none;
z-index: 0;
}
.slider__slide--active {
transform: translatex(0%);
z-index: 2;
}
.slider__slide--active .slider__wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
-webkit-animation: none;
animation: none;
}
.slider__slide--active .slider__back {
filter: blur(1.5vh);
transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
transform: scale(0.8);
box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
pointer-events: auto;
opacity: 1;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
transition-delay: 900ms;
}
.slider__slide--active .slider__content {
opacity: 1;
transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
-webkit-animation-name: hack;
animation-name: hack;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#-webkit-keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
#keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=927);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
z-index: 9999;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Popout Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="slider">
<div class="slider__slide slider__slide--active" data-slide="1">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> One</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="2">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="3">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__indicators"></div>
</div><a class="sig" href="https://audio.code.org/win1.mp3" target="_blank">PLAY MUSIC</a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
You can follow these steps:
Add an <audio> tag to your HTML with a src attribute containing the URI for the audio you want to play. This tag is the one which will load the content from https://audio.code.org/win1.mp3.
<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
Remove the href attribute from your .sig anchor (<a>) element, since it will not take the user to the audio resource webpage anymore. Instead, it will work like a button which will be responsible for playing the audio when clicked.
Having an <a> element working as a <button> element isn't good for accessibility, unless you make this behavior explicit by means of role="button". This attribute will indicate that your <a> will work as a button. Yes, you can also replace that tag with a <button> tag as long as you are willing to modify your CSS for maintaining aesthetics.
<a class="sig" role="button">PLAY MUSIC</a>
In your JavaScript code, attach a click event to .sig, telling it to play the audio you want when it's clicked.
$('.sig').on('click', () => $('#myAudio').get(0).play());
Try it below.
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
$('.sig').on('click', () => $('#myAudio').get(0).play());
body {
background: #aaa;
font-family: "Open Sans", sans-serif;
}
.slider {
position: relative;
height: 100vh;
width: 100vw;
background: #777;
overflow: hidden;
}
.slider__wrap {
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: 0% 50%;
transition-delay: 450ms;
opacity: 0;
}
.slider__wrap--hacked {
opacity: 1;
}
.slider__back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
opacity: 0;
box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
padding: 15vh;
box-sizing: border-box;
}
.slider__content {
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: "Heebo", sans-serif;
opacity: 0;
transition: opacity 450ms;
}
.slider__content h1 {
font-weight: 900;
font-size: 9vh;
line-height: 0.85;
margin-bottom: 0.75vh;
pointer-events: none;
text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
cursor: pointer;
font-size: 2.4vh;
letter-spacing: 0.3vh;
font-weight: 100;
position: relative;
}
.slider__content a:after {
content: "";
display: block;
width: 9vh;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 6vh;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
content: "";
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: 1vh;
height: 1vh;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: "Heebo", sans-serif;
font-weight: 100;
top: 50%;
left: 15vh;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
transform: scaleX(1.5);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
transform: translateX(6vh) translateY(-50%) rotate(45deg);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 600ms;
pointer-events: none;
z-index: 0;
}
.slider__slide--active {
transform: translatex(0%);
z-index: 2;
}
.slider__slide--active .slider__wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
-webkit-animation: none;
animation: none;
}
.slider__slide--active .slider__back {
filter: blur(1.5vh);
transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
transform: scale(0.8);
box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
pointer-events: auto;
opacity: 1;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
transition-delay: 900ms;
}
.slider__slide--active .slider__content {
opacity: 1;
transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
-webkit-animation-name: hack;
animation-name: hack;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#-webkit-keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
#keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=927);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
z-index: 9999;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Popout Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="slider">
<div class="slider__slide slider__slide--active" data-slide="1">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> One</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="2">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="3">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__indicators"></div>
</div>
<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
<a class="sig" role="button">PLAY MUSIC</a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
At the moment, my navigation bar houses links to sections on the one page and doesn't have any links to other pages. When a link is clicked it automatically goes to the corresponding div on that page however, part of the target div is covered by the navigation bar which remains open until the close button is clicked.
My question is, is there a way to force the header to close once a link has been clicked?
HTML:
<div class="navigation">
<div class="container">
<nav>
<div class="col">
<h3>Why Tracker?</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>Key Features</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>How to Buy</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>FAQ's</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>Where to Buy</h3>
<ul>
<li>Store locator</li>
<li>Trade customer login</li>
</ul>
</div>
<div class="col">
<a href="https://www.facebook.com/OxfordProductsLtd/" target="_blank">
<div class="social-link"><i class="fab fa-facebook-f"></i></div>
</a>
<a href="https://twitter.com/oxfordproducts?lang=en" target="_blank">
<div class="social-link"><i class="fab fa-twitter"></i></div>
</a>
<a href="https://www.instagram.com/oxfordproducts/" target="_blank">
<div class="social-link"><i class="fab fa-instagram"></i></div>
</a>
<a href="https://www.youtube.com/user/OxfordProductsLtd" target="_blank">
<div class="social-link"><i class="fab fa-youtube"></i></div>
</a>
</div>
</nav>
</div>
</div>
<div class="menu">
<div class="container">
<img class="logo" src="Images/Logos/Oxford-tracker-Logo-white.png" alt="Oxford Tracker logo">
<div class="menu-trigger">
<div class="bar bar--1"></div>
<div class="bar bar--2"></div>
<div class="bar bar--3"></div>
</div>
</div>
</div>
CSS:
.menu {
position: fixed;
top: 0;
left: 0;
width: 102%;
z-index: 20;
background: black;
height: 90px;}
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 200px);
padding: 0 200px;}
.logo{
height: 40px;
width: auto;
position: absolute;
top: 25px;
left: 40px;}
.menu-trigger {
position: absolute;
top: 18.5px;
right: 255px;
height: 55px;
width: 60px;
cursor: pointer;
transition: opacity 130ms ease-out;
-webkit-transition: opacity 130ms ease-out;
-moz-transition: opacity 130ms ease-out;
-ms-transition: opacity 130ms ease-out;}
.menu-trigger:hover {
opacity: 1;}
.menu-trigger h5 {
position: absolute;
right: 10px;
top: 9px;
text-transform: uppercase;
color: #fff;
user-select: none;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
transition: color 300ms ease-out;
-webkit-transition: color 300ms ease-out;
-moz-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;}
.menu-trigger .bar {
position: absolute;
left: 10px;
width: 40px;
height: 5px;
background: #fff;
transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-moz-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-ms-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
.bar--1 {
top: 15px; }
.bar--2 {
top: 25px}
.bar--3 {
top: 35px;}
.open, .open:hover {
opacity: 1 !important;}
.open h5 {
color: #fff;}
.open .bar {
background: #fff; }
.open .bar--1 {
top: 21px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg); }
.open .bar--2 {
opacity: 0;
width: 0px; }
.open .bar--3 {
top: 21px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);}
.navigation {
visibility: hidden;
position: fixed;
z-index: 19;
top: 20px;
left: 0;
width: 100%;
max-width: 100%;
background: #FFFFFF;
box-shadow: 0px 6px 8px rgba(0,0,0,0.13);
padding: 100px 0 20px 0;
opacity: 0;
transform-origin: center top;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 190ms ease-out, transform 40ms ease-out;
-webkit-transition: opacity 190ms ease-out, transform 40ms ease-out;
-moz-transition: opacity 190ms ease-out, transform 40ms ease-out;
-ms-transition: opacity 190ms ease-out, transform 40ms ease-out;}
.navigation .container {
padding: 0 18px; }
.nav-open {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);}
nav {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: row wrap;}
nav h3 {
font-family: 'Univers';
position: relative;
display: block;
margin: 0 0 15px 0;
color: black;
font-size: 1.2em;
font-weight: 600;
text-transform: uppercase;}
nav ul {
position: relative;
padding: 0 0;
margin: 0 0;
width: 100%;
max-width: 100%;
list-style-type: none;}
nav li {
display: block;
color: #919191 !important;
font-size: 0.88em;
font-family: 'helvetica';
margin: 6px 0;
font-weight: 400;
letter-spacing: 0.025em;}
nav li{}
nav li > a > i {
color: #121212;
font-size: 1.4em;
margin-right: 8px;
display: inline-block;
transform: translateY(1px);
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
opacity: 0.6; }
nav .social-link {
float: left;
width: 44px;
height: 44px;
line-height: 48px;
border-radius: 44px;
text-align: center;
margin: 5px;
cursor: pointer;
transition: all 0.25s ease-in-out;}
nav .social-link > i:hover {
color: black; }
nav .social-link:last-child {
margin-right: 0px; }
nav .social-link > i {
color: #B5B5B5;
font-size: 1.57em;
margin: 0 auto; }
nav .col {
min-height: auto;
width: auto;
flex-direction: row;
margin: 0 auto;
margin-bottom: 25px;
text-align: left;
transform: translateY(25px);
-webkit-transform: translateY(25px);
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity; }
.c-in {
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-duration: 860ms;
-webkit-animation-duration: 860ms;
-moz-animation-duration: 860ms;
-ms-animation-duration: 860ms;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.col:first-child {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
-ms-animation-delay: 50ms;}
.col:nth-child(2) {
animation-delay: 130ms;
-webkit-animation-delay: 130ms;
-moz-animation-delay: 130ms;
-ms-animation-delay: 130ms; }
.col:nth-child(3) {
animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
-ms-animation-delay: 210ms; }
.col:nth-child(4) {
animation-delay: 290ms;
-webkit-animation-delay: 290ms;
-moz-animation-delay: 290ms;
-ms-animation-delay: 290ms; }
main {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; }
main .container {
padding: 82px 18px 0 18px; }
#media screen and (min-width: 680px) {
nav .col {
width: 50%;
min-height: 136px;} }
#media screen and (min-width: 992px) {
nav .col {
width: auto;
min-height: 136px;}
.search {
max-width: 235px; } }
#media screen and (max-width: 480px) {
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 100px);
padding: 0 50px;}
.menu-trigger{
right: 20px;
top:15px;}
nav .col {
width: 100% !important;
min-height: 136px; }
nav .social-link{
margin:1px; }
.logo {
height: 30px;
width: auto;
position: absolute;
top: 25px;
left: 9px;
}
}
#media screen and (max-width: 1024px) {
nav{
justify-content: flex-start !important;
align-items: flex-start !important;}
nav .social-link{
margin: 10px; }
nav .col {
min-height: auto !important;
text-align: center; }
.col:nth-child(5) {
display: flex;
justify-content: center !important;
flex-direction: column; }
.search {
max-width: 235px; } }
#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-webkit-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-moz-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-ms-#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
JS:
$(document).ready(function () {
function openMenu() {
$(".menu-trigger").addClass("open");
$(".navigation").addClass("nav-open");
$(".col").addClass("c-in");
}
function closeMenu() {
$(".menu-trigger").removeClass("open");
$(".navigation").removeClass("nav-open");
$(".col").removeClass("c-in");
}
$(".menu-trigger").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
} else {
openMenu();
}
});
$("main").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
});
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMenu();
}
});
});
add this jquery function in your js file :
$("a").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
})
here is snippet for understanding:
$(document).ready(function () {
function openMenu() {
$(".menu-trigger").addClass("open");
$(".navigation").addClass("nav-open");
$(".col").addClass("c-in");
}
function closeMenu() {
$(".menu-trigger").removeClass("open");
$(".navigation").removeClass("nav-open");
$(".col").removeClass("c-in");
}
$(".menu-trigger").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
} else {
openMenu();
}
});
$("main").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
});
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMenu();
}
});
$("a").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
})
});
.menu {
position: fixed;
top: 0;
left: 0;
width: 102%;
z-index: 20;
background: black;
height: 90px;}
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 200px);
padding: 0 200px;}
.logo{
height: 40px;
width: auto;
position: absolute;
top: 25px;
left: 40px;}
.menu-trigger {
position: absolute;
top: 18.5px;
right: 255px;
height: 55px;
width: 60px;
cursor: pointer;
transition: opacity 130ms ease-out;
-webkit-transition: opacity 130ms ease-out;
-moz-transition: opacity 130ms ease-out;
-ms-transition: opacity 130ms ease-out;}
.menu-trigger:hover {
opacity: 1;}
.menu-trigger h5 {
position: absolute;
right: 10px;
top: 9px;
text-transform: uppercase;
color: #fff;
user-select: none;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
transition: color 300ms ease-out;
-webkit-transition: color 300ms ease-out;
-moz-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;}
.menu-trigger .bar {
position: absolute;
left: 10px;
width: 40px;
height: 5px;
background: #fff;
transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-moz-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-ms-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
.bar--1 {
top: 15px; }
.bar--2 {
top: 25px}
.bar--3 {
top: 35px;}
.open, .open:hover {
opacity: 1 !important;}
.open h5 {
color: #fff;}
.open .bar {
background: #fff; }
.open .bar--1 {
top: 21px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg); }
.open .bar--2 {
opacity: 0;
width: 0px; }
.open .bar--3 {
top: 21px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);}
.navigation {
visibility: hidden;
position: fixed;
z-index: 19;
top: 20px;
left: 0;
width: 100%;
max-width: 100%;
background: #FFFFFF;
box-shadow: 0px 6px 8px rgba(0,0,0,0.13);
padding: 100px 0 20px 0;
opacity: 0;
transform-origin: center top;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 190ms ease-out, transform 40ms ease-out;
-webkit-transition: opacity 190ms ease-out, transform 40ms ease-out;
-moz-transition: opacity 190ms ease-out, transform 40ms ease-out;
-ms-transition: opacity 190ms ease-out, transform 40ms ease-out;}
.navigation .container {
padding: 0 18px; }
.nav-open {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);}
nav {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: row wrap;}
nav h3 {
font-family: 'Univers';
position: relative;
display: block;
margin: 0 0 15px 0;
color: black;
font-size: 1.2em;
font-weight: 600;
text-transform: uppercase;}
nav ul {
position: relative;
padding: 0 0;
margin: 0 0;
width: 100%;
max-width: 100%;
list-style-type: none;}
nav li {
display: block;
color: #919191 !important;
font-size: 0.88em;
font-family: 'helvetica';
margin: 6px 0;
font-weight: 400;
letter-spacing: 0.025em;}
nav li{}
nav li > a > i {
color: #121212;
font-size: 1.4em;
margin-right: 8px;
display: inline-block;
transform: translateY(1px);
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
opacity: 0.6; }
nav .social-link {
float: left;
width: 44px;
height: 44px;
line-height: 48px;
border-radius: 44px;
text-align: center;
margin: 5px;
cursor: pointer;
transition: all 0.25s ease-in-out;}
nav .social-link > i:hover {
color: black; }
nav .social-link:last-child {
margin-right: 0px; }
nav .social-link > i {
color: #B5B5B5;
font-size: 1.57em;
margin: 0 auto; }
nav .col {
min-height: auto;
width: auto;
flex-direction: row;
margin: 0 auto;
margin-bottom: 25px;
text-align: left;
transform: translateY(25px);
-webkit-transform: translateY(25px);
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity; }
.c-in {
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-duration: 860ms;
-webkit-animation-duration: 860ms;
-moz-animation-duration: 860ms;
-ms-animation-duration: 860ms;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.col:first-child {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
-ms-animation-delay: 50ms;}
.col:nth-child(2) {
animation-delay: 130ms;
-webkit-animation-delay: 130ms;
-moz-animation-delay: 130ms;
-ms-animation-delay: 130ms; }
.col:nth-child(3) {
animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
-ms-animation-delay: 210ms; }
.col:nth-child(4) {
animation-delay: 290ms;
-webkit-animation-delay: 290ms;
-moz-animation-delay: 290ms;
-ms-animation-delay: 290ms; }
main {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; }
main .container {
padding: 82px 18px 0 18px; }
#media screen and (min-width: 680px) {
nav .col {
width: 50%;
min-height: 136px;} }
#media screen and (min-width: 992px) {
nav .col {
width: auto;
min-height: 136px;}
.search {
max-width: 235px; } }
#media screen and (max-width: 480px) {
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 100px);
padding: 0 50px;}
.menu-trigger{
right: 20px;
top:15px;}
nav .col {
width: 100% !important;
min-height: 136px; }
nav .social-link{
margin:1px; }
.logo {
height: 30px;
width: auto;
position: absolute;
top: 25px;
left: 9px;
}
}
#media screen and (max-width: 1024px) {
nav{
justify-content: flex-start !important;
align-items: flex-start !important;}
nav .social-link{
margin: 10px; }
nav .col {
min-height: auto !important;
text-align: center; }
.col:nth-child(5) {
display: flex;
justify-content: center !important;
flex-direction: column; }
.search {
max-width: 235px; } }
#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-webkit-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-moz-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-ms-#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
<div class="container">
<nav>
<div class="col">
<h3>Why Tracker?</h3>
<ul>
<li><a id="learnmore" href="#intro-block">Learn more</a></li>
</ul>
</div>
<div class="col">
<h3>Key Features</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>How to Buy</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>FAQ's</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>Where to Buy</h3>
<ul>
<li>Store locator</li>
<li>Trade customer login</li>
</ul>
</div>
<div class="col">
<a href="https://www.facebook.com/OxfordProductsLtd/" target="_blank">
<div class="social-link"><i class="fab fa-facebook-f"></i></div>
</a>
<a href="https://twitter.com/oxfordproducts?lang=en" target="_blank">
<div class="social-link"><i class="fab fa-twitter"></i></div>
</a>
<a href="https://www.instagram.com/oxfordproducts/" target="_blank">
<div class="social-link"><i class="fab fa-instagram"></i></div>
</a>
<a href="https://www.youtube.com/user/OxfordProductsLtd" target="_blank">
<div class="social-link"><i class="fab fa-youtube"></i></div>
</a>
</div>
</nav>
</div>
</div>
<div class="menu">
<div class="container">
<img class="logo" src="Images/Logos/Oxford-tracker-Logo-white.png" alt="Oxford Tracker logo">
<div class="menu-trigger">
<div class="bar bar--1"></div>
<div class="bar bar--2"></div>
<div class="bar bar--3"></div>
</div>
</div>
</div>
Is it possible to link a CSS hover action to another link with jQuery (or pure CSS for that matter)?
I have a combined hover and tooltip animation meant as an overlay over a map. What I want to achieve is having the hover firing when hovering over the city names from the list.
a {
text-decoration: none;
}
a:hover {
color: #d82631;
}
.location {
position: absolute;
}
.kart_dot {
position: relative;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
cursor: pointer;
}
.kart_dot::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background: #d82631 none repeat scroll 0% 0%;
border-radius: 50%;
margin-top: -6px;
margin-left: -6px;
}
.kart_dot:hover::before,
.kart_dot:focus::before,
.kart_dot:active::before {
background-color: #000;
-webkit-transition: all 0.20s ease-in-out !important;
-moz-transition: all 0.20s ease-in-out !important;
-ms-transition: all 0.20s ease-in-out !important;
-o-transition: all 0.20s ease-in-out !important;
width: 18px;
height: 18px;
margin-top: -9px;
margin-left: -9px;
}
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 15px;
width: 160px;
color: #000;
content: attr(data-tooltip);
font-size: 14px;
line-height: 0.9;
}
.tooltip-hoyre:before,
.tooltip-hoyre:after {
bottom: 50%;
left: 100%;
}
.tooltip-hoyre:before {
margin-bottom: 0;
margin-left: -8px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-hoyre:hover:before,
.tooltip-hoyre:hover:after,
.tooltip-hoyre:focus:before,
.tooltip-hoyre:focus:after {
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
.tooltip-hoyre:after {
margin-left: 0;
margin-bottom: -16px;
margin-left: -18px;
}
<div>New York</div>
<div>Washington</div>
<div class="location" style="top: 20%; left: 20%;">
<a href="#new_york" class="tooltip-hoyre" data-tooltip="New York">
<div class="kart_dot"></div>
</a>
</div>
<div class="location" style="top: 38%; left: 20%;">
<a href="#washington" class="tooltip-hoyre" data-tooltip="Washington">
<div class="kart_dot"></div>
</a>
</div>
I've also included this as a fiddle: https://jsfiddle.net/7Lsvdqpx/3/
I have tried several suggested methods without any luck, such as this: Trigger hover with jQuery?
You can do this with pure CSS and no jQuery by using the adjacent selector (~). I've implemented it in the snippet below and had to add a few HTML classes. Here's an example of how that works:
.list-ny:hover ~ .location .dot-ny:before,
.list-ny:hover ~ .location .dot-ny:after,
.list-wa:hover ~ .location .dot-wa:before,
.list-wa:hover ~ .location .dot-wa:after
The above snippet says... if you hover the .list-ny menu item, then select an adjacent .location element that has a .dot-ny:before in it and apply the relevant styles.
Here's the full example with the hover implemented for all relevant properties:
a {
text-decoration: none;
}
a:hover {
color: #d82631;
}
.location {
position: absolute;
}
.kart_dot {
position: relative;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
cursor: pointer;
}
.kart_dot::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background: #d82631 none repeat scroll 0% 0%;
border-radius: 50%;
margin-top: -6px;
margin-left: -6px;
}
.kart_dot:hover::before,
.kart_dot:focus::before,
.kart_dot:active::before,
.list-ny:hover ~ .location .dot-ny .kart_dot:before,
.list-wa:hover ~ .location .dot-wa .kart_dot:before {
background-color: #000;
-webkit-transition: all 0.20s ease-in-out !important;
-moz-transition: all 0.20s ease-in-out !important;
-ms-transition: all 0.20s ease-in-out !important;
-o-transition: all 0.20s ease-in-out !important;
width: 18px;
height: 18px;
margin-top: -9px;
margin-left: -9px;
}
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.list-ny:hover ~ .location .dot-ny:before,
.list-ny:hover ~ .location .dot-ny:after,
.list-wa:hover ~ .location .dot-wa:before,
.list-wa:hover ~ .location .dot-wa:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 15px;
width: 160px;
color: #000;
content: attr(data-tooltip);
font-size: 14px;
line-height: 0.9;
}
.tooltip-hoyre:before,
.tooltip-hoyre:after {
bottom: 50%;
left: 100%;
}
.tooltip-hoyre:before {
margin-bottom: 0;
margin-left: -8px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-hoyre:hover:before,
.tooltip-hoyre:hover:after,
.tooltip-hoyre:focus:before,
.tooltip-hoyre:focus:after,
.list-ny:hover ~ .location .dot-ny:before,
.list-ny:hover ~ .location .dot-ny:after,
.list-wa:hover ~ .location .dot-wa:before,
.list-wa:hover ~ .location .dot-wa:after {
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
.tooltip-hoyre:after {
margin-left: 0;
margin-bottom: -16px;
margin-left: -18px;
}
<div class="list-ny">New York</div>
<div class="list-wa">Washington</div>
<div class="location" style="top: 20%; left: 20%;">
<a href="#new_york" class="tooltip-hoyre dot-ny" data-tooltip="New York">
<div class="kart_dot"></div>
</a>
</div>
<div class="location" style="top: 38%; left: 20%;">
<a href="#washington" class="tooltip-hoyre dot-wa" data-tooltip="Washington">
<div class="kart_dot"></div>
</a>
</div>
Jon's answer is good but if you have many cities you can try mine with jquery.
$('.city a').mouseover(function () {
$('.location').find('a[href="'+$(this).attr('href')+'"]').addClass('hovered');
}).mouseleave(function () {
$('.location').find('a[href="'+$(this).attr('href')+'"]').removeClass('hovered');
});
a {
text-decoration: none;
}
a:hover {
color: #d82631;
}
.location {
position: absolute;
}
.kart_dot {
position: relative;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
cursor: pointer;
}
.kart_dot::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background: #d82631 none repeat scroll 0% 0%;
border-radius: 50%;
margin-top: -6px;
margin-left: -6px;
}
.kart_dot:hover::before,
.kart_dot:focus::before,
.hovered .kart_dot::before,
.kart_dot:active::before {
background-color: #000;
-webkit-transition: all 0.20s ease-in-out !important;
-moz-transition: all 0.20s ease-in-out !important;
-ms-transition: all 0.20s ease-in-out !important;
-o-transition: all 0.20s ease-in-out !important;
width: 18px;
height: 18px;
margin-top: -9px;
margin-left: -9px;
}
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.hovered:before,
.hovered:after,
.tooltip:focus:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 15px;
width: 160px;
color: #000;
content: attr(data-tooltip);
font-size: 14px;
line-height: 0.9;
}
.tooltip-hoyre:before,
.tooltip-hoyre:after {
bottom: 50%;
left: 100%;
}
.tooltip-hoyre:before {
margin-bottom: 0;
margin-left: -8px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-hoyre:hover:before,
.tooltip-hoyre:hover:after,
.tooltip-hoyre:focus:before,
.tooltip-hoyre:focus:after,
.hovered:before,
.hovered:after{
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
.tooltip-hoyre:after {
margin-left: 0;
margin-bottom: -16px;
margin-left: -18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-ny city">New York</div>
<div class="list-wa city">Washington</div>
<div class="location" style="top: 20%; left: 20%;">
<a href="#new_york" class="tooltip-hoyre dot-ny" data-tooltip="New York">
<div class="kart_dot"></div>
</a>
</div>
<div class="location" style="top: 38%; left: 20%;">
<a href="#washington" class="tooltip-hoyre dot-wa" data-tooltip="Washington">
<div class="kart_dot"></div>
</a>
</div>
I am working on a slide-out menu for my website.
When the menu icon is clicked, I'd like to disable the way the menu animates upwards and just have it static. How do I do this?
http://jsfiddle.net/3w539Lct/
I believe the answer is in my CSS, but trial & error has failed so far:
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
/* Menu Button */
.menu-button {
position: fixed;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 1em;
height: 1em;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 1em;
font-size: 0.75em;
border: none;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 50%;
background: #bdc3c7;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
z-index: 1001;
width: 300px;
height: 100%;
background: #373a47;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
-webkit-transform: translate3d(-320px,0,0);
transform: translate3d(-320px,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.menu,
.icon-list {
height: 100%;
}
.icon-list {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.icon-list a {
display: block;
padding: 0.8em;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
.icon-list a span {
margin-left: 10px;
font-weight: 700;
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list,
.show-menu .icon-list a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list a {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.8s;
transition: opacity 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
remove these transitions:
.show-menu .icon-list a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);/*
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);*/
}
.show-menu .icon-list a { /*
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s; */
}
Since the menu items are referenced by the .icon-list class, just remove the relevant styles:
.icon-list {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.icon-list a {
display: block;
padding: 0.8em;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
You might want to keep the following style so that the menu position is not affected:
.icon-list a {
display: block;
padding: 0.8em;
}