owned this note   changed 4 years ago  
Published Linked with GitHub

也許可以放點東西？

tags: 開工

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
一些連結

  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    回到首頁
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    GitLab link
Click to open TOC

置中排版大補帖

By. Mango

https://www.w3.org/Style/Examples/007/center.en.html

全域css調整

https://hackmd.io/@2021ncu-fresh-code/S1VGtA7pd

來自柏儒的貼心小提醒

  1. 可以用美工組給的字型了，css加上font-family: 'reisyo'; 就有了
  2. 串連後端api (假設原本是http://localhost:8000/test，現在只要打/api/test就可以了)
  3. 跟企劃組討論的時候可以試試看用ngrok (https://ngrok.com/)

ngrok載完以後打

./ngrok http 3000

應該可以把測試的server公開到公網上讓企劃組看，不過速度頗慢。

執行概況

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Forwarding前面的網址就是被公開的連結，每次啟動都會換掉，不用擔心

沒有設計滾輪主頁可以使用的現有css

這是一個沒有設計滾輪往下滑的頁面可以使用的程式碼(或許往下滾的也可以)，我的classmain是整個頁面最外層的div
湯以謙

我是用section分區段，基本上只要將每個height乘上section數量就可以直接用
大俠

.main {
    margin-top: 8vh;
    height: 92vh;
    width: 100%;
    background-image: url("...");
    background-repeat: repeat;
    background-attachment: scroll, local;
    background-position: center;
    background-size: cover;
}
@media (max-height: 850px) {
    .main {
        margin-top: 11vh;
        height: 89vh;
    }
}

@media (max-height: 720px) {
    .main {
        margin-top: 13vh;
        height: 87vh;
    }
}

@media (max-height: 650px) {
    .main {
        margin-top: 14vh;
        height: 86vh;
    }
}

@media (max-height: 500px) {
    .main {
        margin-top: 15vh;
        height: 85vh;
    }
}

Nuxt 動畫沒有觸發

如果兩個頁面設定的layout不一樣，可能會導致在page設定好的transition無效

Page A

export default {
    layout: "groups",
    transition: "group",
    methods: {
        ...
    }
}
<style lang="scss" scoped>
.group-leave-active {
    transition: 1.8s;
    opacity: 0;
}
</style>

Page B

export default {
    layout: "activities",
    methods: {
        ...
    }
}
<style lang="scss" scoped>
    ...
}
</style>

當A頁面跳轉到B頁面時不會觸發transition，如果在B頁面中加入layout: "groups"就能解決問題

補: transition的名稱設定也要相同

字型整理

標題: 各種書法字體

font-family: "kouzan", "aoyagireisyosimo_otf_2";

內文: 微軟正黑體

font-family: "Microsoft JhengHei";

SVG Animation

一開始接到兩個筆刷的hover動畫，想著效果蠻常見也挺直覺的，後來才發現根本不是靠簡單的CSS Animation就可以解決的。

結論: 不要輕易答應企劃的動畫需求

0802更新
好啦還是來寫一下好了，感覺越來越多人遇到這個需求

Why svg?

想要呈現筆刷圈選or平抹用CSS transform幾乎很難做到，svg可以透過path繪製筆刷的路徑，疊上遮罩(.png)，基本上可以完美解決企劃的要求了!

Steps

  1. 設定path
  2. 找你的美術要一個遮罩or自己生出一個遮罩
    • 遮罩需由灰階色彩組成，下面是幾個遮罩範本

橫抹筆刷

<svg
    class="line_svg"
    id="course_line"
    viewBox="0 0 240 55"
>
    <defs>
        <mask id="line_mask" maskUnits="userSpaceOnUse">
            <image
                width="240"
                height="55"
                href="~/assets/documents/section2/line_mask.png"
            />
        </mask>
    </defs>
    <path d="m 10 10 l 250 0" />
</svg>

.line_svg {
    position: absolute;
    transform: scale(1.25);
    width: 80%;
    height: 80%;
    path {
        fill: none;
        stroke: #383227;
        stroke-width: 80;
        stroke-linecap: square;
        
        //筆刷速度
        stroke-dasharray: 4000 4000;
        stroke-dashoffset: 4000;
        
        mask: url(#line_mask);
    }
}
&:hover .line_svg {
    path {
        animation-duration: 6s;
        animation-name: line_anim;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
    }
}


@keyframes line_anim {
    to {
        stroke-dashoffset: 0;
    }
}

圈選筆刷

<svg
    class="circle_svg"
    id="course_circle"
    viewBox="0 0 250 125"
>
    <defs>
        <mask id="circle_mask" maskUnits="userSpaceOnUse">
            <image
                width="250"
                height="125"
                href="~/assets/documents/section2/circle_mask.png"
            />
        </mask>
    </defs>
    <path
        d="m 239 43 a 115 50 0 1 1 -61 -30"
    />
</svg>



































.circle_svg {
    position: absolute;
    transform: scale(1.25);
    width: 100%;
    path {
        fill: none;
        stroke: #c48888;
        stroke-width: 50;
        stroke-linecap: round;
        
        //這兩項控制動畫速度
        stroke-dasharray: 2000 2000;
        stroke-dashoffset: 2000;
        
        mask: url(#circle_mask);
    }
}
&:hover .circle_svg {
    path {
        animation-duration: 1s;
        animation-name: circle_anim;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
    }
}


@keyframes circle_anim {
    to {
        stroke-dashoffset: 0;
    }
}

絕對位置在手機開小鍵盤的時候可能會跑版

除了強制固定body的大小，好像沒看到什麼比較好的方法。目前我是想辦法用flex container還有relative的子元素來調整。

nuxt link問題

nuxt link的點擊事件要改用@click.native，但是使用emit仍然會有問題

Select a repo