跳到主要内容

构建动画分屏登录页面

您的目标网页是您的重要元素网站布局。这是您展示业务或销售产品的第一个真正机会,因此其设计至关重要。着陆页设计有一个专注的目标,称为号召性用语(CTA)。使用颜色和图像来补充行动呼吁和用户体验是必须的。

在本教程中,我们将介绍如何为虚构时尚品牌构建引人入胜的着陆页。它将以分屏设计为中心,具有大型图像和悬停时发生的动画过渡。此页面将有两个明确的号召性用语按钮,我们将使用HTML,萨斯用于样式和使用ES6语法的vanilla JavaScript。

01.设置好

单击右上角的图标可放大图像

如果您正在使用CodePen,请确保在Pen设置中将CSS设置为“SCSS”。您可以通过单击设置选项卡进行此更改,选择“CSS”并在下拉选项中将CSS预处理器更改为SCSS。

然后我们就可以开始添加HTML了。我们将在容器类中包含一个名为“left”的部分和一个名为“right”的部分,其中两个部分都被赋予了一个“screen”类。

02.完成HTML

单击右上角的图标可放大图像

要完成我们的HTML,我们将使用一个为每个部分添加标题H1标签。在下面我们将需要添加一个按钮,如果这是一个真实世界的项目,它将链接到另一个页面。我们将给这一类按键让事情变得美好而简单。

男装时尚

学到更多

女装时尚

学到更多

03.探索Sass变量

我们都喜欢萨斯的一件事是使用变量。即使本机CSS变量获得更多支持,我们也会通过使用Sass来保证安全。我们将把这些放在我们的顶端.scss,你可以选择你想要的任何颜色,但使用RGBA价值观将给我们更大的灵活性。

/ **变量** / $ container-BgColor:#444; $ left-bgColor:rgba(136,226,247,0.7); $ left-button-hover:rgba(94,226,247,0.7); $ right-bgColor:rgba(227,140,219,0.8); $ right-button-hover:rgba(255,140,219,0.7); $ hover-width:75%; $ small-width:25%; $ animateSpeed:1000ms;

04.调整身体造型

首先,我们将清除主体的所有默认填充和边距,然后将字体系列设置为Open Sans。这只会影响按钮,所以我们使用什么字体并不重要。然后我们将宽度和高度设置为100%并确保隐藏在X轴上溢出的任何内容。

html,body {padding:0;余量:0; font-family:'Open Sans',sans-serif;宽度:100%;身高:100%; overflow-x:hidden; }

05.设置章节标题的样式

现在是时候为部分标题选择Google字体了 - 我们选择了Playfair Display。然后使用平移X我们可以确保截面标题始终以X轴为中心。

