这是一款非常实用的jQuery和CSS3响应式网站APP操作用户向导插件。通过该用户向导插件,可以一步步的向用户介绍你的网站或APP的主要功能和使用方法。
当你新制作了一个APP应用,免费提供给用户试用的时候,肯定不希望用户抱怨不知道如何去使用。这个用户向导可以一步步的向用户介绍APP的使用方法,对用户来说也是一种非常好的用户体验。下面是该插件的一个GIF动画。
使用方法
HTML结构
该用户向导的HTML结构使用的是一个无序列表:每一个列表项包含一个.cd-more-info
元素,该元素用于放置移动手机版本的标题,简介和图片。另外还有一个<span>
是小圆点指示器。
<body> <button id="cd-tour-trigger">Start tour</button> <ul class="cd-tour-wrapper"> <li class="cd-single-step"> <span>Step 1</span> <div class="cd-more-info bottom"> <h2>Step Number 1</h2> <p><!-- description here --></p> <img src="img/step-1.png" alt="step 1"> </div> </li> <!-- .cd-single-step --> <!-- other steps here --> </ul> <!-- .cd-tour-wrapper --> </body>
注意,.cd-nav
(每个步骤中的前后导航)元素不是直接写在HTML中的,而是后面通过jQuery来插入到文档中。
.cd-app-screen
是用于创建一个虚拟的APP显示界面的背景,实际使用的时候可以不需要这个元素。
CSS样式
在移动手机上,该用户向导是以每台窗口的形式打开的,平滑缩放的效果是通过在列表元素.cd-single-step
上使用CSS3 transition来进行缩放。每一个步骤都会显示一个标题,一个描述信息和一张图片。这些代码非常简单,可以查看源文件了解更多信息。
在桌面设备上(浏览器视口大于1100像素),列表的每一个.cd-single-step
都被设置了一个定位,注意定位使用的是百分比单位。<span>
元素用于制作闪烁的小圆点指示器。闪烁的效果是使用列表项的::after
伪元素并对它们的box-shadow
进行动画。
@media only screen and (min-width: 1100px) { .cd-single-step { position: absolute; border-radius: 50%; visibility: hidden; transition: visibility 0s 0.4s; } .cd-single-step:nth-of-type(1) { /* set tour points positions */ bottom: 40%; right: 30%; } /*define here all the other list items position values*/ .cd-single-step > span { /* dot indicator - visible on desktop version only */ width: 10px; height: 10px; background: #ff962c; transform: scale(0); transition: transform 0.4s; /* replace text with background images */ overflow: hidden; text-indent: 100%; white-space: nowrap; } .cd-single-step .cd-more-info { position: absolute; opacity: 0; transition: opacity 0.4s; } .cd-single-step.is-selected { /* visible step */ visibility: visible; transition: visibility 0s 0s; } .cd-single-step.is-selected > span { transform: scale(1); } .cd-single-step.is-selected::after { animation: cd-pulse 2s infinite; animation-delay: 0.5s; } .cd-single-step.is-selected .cd-more-info { opacity: 1; } } @keyframes cd-pulse { 0% { box-shadow: 0 0 0 0 #ff962c; } 100% { box-shadow: 0 0 0 20px rgba(255, 150, 44, 0); } }
JAVASCRIPT
该用户向导使用jQuery来实现用户导航功能。可以使用键盘,触摸滑动和前后导航按钮来导航。createNavigation()
函数用于向DOM中插入导航按钮元素.cd-nav
。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!