Layout: OnePage only with HTML and CSS (with transition)

Question

Layout: OnePage only with HTML and CSS (with transition)

Navigation

#1 by (1 votes)

1

I'm creating a " OnePage " layout, though I'd like to do it with CSS and HTML only. The idea is when the user clicks the next one it will be moved to "section 01", this is already done, but I am not able to put the trasition effect so that there is "fluency" when changing section, as if the page scroll down and not simply skip to the next section.

Type this site effect Paypal

NOTE: I found some solutions using input radio e label , but I believe there should be some way more direct.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  font-size: 14px;
  width: 100%;
  font-family: Helvetica, sans-serif
}

.container-center {
  width: 500px;
  height: 100%;
  margin: 0 auto;
  font-size: 350%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  .text {
    text-transform: uppercase;
    color: grey;
    font-weight: 600;
  }
  .next {
    font-size: 50%;
    text-transform: uppercase;
    color: yellowgreen;
  }
}

nav {
  width: inherit;
  height: 72px;
  background-color: #d9d9d9;
}

#hero {
  width: inherit;
  height: 610px;
  background-color: #e9e9e9;
}

footer {
  width: inherit;
  height: 80px;
  background-color: #d9d9d9;
}

#section-01 {
  height: 700px;
  transition: all .3s ease-out;
}

<nav>
  <div class="container-center"></div>
</nav>

<section id="hero">
  <div class="container-center">
    <span class="text">Section Hero</span>
    <a href="#section-01" class="next">Next</a>
  </div>
</section>

<footer class="footer">
  <div class="container-center"></div>
</footer>

<section id="section-01">
  <div class="container-center">
    <span class="text">Section - 01</span>
  </div>
</section>

html css

asked by anonymous 11.06.2018 / 23:34

1 answer

Problem creating a transparent background image Function nodejs, operation

score 1 · Accepted Answer

You can do only with HTML and CSS, you can use scroll-behavior: smooth; in css of html {}

See the example below for a better understanding.

html {
    overflow-y: scroll;
    scroll-behavior: smooth;
}     
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
* {
  margin: 0;
  padding: 0;
}

html,
body {
  font-size: 14px;
  width: 100%;
  font-family: Helvetica, sans-serif
}

.container-center {
  width: 500px;
  height: 100%;
  margin: 0 auto;
  font-size: 350%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  .text {
    text-transform: uppercase;
    color: grey;
    font-weight: 600;
  }
  .next {
    font-size: 50%;
    text-transform: uppercase;
    color: yellowgreen;
  }
}

nav {
  width: inherit;
  height: 72px;
  background-color: #d9d9d9;
}

#hero {
  width: inherit;
  height: 610px;
  background-color: #e9e9e9;
}

footer {
  width: inherit;
  height: 80px;
  background-color: #d9d9d9;
}

#section-01 {
  height: 700px;
  transition: all .3s ease-out;
}

  <nav>
    <div class="container-center"></div>
  </nav>
  
  <section id="hero">
    <div class="container-center">
      <span class="text">Section Hero</span>
      <a href="#section-01" class="next">Next</a>
    </div>
  </section>
  
  <footer class="footer">
    <div class="container-center"></div>
  </footer>
  
  <section id="section-01">
    <div class="container-center">
      <span class="text">Section - 01</span>
    </div>
  </section>