Page Switching Using CSS Negation

Developer
Andy Hoffman
Size
2,514 Kb
Views
48,576
  1. Page Switching Using CSS Negation Previews
  2. Page Switching Using CSS Negation HTML Codes
  3. Page Switching Using CSS Negation CSS Codes
  4. Page Switching Using CSS Negation JS Codes

How do I make an page switching using css negation?

What is a page switching using css negation? How do you make a page switching using css negation? This script and codes were developed by Andy Hoffman on 24 August 2022, Wednesday.

Page Switching Using CSS Negation Previews
IQ Test

Page Switching Using CSS Negation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Page Switching Using CSS Negation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container" id="page-container"> <section class="active"> <h1>Page 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nostrum perferendis culpa harum nobis illum eos inventore architecto sequi dolorem. Laboriosam non nam sequi tenetur dicta! Numquam optio perspiciatis, consequatur?</p> </section> <section> <h1>Page 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nostrum perferendis culpa harum nobis illum eos inventore architecto sequi dolorem. Laboriosam non nam sequi tenetur dicta! Numquam optio perspiciatis, consequatur?</p> </section> <section> <h1>Page 3</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nostrum perferendis culpa harum nobis illum eos inventore architecto sequi dolorem. Laboriosam non nam sequi tenetur dicta! Numquam optio perspiciatis, consequatur?</p></section>
</div>
<button aria-controls="page-container"> Change page
</button> <script src="js/index.js"></script>
</body>
</html>

Page Switching Using CSS Negation - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Karla);
body, button { font-family: 'Karla', sans-serif;
}
.container { margin-bottom: 1em; min-height: 100px;
}
.container section { padding: 1.5em; transition: 0.5s; will-change: transform; transform: translateY(0); box-shadow: 0 6px 15px -2px rgba(0, 0, 0, 0.3);
}
.container section:nth-of-type(1) { background: rgba(255, 0, 0, 0.5);
}
.container section:nth-of-type(2) { background: rgba(0, 255, 0, 0.5);
}
.container section:nth-of-type(3) { background: rgba(0, 0, 255, 0.5);
}
.container section:not(.active) { visibility: hidden; position: absolute; top: 0; opacity: 0; transform: translateY(-10em);
}
button { margin: 0 auto; text-align: center; display: block; background: rgba(0,0,0,.7); border-radius: 28px; border: none; color: white; font-size: 16px; padding: 10px 20px; box-shadow: 0 17px 10px -10px rgba(0, 0, 0, 0.35); transition: 0.3s; cursor: pointer; will-change: transform, box-shadow; margin-bottom: 1em;
}
button:hover { background: rgba(0, 0, 0, 0.8); box-shadow: 0 27px 14px -14px rgba(0, 0, 0, 0.2); transform: translateY(-2px);
}
h1 { margin-top: 0;
}
* section :last-of-type { margin-bottom: 0;
}

Page Switching Using CSS Negation - Script Codes JS Codes

var button = document.querySelector('button'), btnClickHandler = function() { var activePage = document.getElementsByClassName('active')[0], getNextSibling = function getNextSibling(el) { var nextSibling = el.nextSibling; while (nextSibling && nextSibling.nodeType !== 1) { nextSibling = nextSibling.nextSibling } if (nextSibling === null) { nextSibling = document.querySelector('.container section:nth-of-type(1)'); } return nextSibling; }, nextPage = getNextSibling(activePage); activePage.classList.remove('active'); nextPage.classList.add('active'); };
button.addEventListener('click', btnClickHandler)
Page Switching Using CSS Negation - Script Codes
Page Switching Using CSS Negation - Script Codes
Home Page Home
Developer Andy Hoffman
Username antibland
Uploaded August 24, 2022
Rating 3
Size 2,514 Kb
Views 48,576
Do you need developer help for Page Switching Using CSS Negation?

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!

Andy Hoffman (antibland) Script Codes
Name
Animated Stacked Pages
Accessible Tooltip
Here today
Active Buttons
Pure CSS Flexbox Navigation
Simple HTML Canvas with Arrow Key Controls
Battle Donald J. Trump
Flexbox 3-Column Layout
ToDo With Strikethrough
Flexbox Wrapping
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!