Skip to content
Advertisement

Continuous Horizontal HTML page? [closed]

I’ve been poking around and haven’t really found a clear answer to my question, so here goes:

I’m starting to put work into my personal website, and had an idea for a cool implementation. I would like to have a splash page, with a way to scroll down and view an “About Me”, But also be able to scroll to the right to a “blog section”. This wouldn’t be an actual scroll, rather a button pressed that uses js to scroll smoothly to the right.

My current thought process is to set up multiple divs that use 100vh and then set them side-by-side. My question: is there an easier or cleaner implementation of this?

I am including a screenshot for reference

My Layout Idea

Edit: For some clarification, the idea is that this is all really one page and not contained in separate files. It’s honestly just a gimmick but I thought it might be cool to implement

Advertisement

Answer

I’m not sure if that’s what you’re looking for. But i made that example, just messing around with transform and overflow propertys.

good luck and have fun =)

const container = document.querySelector('.container');
const toBlogButton = document.querySelector('.blogBtn');
const toAboutButton = document.querySelector('.aboutBtn');
const toHomeBtns = document.querySelectorAll('.toHome');

function toHome(){
  container.classList.remove('toBlog','toAbout');
}

toBlogButton.addEventListener('click',()=>{
  container.classList.toggle('toBlog');
})

toAboutButton.addEventListener('click',()=>{
  container.classList.toggle('toAbout');
})

toHomeBtns.forEach(element=>{
  element.addEventListener('click',toHome)
})
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
}
.container {
  height: 100vh;
  width: 200vw;
  
  display: flex;
  flex-wrap: wrap;
}
.container > div {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

button {
  padding: 0.3rem;
}

h1 {
  color: #ffffff;
}

.splash {
  background: green;
}
.splash button:nth-child(2) {
  position: absolute;
  right: 0;
}
.splash button:last-child {
  position: absolute;
  bottom: 0;
}

.about {
  background: red;
}
.about button {
  position: absolute;
  top: 0;
}

.blog {
  background: yellow;
  
}
.blog button {
  position: absolute;
  left: 0;
}

.container {
  transition: transform 0.3s ease 0.1s;
}

.toBlog {
  transform: translateX(-100vw);
}

.toAbout {
  transform: translateY(-100vh);
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="container">
      <div class="splash">
        <h1>Splash</h1>
        <button class="blogBtn">Blog</button>
        <button class="aboutBtn">About Me</button>
      </div>


      <div class="blog">
        <button class="toHome">Home</button>
        <h1>Awesome Blog</h1>
      </div>
      
      <div class="about">
        <button class="toHome">Home</button>
        <h1>About Me =)</h1>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement