ios浏览器滚动交互太差
This article was sponsored by Webydo. Thank you for supporting the sponsors who make SitePoint possible.
本文由 Webydo 赞助 。 感谢您支持使SitePoint成为可能的赞助商。
Webydo is a professional web-based application for designers who want to create and manage web and mobile sites for their clients, without writing code. We’ve written about Webydo before on SitePoint, but a lot has changed in the product since then. Last week, Webydo announced their new platform which includes an all-new interface, improved stability and performance, and all the tools needed to create fast and responsive websites. What’s more, Webydo’s website received a complete overhaul by Hello Monday, a world-renowned design agency.
Webydo是一款专业的基于Web的应用程序，适合希望在不编写代码的情况下为其客户创建和管理Web和移动网站的设计师。 之前我们已经在SitePoint上撰写过有关Webydo的文章 ，但是从那时起，该产品发生了很多变化。 上周，Webydo宣布了他们的新平台，其中包括一个全新的界面，改进的稳定性和性能以及创建快速响应的网站所需的所有工具。 而且，Webydo的网站受到世界知名设计机构Hello Monday的全面检查。
I knew of Webydo long before I tried it out for myself because I follow their customer’s web experiments on Behance, but when I saw this Game Of Thrones -inspired website by Sarit Evrani – a well known Israeli digital artist – which tests the capabilities of Webydo’s parallax tools, I had to try it for myself.
我很早就对Webydo有所了解，因为我跟随他们的客户在Behance上进行的网络实验，但是当我看到由著名以色列数字艺术家Sarit Evrani启发的这个受《权力的游戏》启发的网站时 ，它测试了Webydo的功能视差工具，我必须自己尝试一下。
Parallax scrolling is when a background (either the whole website body, or a specific section) is moving at a slower rate than the foreground elements, creating a 3D effect as you scroll down the page. Despite a degree of backlash from critics regarding its user experience, it looks wonderful when executed correctly.
视差滚动是指背景(整个网站正文或特定部分)的移动速度低于前景元素的移动速度，并在您向下滚动页面时产生3D效果。 尽管批评家对其用户体验产生了强烈反对，但如果正确执行，它看起来很棒。
Head over to the Webydo website and start a free trial. You’ll be asked to either start from scratch, start with an already-defined structure of your choosing, or else choose an entire template (with minimal faffing around!).
前往Webydo网站并开始免费试用。 系统会要求您要么从头开始，要么从您选择的已经定义的结构开始，要么选择整个模板(最少的麻烦！)。
Choose Design, and then select the Maddog Sound “Parallax” theme . Parallax has already been activated in this template, and we’ll use it to quickly understand how it works before trying out our own example. Right away you’ll notice the rulers and floating Layers interface. If you’ve used any kind of design tool before, then Webydo will feel familiar to you.
选择“ 设计” ，然后选择“ Maddog声音 ”“视差””主题。 在此模板中，已经激活了视差功能，在尝试我们自己的示例之前，我们将使用它来快速了解其工作原理。 立即您会注意到标尺和浮动图层界面。 如果您以前使用过任何类型的设计工具，Webydo都会对您感到熟悉。
When you select the knob image in the layout, two things will happen. A box will surround it, signalling that you’ve selected it, and the Properties Panel will open up. Under “Parallax Scrolling Animation”; the first setting is Target, which is where the image will end up at the end of the scroll.
当您在布局中选择旋钮图像时，将发生两件事。 将在其周围出现一个框，表明您已选择它，然后将打开“ 属性面板” 。 在“视差滚动动画”下； 第一个设置是Target ，它是图像在滚动结束时结束的位置。
You can change the top and left offset values to customise the animation’s direction, but I find it easier to simply drag the blue-bordered box (adjacent to our selection) instead. We won’t change anything here – simply click “Publish” in the top-right corner to see the animation in action. From A to B, easy right?
您可以更改顶部和左侧偏移值以自定义动画的方向，但是我发现，只需拖动蓝色边框(与我们的选择相邻)，会更容易。 我们不会在此处进行任何更改-只需单击右上角的“发布”即可查看正在播放的动画。 从A到B，容易吗？
Here’s a gif showing off this method:
这是展示此方法的gif：
For this test-drive, I decided to try something ambitious. Among other things, Terry Gilliam is famous for the animations he made for Monty Python’s Flying Circus. His work often used a mish-mash of cutout vintage photos and artwork mashed together in an irreverent, slapstick fashion.
对于这次试驾，我决定尝试一些雄心勃勃的事情。 除其他外，特里·吉利姆(Terry Gilliam)以为Monty Python的《飞天马戏》(Flying Circus)制作的动画而闻名。 他的作品经常用剪裁过的老式照片和艺术品混搭在一起，以一种不敬虔，闹剧的方式混在一起。
I wanted to pay tribute to that style.
我想向这种风格致敬。
To begin, I collected some an old-timey stage graphic that suited the tone. After I imported it, I moved it to the front of the composition. Right-clicking on any image lets you set its position to either fixed (‘Pin it) or parallax scrolling.
首先，我收集了一些适合音调的老式舞台图形。 导入后，将其移至合成的前面。 右键单击任何图像，可以将其位置设置为固定(“固定”)或视差滚动。
I pinned the stage in position, locking it off from any scrollwheel action. I also found it good practice to keep it out of the way by temporarily hiding it using the layers panel.
我将平台固定在适当的位置，将其锁定在任何滚轮操作之外。 我还发现通过使用“图层”面板暂时将其隐藏起来是一种很好的做法。
Next I imported an Edwardian bicycle lady image and set it to parallax scrolling. You’ll now see graphic has a line leading to a blue dotted line box – this is the animation path and finishing position of your image.
接下来，我导入了爱德华七世时代的自行车女士图像，并将其设置为视差滚动。 现在，您将看到图形的一条线通往一个蓝色的虚线框-这是图像的动画路径和结束位置。
Offset the position of the secondary box a little, and hit the ‘publish’ button at the top right and a live demo will be launched. Scroll the page and the image should move between its original position and the position of that blue box.
稍微偏移辅助框的位置，然后单击右上角的“发布”按钮，将启动实时演示。 滚动页面，图像应在其原始位置和该蓝色框的位置之间移动。
If you’re accustomed to standard timeline-based animation suites, this might take some adjustment at first.
如果您习惯于基于标准时间轴的动画套件，那么一开始可能需要进行一些调整。
I wanted my cyclist to travel across the stage so I stretched the finishing position box from right to left.
我希望骑自行车的人跨过舞台，所以我从右向左伸展了终点位置框。
As we’re scrolling the screen, to keep the cycle path horizontal, we need to compensate by angling the path down as well as across.
在滚动屏幕时，为了保持循环路径水平，我们需要通过使路径向下以及对角倾斜来进行补偿。
Getting this angle correct did take some trial and error and you’ll have to Hit ‘Publish’ each time to test your work.
正确调整角度确实需要反复试验，并且每次都必须单击“发布”来测试您的工作。
On the right there is a properties panel that lets you control your animation. At the bottom of the panel there’s an ‘Add Motion Path’ button that lets you chain simpler animation parts into a more complex sequence.
在右侧，有一个属性面板，可让您控制动画。 在面板底部，有一个“添加运动路径”按钮，可用于将较简单的动画零件链接为更复杂的序列。
The other major controls include:
其他主要控件包括：
This control how much motion is generated by each scroll unit. The default is 1.5.
该控件控制每个滚动单元产生多少运动。 默认值为1.5。
Along with the position change, you can add apply separate effects to each motion including:
除了位置更改外，您还可以为每个动作添加单独的效果，包括：
Delay before 延迟之前 Delay after 延迟后 Fade to 淡入 Rotate 旋转 Scale 规模I applied the rotate filter to my cyclist to get the bike up on one wheel.
我将旋转滤镜应用到骑自行车的人身上，使自行车骑在一个轮子上。
The final important component to understand is the timing control. Each parallax image has a black horizontal line attached to its top edge (see screenshot above).
最后要了解的重要组件是时序控制。 每个视差图像的顶部边缘都有一条黑色的水平线(请参见上面的屏幕截图)。
By default this line sits level with the top of the window, and while it does this, the animation will begin with the first scroll detected.
默认情况下，此行位于窗口顶部的水平位置，并且在执行此操作时，动画将从检测到的第一个滚动开始。
However if you drag this line down the screen you’ll be delaying that animation until that line hits the upper edge of the screen. This took me a little time to wrap my head around, but parallax effects are a different kind of animation and so require a slightly different approach.
但是，如果将此行拖到屏幕下方，则会延迟该动画，直到该行到达屏幕的上边缘为止。 这花了我一些时间来缠住我的头，但是视差效果是一种不同的动画，因此需要稍微不同的方法。
After making a few duplicates of the cyclist, but with differing speeds and paths, I imported the famous Monty Python foot, amongst some other themed images.
在制作了一些自行车骑行者的副本之后，但是使用了不同的速度和路径，我在其他一些主题图像中导入了著名的Monty Python脚。
The animation process is similar for the newly-imported items. Rather than stepping through each step, I think it’s more useful to go through some general tips I discovered along the way.
新导入的项目的动画处理过程相似。 我认为，逐步完成我发现的一些一般性提示比分步执行更有用。
And here’s a gif to show off the quick demo we came up with.
这是一个gif，以展示我们想到的快速演示。
Here’s a link to the site (works best on Firefox)
这是网站的链接(在Firefox上效果最佳)
So, there it is. Is it time to load it up and start producing the next South Park feature film?
就是这样。 是时候加载它并开始制作下一个南方公园故事片了吗？
Hopefully, one day. There was quite a lot of trial and error to get complex timed sequences to play out — but this will hopefully change soon. This tool is under active development, remember.
希望有一天。 要进行复杂的定时序列播放需要大量的反复试验，但是希望很快就会改变。 请记住，该工具正在积极开发中。
On the other hand, if you’re looking to integrate more subtle parallax effects with your standard CMS content, this might be just the thing you’re looking for. With a little practice, you can produce the kind of tasty little sequences that would usually require a more in-depth HTML5 knowledge to pull off.
另一方面，如果您希望将更多细微的视差效果与标准CMS内容集成在一起，那么这可能正是您想要的。 稍加练习，您就可以生成那种美味的小序列，通常需要更深入HTML5知识才能实现。
Webydo’s visual interface is definitely a suitable solution for professional designers who find lines of code to be a headache. In only a few clicks we can create otherwise complex features, like complex, pixel-perfect parallax effects, and publish them in a flash. Give it a try, what do you have to lose?
Webydo的可视界面绝对是发现代码行令人头疼的专业设计师的合适解决方案。 只需单击几下，我们就可以创建其他复杂的功能，例如复杂的，像素完美的视差效果，然后将其发布。 试试看，您要失去什么？
翻译自: https://www.sitepoint.com/code-free-scrolling-animations-and-micro-interactions-with-webydo/
ios浏览器滚动交互太差
