How can I add transitions to CSS slider navigation?

Question

I want to make a slider like horizontal navigation using css and html only

I'm using css :target in order to move to the desired target section.

So far so good... see example the below:

 body { margin: 0; overflow: hidden; } .main { display: -webkit-flex; display: -ms-flexbox; display: flex; } section { position: absolute; width: 100vw; height: 100Vh; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all .3s; } #section1 { background: bisque; transform: translateX(calc(0)); } #section2 { background: #f8cc99; transform: translateX(calc(100vw * 1)); } #section3 { background: #efcfa9; transform: translateX(calc(100vw * 2)); } #section4 { background: #ffe7c9; transform: translateX(calc(100vw * 3)); }

 <div class="main"> <section id="section1"> <div class="container"> <h1>Section 1</h1> </div> <div class="arrow"><a href="#section2">==></a></div> </section> <section id="section2"> <div class="container"> <h1>Section 2</h1> </div> <div class="arrow"><a href="#section3">==></a></div> </section> <section id="section3"> <div class="container"> <h1>Section 3</h1> </div> <div class="arrow"><a href="#section4">==></a></div> </section> <section id="section4"> <div class="container"> <h1>Section 4</h1> </div> <div class="arrow"><a href="#section1">==></a></div> </section> </div>

Then I would like to add an effect for the transition and I'm trying with transform translate and transition translate but unfortunately I can't manage to make it work properly

See what I mean below:

 body { margin: 0; overflow: hidden; } .main { display: -webkit-flex; display: -ms-flexbox; display: flex; } section { position: absolute; width: 100vw; height: 100Vh; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all .3s; } #section1 { background: bisque; transform: translateX(calc(0)); } #section2 { background: #f8cc99; transform: translateX(calc(100vw * 1)); } #section3 { background: #efcfa9; transform: translateX(calc(100vw * 2)); } #section4 { background: #ffe7c9; transform: translateX(calc(100vw * 3)); } #section2:target { -webkit-transform: translateX(0); -ms-transform: translateX(0); } #section3:target { -webkit-transform: translateX(0); -ms-transform: translateX(0); } #section4:target { -webkit-transform: translateX(0); -ms-transform: translateX(0); }

 <div class="main"> <section id="section1"> <div class="container"> <h1>Section 1</h1> </div> <div class="arrow"><a href="#section2">==></a></div> </section> <section id="section2"> <div class="container"> <h1>Section 2</h1> </div> <div class="arrow"><a href="#section3">==></a></div> </section> <section id="section3"> <div class="container"> <h1>Section 3</h1> </div> <div class="arrow"><a href="#section4">==></a></div> </section> <section id="section4"> <div class="container"> <h1>Section 4</h1> </div> <div class="arrow"><a href="#section1">==></a></div> </section> </div>

I can do it with position fixed but I want to keep the horizontal scroll

Any help would be appreciated thanks

Answer 1

You can fix this problem by adding scroll-behavior: smooth to your section container. you don't have to add any transitions for it.

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap'); body{ overflow:hidden; margin:0px; font-family:'Roboto', sans-serif; } .main { height: 100vh; display: flex; overflow-y:hidden; overflow-x: auto; scroll-behavior: smooth; } section { width: 100vw; height: 100%; transition: all .3s; flex-shrink: 0; position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; } section a { color: #ffffff; text-decoration: none; font-size: 18px; background: rgba(0, 0, 0, 0.5); padding: 10px 25px; border-radius: 50px; margin-top: 15px; } section a:hover { color: #ffffff } h1 { color: #ffffff; } #section1 { background: #6200EE; } #section2 { background: #03DAC6; } #section3 { background: #1a1a1a; } #section4 { background: #ff4500; }

 <!DOCTYPE html> <html> <head> <title>Sample</title> </head> <body> <div class="main"> <section id="section1"> <h1>Section 1</h1> <a href="#section2">Go to Section 2</a> </section> <section id="section2"> <h1>Section 2</h1> <a href="#section3">Go to Section 3</a> </section> <section id="section3"> <h1>Section 3</h1> <a href="#section4">Go to Section 4</a> </section> <section id="section4"> <h1>Section 4</h1> <a href="#section1">Go to Section 1</a> </section> </div> </body> </html>

Note: The scroll-behaviour propery supports from the following browser versions:

For more information please visit : CSS scroll-behavior Property

How can I add transitions to CSS slider navigation?

Question

1 answers

solution1
1 ACCPTED 2020-10-16 17:19:40

How can I add transitions to CSS slider navigation?

Question

1 answers

solution1 1 ACCPTED 2020-10-16 17:19:40

solution1
1 ACCPTED 2020-10-16 17:19:40