css文字圖檔動畫_文字圖像互動動畫

css文字圖檔動畫

Following on from last week’s issue (and inspired a bit by receiving the latest Type Directors Club annual in the post), I spent some more time looking at vintage posters. The spark came about when I went looking through the last couple emails from DJR’s Font of the Month Club. I discovered that January’s edition contained a bonus: a new, more complete version of Gimlet in variable format, complete with axes for width, weight, italic, and optical size!

從上周的刊物開始(後來收到了最新的Type Directors Club的啟發)，我花了更多時間看老式的海報。 當我浏覽DJR的“本月俱樂部字型”中的最後幾封電子郵件時，就産生了火花。 我發現一月份的版本有一個好處：可變格式的Gimlet的新版本更加完整，并帶有寬度，重量，斜體和光學尺寸的軸！

I’ve loved Gimlet since I first saw an early version just after variable fonts were introduced, and have used it for various demos over the years. I love its quirky 60’s vibe, and have always thought it reminded me of period poster and advertising design.

自從在引入可變字型之後就首次看到早期版本以來，我就一直喜歡Gimlet，并且多年來已将其用于各種示範。 我喜歡60年代古怪的氛圍，并且一直認為它讓我想起了時代海報和廣告設計。

So that’s where we went.

這就是我們去的地方。

搜尋很少看到的東西 (Searching for what’s seldom seen)

One of the most common and visually arresting techniques in graphic design is creating the illusion of interplay between text and image. The shifting of typographic forms before and behind photographic elements creates dynamic tension, sparking interest and examination. These techniques have been in use for hundreds of years in illustration, magazine and poster design, and can even be seen in the title screen of the latest streaming sensation, Cheer.

圖形設計中最常見且視覺上引人注目的技術之一是創造文本和圖像之間互相作用的幻覺。 攝影元素前後的印刷形式的變化産生了動态的張力，激發了人們的興趣和審視。 這些技術已經在插圖，雜志和海報設計中使用了數百年，甚至可以在最新的流媒體轟動聲Cheer的标題螢幕中看到。

Notice how the letters intertwine with the squad 注意字母如何與小隊交織

Have a look at this poster from Schmid/Widmaier (via the TDC annual). Notice how the abstracted letterforms drift in front of and behind the hand.

看看Schmid / Widmaier的這張海報(通過TDC年報)。 注意抽象的字母形式如何在手的前面和後面漂移。

A really striking design that’s part of a set of four from this talented duo 一個非常引人注目的設計，是這個才華橫溢的二人組中的四個的一部分

Or this stunning travel promotion by Cussetti. Note the way the flowers curl around the ‘P’ in Paris. Subtle, but lovely.

或者是庫塞蒂(Cussetti)的這次驚人的旅行促銷 。 請注意花朵在巴黎的“ P”周圍卷曲的方式。 微妙，但可愛。

A really gorgeous poster overall, but the flowers curling around the ‘P’ is particularly beautiful 總體而言，這是一個非常漂亮的海報，但卷曲在“ P”上的花朵特别漂亮

那麼您為什麼在網絡上呢？ (So wherefore art thou on the web?)

The simple answer is that we don’t see this kind of interplay between text and image because it used to be hard to do. We’re conditioned on the web to keep things simple: images in boxes, text on top. Usually on a semi-transparent block. Always optimizing for a system-driven, content-managed, ever-changing world of new posts published every day with no time for design or development intervention.

簡單的答案是我們看不到文本和圖像之間的這種互相作用，因為它過去很難做到。 我們以網絡為條件，使事情變得簡單：框内的圖檔，頂部的文字。 通常在半透明塊上。 始終針對每天釋出的新文章而進行系統驅動，内容管理，不斷變化的世界進行優化，而沒有時間進行設計或開發幹預。

While it would be impractical to think every page, promotion, or post could be designed and custom-coded, I’ve written about a middle ground before — and this is another good example. The core text content doesn’t need much if anything modified, but spending a little bit of time customizing a clip-path mask for the text overlaying the image can create some really dynamic effects without requiring very much code.

盡管認為每個頁面，促銷或文章都可以設計和自定義編碼是不切實際的，但我之前已經寫過一篇中間文章，這是另一個很好的例子。 核心文本内容并不需要太多修改，但是花一點時間為覆寫圖像的文本自定義剪切路徑蒙版可以建立一些真正的動态效果，而無需太多代碼。

The photo as posted on Instagram in all it’s filtered glory 這張照片釋出在Instagram上，充滿了榮耀

捕捉旅行蟲 (Catching the travel bug)

Taking cues from the poster examples, I dug though my photo archive and found one I posted to Instagram a few years ago on my way back from Baltimore. It’s got a really graphic quality to it that seemed like it would fit. I decided on a horizontal crop that focused on the tail. Setting the image as a background sized to 100% kept it filling the container, and let me set up the basic layout.

從海報示例中擷取線索，我翻閱了我的照片檔案，并發現了幾年前我從巴爾的摩回來時在Instagram上釋出的照片​​。 它具有真正的圖形品質，看起來很合适。 我決定選擇側重于尾巴的水準作物。 将圖像設定為100％的背景大小可以使其填充容器，并讓我設定基本布局。

