您好,承接汉中网站建设,网站制作,网站设计,价格优惠! 建站知识 | 建站流程 | 联系方式
汉中网站设计,制作
当前位置:汉中网站建设 > 优化知识 >

创建一个CSS3和jQuery滚动屏幕

更新时间:2018-12-19 作者:zhw888来源:汉中网站建设

捕捉您的网站的访客的注意力的好方法是“闪屏”或“介绍”屏幕,做一个成功的人是非常困难的,他们可以直观醒目、美观,让用户想滚动学习更多。这种风格的介绍很好地工作在单页滚动的网站。或网页设计已经与平面设计趋势为时尚风格的旗帜。它也可以做一个漂亮的“背景视频”式的介绍,这也是所有愤怒的时刻很有用。

汉中网站制作想告诉你今天是达到这种效果的基本方法,你可以很容易地修改 做出好看的介绍网站的体验。


标记
我们要尽量保持标记这很简单。 这样可以实现对原有网站以及新项目。
所以基本上我们想做一下。一个类的飞溅和另一类包装。(包装类可能已经存在的一些方式,如果你执行这一个预先存在的网站,那么你可能需要不同的类的名称)。
够了就要这些。这就是我们需要的语义。但很明显,我们会加入一些虚构的内容和标题,我们看的东西,在我们的演示。我们还需要一些箭头添加初始屏幕向用户展示他可以向下滚动(这将是我们的方法的介绍屏幕使消失而带来的主要内容)。
所以这里的简单标记都会在我们身上的标签:

让我们解释这里发生的事情的更详细一点:我们开始我们的飞溅区里面,我们有一个标题,和我们的滚动指示器(这里是一个箭头的形象,但可以是任何你希望它是明显的)。然后我们关闭div,开启另一类包装。在我们刚刚得到了一些通用的网站内容将每个案件都是不同的,但是我们会保持它的简单:一个标题,一些导航,主内容区和页脚。然后从谷歌的API,我们将使用它的功能是jQuery,并链接到另一个js文件是我们自己的,我们可以写我们的jQuery代码。
你可能也注意到类的名字消失在屏幕面积。我们将使用这个类添加一些漂亮的CSS3动画的某些元素,使导语更强大。很明显,如果你看看结果现在不会真的是什么,我们需要的风格,现在的一切。 说到这 让到CSS…

款式
再让我们试着保持款式简单实用。这是所有普通的CSS。首先,让我们开始与类的名字。在褪色。(这是说在我们的CSS文件,顶部,我们可以宣布不同的动画延迟时间对其他元素的下文。)

我们宣布每个第一和调用我们的动画渐显。它从一个0的不透明度为1。然后我们的目标类的名称直接指定它有0的不透明度。叫离子动画,我们只是说明,让它持续0.3s,给它一个延迟 0.5s。
现在让我们看看我们的CSS splash页面需要:

我们找一个背景图像(这里只是黑白照片一条街),我们的中心,也确保它涵盖什么尺寸整个屏幕,并使其附着这意味着它不会向前滚动。然后我们给它一个固定的位置,并指定要从顶端,距离0,底部和左因此它充满整个浏览器窗口。然后我们会给它一个最小高度为什么我们会把里面会绝对定位。确保它有一个高的Z为我们想要它出现在网页上的其他内容(现在将直接放在我们的屏幕,因为它有一个固定的位置 )。

联系人:张先生

电话:18691956227(微信同步)

QQ咨询:201956809