HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development CSS

CSS How to Snap to the Next Section on a Single Scroll (CODE)

in CSS
Reading Time: 2 mins read
596 32
0
863
SHARES
3.9k
VIEWS
Share on FacebookShare on Twitter

This method works either on scroll up or on scroll down.

Normally, this is how you scroll down a webpage.
In this tutorial, I’m going to show you how to make a single scroll snap down into the next section.

RelatedPosts

How To Create a Beating Heart Shape Animation Using CSS

How To Transition a Height of Zero to a Height of Auto?

How To Apply CSS to Half of a Character

Creating the Markup

First, let’s create our markup.

So there will be 3 sections in this example (you can add more if you want).
Next, I’m going to wrap these sections in a div with a class of wrapper.

Inside the first section, will be a heading and subheading text content.

The second will be a background image.

And the third one is a heading.

Adding the CSS Styles

For the wrapper div, add a 100 width and 100 view height which will take up all our screen dimensions.

For the first section, add a background.
Also, add a 100 width and 100 view height style to our section.

Using flex to center align the text content.

Remove the body’s default margin.
Add a default font family.

Add style to h1 tag and subheading.

The second section will be a background.

The third one is a section with a background and a heading text.

So, on the wrapper div element.
Add an “overflow-y scroll.”
Then scroll-snap-type:y mandatory.

Next, to the child section element, add a scroll snap align start.

Done, when I do the single scroll on the mouse wheel, it snaps right into the next section.

Example HTML Markup

 <div class="wrapper">
    <section class="one">
        <div class="content">
            <h1>The lemon, Citrus limon</h1>
            <p class="subheading">
                The lemon, Citrus limon, is a species of small evergreen tree in the flowering plant family Rutaceae, native to South Asia, primarily North eastern India
            </p>
        </div>
    </section>
    
    <section class="two">
    </section>
    
    <section class="three">
        <h2>Buy Your Lemons Now!</h2>
    </section>
    
</div>

CSS Styles

.wrapper {
   width: 100%;
   height: 100vh;
   overflow-y: scroll;
   scroll-snap-type: y mandatory;
}

.content {
   max-width: 800px;
}

section {
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   scroll-snap-align: start
}

.one {
   background: url(lemon-1.jpg) -10%/contain no-repeat;
}

h1 {
   font-size: 150px;
   line-height: 150px;
   color: #b7923a;
   margin: 0
}

h2 {
   font-size: 80px;
   color: #ae5db5
}

.subheading {
   color: #b7923a;
   font-size: 24px;
}

.two {
   background: url(lemon-dark.jpg) center/cover no-repeat;
}

.three {
   background: url(lemon-2.jpg) center/cover no-repeat;
}

 

Tags: css scroll
Share345Tweet216Share86

Related Posts

How To Create a Beating Heart Shape Animation Using CSS
CSS

How To Create a Beating Heart Shape Animation Using CSS

by 22bulbjungle
December 28, 2022
0

Create the HTML structure Create the HTML structure for the heart shape. We'll use a div element with the class "heart": <div...

Read more
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
Electronics, Smartphone, Computer & Tablet Repair Kit
How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Prevent or Disable Copy and Paste in an Input Field

How To Prevent or Disable Copy and Paste in an Input Field

December 21, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Affiliate Disclosure: 22bulbjungle is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Recent Tutorials

How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • htaccess
  • Javascript
  • jQuery
  • PC Tips
  • Photoshop
  • PHP
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.