BootStrap实现全页滚动效果

实现全页滚动效果

常用的相关CDN

BootStrap:

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

<!--jquery-->

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

 

Smooth.js:

<script src="https://cdn.bootcss.com/smooth-scroll/16.1.0/smooth-scroll.min.js"></script>

/*使用smooth   SmoothScroll( " 类选择器名称  标签名[标签属性] ")*/
const scroll = new SmoothScroll(".nav-ul-style a[href*='#']",{
    /*延迟500毫秒*/
    speed:500
})

 

popper.js 官网：https://popper.js.org/

<script src="https://cdn.bootcss.com/popper.js/1.15.0/esm/popper-utils.min.js"></script>

 

animate.css

<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">

 

WOW.js: 官网：https://www.delac.io/wow/ 

<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>

初始化wow

<script>
        new WOW().init();
 </script>

<!--把WOW插件初始化wow
        前面两个使用次数最多
        data-wow-duration 持续时间
        data-wow-delay:延迟
        data-wow-offset:偏移
        data-wow-iteration:重复次数
   -->

 

字体图标：font-awesome 网址：https://www.bootcss.com/p/font-awesome/

 

<link href="https://cdn.bootcss.com/font-awesome/5.10.0-12/css/all.css" rel="stylesheet">    二选一

<link href="https://cdn.bootcss.com/font-awesome/5.10.0-12/css/all.min.css" rel="stylesheet">

 

----css中背景样式分别如下：-------

background-color：#999999；                                                               //元素的背景色

background-image : url("path/bgFile.gif");                                            //设置背景图像

background-repeat : repeat-x | repeat-y | repeat | no-repeat;              //设置重复方式

background-attachment : fixed | scroll;                                                 //设置背景图片的固定方式

background-position : X轴坐标,Y轴坐标[top,bottom,center,left,right,20px,10%];      //设置背景的左上角位置,坐标可以是以百分比或固定单位

background 各个值的次序依次如下：

background-color | background-image  | background-repeat | background-attachment | background-position

/*图片位置   不拉伸    居中  居中  覆盖 */
background: url("图片地址") no-repeat center center/cover;

-----弹性布局-------
display:flex;                      /*弹性布局flex    设为Flex布局以后，子元素的float、clear和vertical-align属性将失效*/

flex-direction: column;    /* flex-direction 属性规定灵活项目的方向。column  灵活的项目将垂直显示*/

justify-content: center;    /* 弹性布局的左右居中对齐 */

align-items: center;          /*弹性布局的垂直居中对齐*/

text-align: center;            /*文本居中*/

height: 100vh;                 /* vh就相当于整个电脑屏幕  这屏幕一共100vh*/

-----
overflow: hidden;         /*超出部分隐藏*/
overflow-y:scroll;         /*实现y轴滚动*/
font-size: 4rem;            /*rem根据body的font大小来来变化的  这里是body字体的4倍  */
    

 

 

步骤一：首先创建一个HTML项目，并引入BootStrap https://v3.bootcss.com/getting-started/

引入之后创建我们的导航栏

设置颜色，将导航设置为固定定位在浏览器顶部

 

步骤二：section中添加内容，并更改样式

往section内容区添加内容，并更改添加样式

display:flex;  /*弹性布局flex 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效*/

flex-direction: column;  /* flex-direction 属性规定灵活项目的方向。column  灵活的项目将垂直显示*/

justify-content: center;  /* 弹性布局的左右居中对齐 */

align-items: center;  /*弹性布局的垂直居中对齐*/

text-align: center;  /*文本居中*/

height: 100vh;  /* vh就相当于整个电脑屏幕  这屏幕一共100vh*/

 

步骤三：去免费的商用图片网Pexels，找到自己需要的图片做背景

https://www.pexels.com/  

http://www.j-h-k.com/photography-pexels.html

复制图片链接到css中做图片背景

 

步骤四：使用smooth实现效果

到BootCDN中引入smooth的cdn  https://www.bootcdn.cn/

/*使用smooth*/

const scroll = new SmoothScroll(".nav-ul-style a[href*='#']",{

    /*延迟500毫秒*/

    speed:500

})

效果展示：点击的时候会有延迟，缓慢切换

项目源代码：链接：https://pan.baidu.com/s/1pgQhu4aEiVC_jI8UWX1bZw

提取码：ezbx

看完教程之后还是有困惑的，建议去看看相关的视频教程：

https://ke.qq.com/course/384139?taid=3502438456089739