h1 {font-size:5rem;颜色:#fff;位置:绝对;左:50%;最高:20%; transform:translateX(-50%);白色空间:nowrap; font-family:'Playfair Display',serif; }

06.使CTA脱颖而出

我们的按钮将作为我们的号召性用语,因此这些按钮需要大而大胆,并且位于易于点击的位置。两个按钮都有一个白色边框和一个有趣的过渡效果。两个按钮的默认样式将相同,但我们将在悬停时更改其颜色。

.button {display:block;位置:绝对;左:50%;最高:50%;身高:2.6rem; padding-top:1.2rem;宽度:15rem; text-align:center;白颜色; border:3px solid #fff; border-radius:4px; font-weight:600; text-transform:大写; text-decoration:none; transform:translateX(-50%);过渡:全部.2s;

主按钮将有一个很好的简单悬停效果,我们将使用我们为颜色指定的Sass变量,它将与页面背景颜色相似。

.screen.left .button:hover {background-color:$ left-button-hover; border-color:$ left-button-hover; } .screen.right .button:hover {background-color:$ right-button-hover; border-color:$ right-button-hover;

07.设置容器背景和屏幕

单击右上角的图标可放大图像

容器类将充当我们的页面包装器,我们将其设置为相对位置,因为我们希望将屏幕定位到绝对定位。我们将为容器提供默认的背景颜色,但当然不会看到它,因为我们将为两个屏幕背景设置不同的颜色。

.container {position:relative;宽度:100%;身高:100%; background:$ container-BgColor; .screen {position:absolute;宽度:50%;身高:100%;溢出:隐藏; }}

08.添加背景图片

左侧和右侧部分都将显示图像,您可以找到来自网站的免版税图片UnsplashPixabay要么Pexels(我在本教程中使用过)。为了方便起见,我使用了一个名为imgbb的免费图像托管和共享服务,我们可以在CSS中链接到该服务。

.screen.left {left:0; background:url('https://preview.ibb.co/cpabRm/pexels_photo_450212_1.jpg')center center no-repeat;背景尺寸:封面; &:在{position:absolute;之前内容:“”;宽度:100%;身高:100%; background:$ left-bgColor; }}

页面的右侧也将使用imgbb显示背景图像,我们将背景颜色设置为粉红色。同样,我们将背景大小设置为覆盖。这将允许我们覆盖整个包含元素,在我们的例子中是。屏幕类。

.screen.right {right:0; background:url('https://preview.ibb.co/mToPCR/seth_doyle_82563_1.jpg')center center no-repeat;背景尺寸:封面; &:在{position:absolute;之前内容:“”;宽度:100%;身高:100%;背景:$ right-bgColor; }}

09.添加过渡和悬停效果

我们在两个屏幕上悬停效果的动画速度将由保存变量值的转换控制$ AnimateSpeed,这是1000毫秒(一秒)。然后我们将通过给动画一些缓和来完成,这是一个轻松的进出,这将有助于给我们一个更流畅的动画。

.screen.left,.screen.right,.screen.right:before,.screen.left:before {transition:$ animateSpeed all ease-in-out; }

我们现在想要发生的是,当您将鼠标悬停在左侧屏幕上时,将使用JavaScript向该部分添加一个类(我们将在后面的步骤中编写)。添加此类时,该屏幕将延伸到我们指定的变量的宽度 - 这将是75%,然后右侧将设置为较小的宽度变量(25%)。

.hover-left .left {width:$ hover-width; } .hover-left .right {width:$ small-width; } .hover-left .right:在{z-index:2;之前}

这与左侧完全相同,其中将使用JavaScript在鼠标悬停时添加新类,并且右侧屏幕将相应地伸展。我们还需要确保Z-index的被设置为2所以CTA按钮变得更加突出。

.hover-right .right {width:$ hover-width; } .hover-right .left {width:$ small-width; } .hover-right .left:before {z-index:2; }

10.进入JavaScript

我们将使用一些vanilla JavaScript来帮助我们添加和删除CSS类,我们还将使用一些新的ES6功能。我们需要做的第一件事是声明一些常量变量。

因为我们会用文献不止一次,我们将设置一个名为的常量变量DOC并将文档存储在其中,这样我们就可以保持“文档”这个词的简洁。

Const Doc = Document;

现在我们需要设置另外三个常量来存储。对。剩下。容器选择。我们使用常量的原因是因为我们知道我们不想改变它们的值,所以使用常量是有意义的。现在设置了这些,我们可以继续为它们添加一些鼠标事件。

const right = doc.querySelector(“。right”); const left = doc.querySelector(“。left”); const container = doc.querySelector(“。container”);

使用剩下我们在最后一步声明了常量变量,现在我们可以为它添加一个事件监听器。这个事件将是的mouseenter事件而不是使用回调函数,我们将使用另一个名为的ES6功能箭头函数'(()=>)

//在hover上向容器元素添加一个类left.addEventListener(“mouseenter”,()=> {container.classList.add(“hover-left”);});

11.添加和删除类

在最后一步中,我们的事件监听器添加了一个的mouseenter以主容器类为目标的事件,并添加一个名为的新类悬停左到左侧部分。通过添加这个名称,我们现在需要在将它们悬停时将其删除。我们将通过使用鼠标离开事件和。去掉()方法。

//删除悬停时添加的类left.addEventListener(“mouseleave”,()=> {container.classList.remove(“hover-left”);});

到目前为止,我们已经在左侧屏幕上完成了所有操作。现在我们将完成JavaScript并添加和删除右侧部分元素的类。我们再次使用箭头函数语法来保持一切看起来整洁。

right.addEventListener(“mouseenter”,()=> {container.classList.add(“hover-right”);}); right.addEventListener(“mouseleave”,()=> {container.classList.remove(“hover-right”);});

12.使其响应

Click the icon in the top right to enlarge the image

单击右上角的图标可放大图像

任何项目 - 无论大小,都应该避免做出回应。因此,在此步骤中,我们将向CSS添加一些媒体查询,并使这个小项目尽可能地适应移动设备。值得一试原始CodePen看看它是如何工作的。

@media(max-width:800px){h1 {font-size:2rem; } .button {width:12rem; }

我们确保当页面宽度降至800px时,字体和按钮的大小会减小。因此,为了完成任务,我们也希望定位高度,并确保当页面高度低于700px时,我们的按钮向下移动页面。

@media(max-height:700px){.button {top:70%; }}

网页设计活动生成伦敦返回2018年9月19日至21日,提供行业领先的演讲者,一整天的研讨会和宝贵的交流机会 - 不要错过它。立即获取您的Generate门票

本文最初发表于网络杂志问题305现在订阅

阅读更多:



翻译字数超限