How To Create Photo Waterfall Effects Using CSS

前言:

這是我在做 獨立集資專欄 時第二屏所設計的效果,當時就想試試看用純 CSS 做,現在簡單分享我的小技巧!

Introduction
The “Photo Waterfall” is the animation effect I tried when designing the campaign page about the crowdfunding projects in Taiwan. I wanted to create the effect simply using CSS, and now I am going to share some quick tips with you!

動畫說明:

此動畫是大量照片如瀑布一般散亂落下,當滑鼠 hover 時,能彷彿抓住他並且看到其的資訊。關鍵在幾個 CSS 屬性,相信各位了解後能變化更多有趣的玩法!

Animation Description
The “Photo Waterfall” animation effect is commonly known as “Photo Falling Effect”, presented as a large number of pictures dropping like waterfalls. When you hover over one of the pictures, it will stay in place for a moment to show more information. The key point of the animation relies on a few CSS properties. More interesting functions can be created once you understand more about the guidelines.

  • animation
  • animation-delay
  • animation-duration
  • animation-play-state: paused

最後配合 :nth-child() 來描述每個元件屬性,基本範例如下
Last, you can describe the property of each element with “: nth-child()”. Some basic examples are as follows:

.img {
position: absolute;
width: 80px;
animation: Down 3s 0s linear infinite both;
}
.img:hover {
animation-play-state: paused;
// The key of stopping the animation
z-index: 1;
// the element will not be covered
}
.img:nth-child(5) {
left: 22%;
animation-delay: 1s;
// Can be set as negative, then the future will be seen
animation-duration: 13s;
}
@keyframes Down{
0% { transform: translateY(-200px) }
100%{ transform: translateY(100vh) }
}

歡迎來 CodePen 玩玩看!
Check it out on CodePen


實際製作小心得:

  1. 如果一開始速度調完,發現整體速度太慢怎麼辦?該不會要一個一個改
    → 當時我很天才善用 calc() 屬性,配合編輯器一次加上 calc( 6.5s + Ns ),絕對想怎麼改就怎麼改!
  2. 為何不用 js 生成亂數 animation-duration 、animation-delay、 left 值
    → 單純不想用 js >_<
  3. 那我可以用帥氣的 scss @for 迴圈來來生成有規律的 left 值嗎
    → 沒問題,算數學的時間到了,請見以下數學課

Practical Experiences
1.If I found the overall speed of the pictures too slow, how should I adjust it effectively?
→ I used the calc () property to add calc (6.5s + Ns) by using Sublime. This way, you can adjust the speed of each element as often as you want.
2.Why don’t you generate random value by using JavaScript?
→ Because I simply do not want to use it > _ <
3.Can I use the @for loop of scss to generate a regular left value?
→ Sure! But a little calculation is needed. Please see the process below:

首先,我們要知道怎麼分佈
First, you need to know the distribution of all elements

這時我們可以算出間距等於 ( 100% — img_width ) / ( 5–1 ),最後配上 @for 迴圈,可以寫成下列樣子

Then we can calculate the interval as (100% — img_width) / (5–1). Combining with the @for loop, the code is as follows:

$img_width: 80px;
$img_amount: 5;
@for $i from 1 through $img_amount {
.img:nth-child(#{$i}) {
left: calc( ( #{$i} - 1 ) * ( 100% - #{$img_width} ) / (#{$img_amount} - 1) )
}
}

當啷,配合 scss 讓你效率大增!
To sum up, using SCSS will substantially increase your efficiency!

下篇預告《 在金庸網頁裡使用 CSS 視差滾動 》
In my next article, I will introduce the CSS Parallax Scrolling presented in another campaign page.