fullPage+CSS3 实现全屏平滑切换网页实例 VIP

成为vip会员,免费看所有精品课程
  • 目录

    目录 收起>

    该课程通过全屏滚动插件 fullPage 和 CSS3 动画,制作一个全屏平滑滚动的网页。着重讲解 fullPage 常用的配置项及 HTML5 的布局方式,初步了解 fullPage 与 HTML5 完美的融合。重点学习 CSS3的动画,让全屏滚动网页的搭建既简单又便捷。

    1.分析案例知识点,并搭建网页框架 00:25:42

    通过网站案例,分析所使用的知识点,并且将网站案例的大框架进行搭建,使用 fullPage 配置基础参数。

    2.网页内部元素的创建 00:25:20

    将每一区块的内容进行搭建,修改 CSS 样式,摆放于网页的合适位置。调试侧栏导航与顶部导航条,让其可以控制网页的全屏翻动

    3.CSS3 基础动画切换效果 00:14:41

    使用 CSS3 的 transition 与 transform 制作绚丽的动画切换效果,主要讲解简单的水平及垂直逐次切入效果。

    4.CSS3 自定义动画的效果 00:16:00

    使用 animation 自定义动画,并且结合 fullPage 插件,让切入效果更加的多样化。

    5.细节调试及课程总结 00:08:18

    使用 transform 的 3D 效果完成最后一页的切入效果,并且对该课程做最后的总结。
  • 提问

    提交问题
  • 下载

  • 线路

    视频太卡?试试切换线路 √ 线路1 √ 线路2
  • 收藏

    收藏课程
  • 分享

连播

连续播放

关灯

关灯模式
视频加载太慢?

我们有两条线路可以选择,试试切换线路吧

fullPage+CSS3 实现全屏平滑切换网页实例

5课时,90分钟
写代码的平面师
写代码的平面师

极客学院签约布道师

课程背景:
如今全屏平滑滚动网页非常流行,使用 fullPage 这款插件很轻松便可实现,基础课程已经概括完毕,该节课程就通过一个网站实例,详细讲解 fullPage 插件的使用方式,并且讲 CSS3 应用到网页实例中,让你枯燥的网页通过全屏滚动插件与 CSS3 的结合,而活跃起来。

核心内容:
1.HTML5 布局标签的使用
2.fullPage 的常用参数调用
3.CSS3 动画及过渡的使用

软件环境:Dreamweaver

是否提供资料:

课程等级:中级

适合人群:
具有 HTML5 基础
  • 技术问答
  • 1

    分析案例知识点,并搭建网页框架

    25:42

    通过网站案例,分析所使用的知识点,并且将网站案例的大框架进行搭建,使用 fullPage 配置基础参数。

  • 2

    网页内部元素的创建

    25:20

    将每一区块的内容进行搭建,修改 CSS 样式,摆放于网页的合适位置。调试侧栏导航与顶部导航条,让其可以控制网页的全屏翻动

  • 3

    CSS3 基础动画切换效果

    14:41

    使用 CSS3 的 transition 与 transform 制作绚丽的动画切换效果,主要讲解简单的水平及垂直逐次切入效果。

  • 4

    CSS3 自定义动画的效果

    16:00

    使用 animation 自定义动画,并且结合 fullPage 插件,让切入效果更加的多样化。

  • 5

    细节调试及课程总结

    08:18

    使用 transform 的 3D 效果完成最后一页的切入效果,并且对该课程做最后的总结。