Page anchor point jump smooth transition

  • No longer need to write a bunch of JS to handle scrollbars because of a simple page to page jump
<style>
html{
  scroll-behavior: smooth;
}
</style>
<div id="id2">
    <a href="#id1">go id1</a>
</div>
<div style="height: 3000px;"></div>
<div id="id1">
    <a href="#id2">go id2</a>
</div>
Copy the code

CSS to achieve single-page scrolling simple solution

First, go straight to the code

<style>
    .wrapper{
      height: 100vh;
      overflow: auto;
      scroll-snap-type: y mandatory;
    }
    .section{
      height: 100vh;
      scroll-snap-align: center;
      font-size: 30px;
      text-align: center;
      line-height: 100vh;
    }
</style>

<div class="wrapper">
    <div class="section">1</div>
    <div class="section">2</div>
    <div class="section">3</div>
    <div class="section">4</div>
    <div class="section">5</div>
</div>
Copy the code

Key code -scroll-snap-type

  • scroll-snap-typeProperty defines how a snap point in a scroll container is strictly enforced.
  • scroll-snap-typeWith two parameters, the first representative capture the direction, the second representative patterns [mandatory | proximity].mandatoryMeans to force the element to stay where we specify after the scrolling is over.
  • In a child element, usescroll-snap-alignTo mapping to the bearing, have [start | center | end] three values are optional
  • Generally speaking, setting the child container and parent container to the same height makes it easy to achieve full-page scrolling effect, which is suitable for most major browsers

Add shadow to PNG image

Filter: drop-shadow(2px 4px 8px #585858);

<style>
    img{
      display: block;
      width: 300px;
    }
    .shadow{
      filter: drop-shadow(2px 4px 8px #0f0);
    }
</style>

  <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
  <img class="shadow" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
Copy the code

The effect is as follows:

Effect of typing

  • Ch is equal to a width of 0, which, in general, is a measure of the current font size
    • The premise needs to set the font of the same width, otherwise the measurement may be inaccurate
    • Suitable for all Chinese or all English places
    • 1ch = 1 English = 1 number
    • 2ch = 1 Chinese
  <style>
    .text{
      font-family: Consolas, Monaco, monospace;
      width: 10ch;
      overflow: hidden;
      animation: typing 2s steps(10), blink .5s step-end infinite alternate;
      border-right: 2px solid;
      white-space: nowrap;
    }
    @keyframes typing {
      0% {
        width: 0; }}@keyframes blink {
      50%{
        border-color: transparent; }}</style>
  <div class="text">0000000000</div>
Copy the code

Viscous title

The effect can be directly referenced to the novice tutorial

Note that the height of the parent element cannot be lower than the height of the sticky element, such as the code below. If the height of.w is less than 1020px, it is invalid

  <style>
    .w{
      height: 1500px;
    }
    .p{
      position: sticky; 
      top: 20px;
    }
    .h{
      background-color: #cecece;
      height: 1000px;
    }
  </style>
  
  <div class="w">
    <div class="h"></div>
    <div class="p">The title</div>
    <div class="h"></div>
  </div>
Copy the code

Beautify console printing

Add CSS styles when using console.log

  • In the first content add%cYou can add CSS styles to it
  • a%cFor a pattern, only %c in the first argument is valid
  • The supported syntax has the following effects:
console.log('%c red %c green','color: red','color: green')
console.log('%c red %c green %c none','color: red','color: green')
console.log('%c red %c green','color: red', 'color: green', 'color: blue')
Copy the code

Browser Compatibility Query