.poster {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/79D7C2EE-7F10-4AEB-9434-8988EFC7BD52.jpeg);
  background-repeat: no-repeat;
  background-size: 100%;
  ...
}.poster-mask {
  ...
  height: 100%;
  width: 100%;
  z-index: 1;
}h1 {
  color: rgba(0,0,67,.7);
  font-family: "Gimlet";
  font-size: 15vw;
  font-stretch: 75%;
  font-weight: 900;
  font-variation-settings: 'ital' 1;
  line-height: 1.1;
  padding: 5vw 2vw 0 2vw;
  width: 75vw;
}
           

Text and image without any masking 文字和圖像沒有任何遮罩

Shape editor in Firefox Dev Tools Firefox開發工具中的形狀編輯器

Now what I want to do is allow the text to fall behind the tail of the plane without resorting to adding separate image files with different transparency to sandwich the text (though that’s a pretty interesting technique as well). Enter CSS attribute ‘clip-path’ (and it’s vendor-prefixed cousin to ensure compatibility w/Safari). I found a good article on CSS Tricks about it, and after a little fiddling with the Shapes editor in the Firefox Dev Tools (thanks Jen, Miriam, & the Dev Tools team!) I had pretty good masking layer created.

現在，我想做的就是允許文本落在飛機的尾部，而無需借助添加具有不同透明度的單獨圖像檔案來夾住文本(盡管這也是一種非常有趣的技術)。 輸入CSS屬性“ clip-path”(這是供應商字首的表親，以確定與Safari相容)。 我在CSS Tricks上找到了一篇不錯的文章 ，并且在Firefox開發工具中的Shapes編輯器有點擺弄之後(感謝Jen，Miriam和開發工具團隊！)，我建立了相當不錯的遮罩層。

Everything is done in percentages and the text is set including viewport units so we can be sure it will all scale nicely. You can always tweak the size values in other ways to fit your layout needs. But with a little bit of Grid for layout layering, this holds up pretty well.

一切都以百分比完成，并且設定了包括視口機關在内的文本，是以我們可以確定它們都可以很好地縮放。 您始終可以通過其他方式調整大小值以适合您的布局需求。 但是，由于使用了一點網格來進行布局分層，是以效果很好。

.poster-mask {
  ...
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 69.34% 90.23%, 79.17% 10.09%, 68.35% 8.66%, 35.89% 77.18%, 31.83% 83.22%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 69.34% 90.23%, 79.17% 10.09%, 68.35% 8.66%, 35.89% 77.18%, 31.83% 83.22%, 0% 100%);
  z-index: 1;
}
           

Since we are on the web in this example, I’ve added a bit of animation as the whole thing loads. I think that’s one of the emerging areas of typgraphy on the web that should be explored more. Animating type along axes during load or when content comes into view is a wonderful way to draw the readers eye. You don’t want to go overboard — and you should respect preferences for reduced motion — but it’s easy to do and animates beautifully.

由于在此示例中我們位于網絡上，是以在整個加載過程中添加了一些動畫。 我認為這是網絡上印刷術的新興領域之一，應進一步探索。 在加載過程中或内容出現時沿軸動畫顯示類型是吸引讀者眼球的絕佳方法。 您不想過分地做-您應該尊重偏愛減少運動的偏好-但它很容易做到且動畫效果精美。

The final layout combining various axis combinations of Gimlet and the clip-path masking helping the type hide behind the tail of the plane 最終的布局結合了Gimlet的各種軸組合和剪切路徑蒙版，幫助該類型隐藏在飛機尾部後面

While certainly not something you might do every day, you could imagine this working really well on a landing page or home page teaser (or some other promo usage). Indeed, given how much time publications put into their cover and article intros in print, it seems an obvious place to put some effort to create this kind of effect on their sites.

盡管當然不是您每天都可以做的事情，但您可以想象這在登陸頁面或首頁預告片(或其他促銷用途)上确實能很好地工作。 确實，鑒于出版物在封面和文章介紹中投入了多少時間，似乎顯然是在其網站上花些力氣創造這種效果的地方。

This experiment certainly has its limitations, but it does scale pretty well. I hope you’ll find this inspiring enough to try out osme of these techniques on your own projects. Be sure to share when you do!

這個實驗當然有其局限性，但确實可以很好地擴充。 希望您能從中獲得啟發，并在自己的項目中嘗試這些技術。 務必在分享時分享！

資源資源 (Resources)

• Example on CodePen

  CodePen上的示例

• CSS-Tricks post on clipping

  CSS技巧的剪輯

• caniuse.com stats and notes

  caniuse.com統計和注釋

This is an excerpt from my weekly newsletter about web fonts and typography. If you’d like a weekly dose of web typography tips, news, and my upcoming talks and workshops, you can sign up for the newsletter here.

這是我關于網絡字型和排版的每周新聞摘要。 如果您想每周檢視一些網絡排版技巧，新聞以及我即将舉行的講座和研讨會，則可以 在此處注冊新聞通訊 。

If you this helpful, please share what you make — and if there’s something you’d like to see covered in a future issue, please let me know!

如果您有幫助，請分享您的工作-如果您希望在以後的期刊中看到一些内容，請告訴我！

Originally published at rwt.io on February 7, 2020.

最初于 2020 年2月7日 在 rwt.io 上 釋出 。

翻譯自: https://medium.com/web-typography-news/text-image-interplay-animation-5abe92bcd31b

css文字圖檔動畫