精選文章

理膚寶水評價、心得 理膚寶水 La Roche-Posay 產品分享

理膚寶水 La Roche-Posay -產品介紹&使用心得 敏感肌膚皮膚科醫生指定推薦 還記得第一次用理膚寶水的產品 應該是高中的時候我媽拿給我的一個「全面修護霜」試用包 雖然忘了是為了什麼用的,在那個時候也沒注意是哪一個牌子,就只是覺得這個產品很好用   再次使用他們的產品已經過了很久很久了 這次是使用他們的「全護水感清透防曬露」試用包(名字太長了,還要去查一下才知道) 也是覺得很好用,才開始注意到這個品牌,不過當時還沒實際去買他們的產品   因為在那個時候,如果需要什麼防曬、化妝水等生活上的用品都是跑去寶雅買 雖然寶雅有很多便宜好用的東西,但總是沒有一個真正抓住我的產品。   在大四的時候才第一次買理膚寶水的產品,那個時候是朋友帶我去藥局買的 在這之前已經對他們的產品念念不忘很久了,不過第一次不敢買太多,也不知道該買什麼產品   經過藥師的推薦後就買了他們的「安心霜」,第一次花了快一千塊買一罐擦在臉上的東西真是有點心痛 好在當時有送了很多試用包,才讓我緩和一下,用了一段時間確實是有比之前買的那些東西好用許多 在這之後也因為開始賺錢的關係,就踏上了這條理膚寶水不歸路了。   我沒有接觸過很多的化妝產品,只是早晚用化妝水或精華來保養、太陽很大會擦個防曬這樣 現在身邊的臉部保養品清一色都是買理膚寶水的產品(還是有一兩個之前買了沒用完的牌子)   前陣子旗艦店(勤美那邊的sogo裡面)有舉辦活動,找了朋友去買了五千多塊 原本就只是覺得莫名的被產品吸引,現在仔細想想大概是因為有會員積點可以換商品 還有時常的優惠活動吧,包裝應改也佔了很大一部分,簡約、統一配色,就是最吸引我的點了。   值得一提的是,雖然價格可以打的折數不多,市面上的通路最多也就六折,但是他都會推出很多組合,還有每次收到的贈品總是比買的商品還要多很多,小樣的包裝排列起來就很壯觀。   理膚寶水的實體通路在很多藥局都買得到,有些美妝店也會有平輸的產品,但可能就無法參與會員集點跟贈品的優惠了。   想從網購通路購買的可以去這邊買-> momo購物網 (因時效限制,可以先把商品加入購物車,結帳前再點一次連結) 理膚寶水的官方網站-> https://www.lrp.co

網頁Loading載入效果

新增網頁在loading時的動畫效果

網頁Loading載入效果

前端如果有大量元素要載入的時候,為了呈現畫面的美觀,通常都會有一個 Loading 的畫面

先前加入這個效果本來是要解決 Js 載入網站有延遲,導致跑版的問題,不過修改一個 Class 之後就解決了


可是既然已經找到相關的製作方式,何不套用在網站中呢~

另外設定 Timeout 的原因就是在頻繁切換網頁的時候,如果網頁載入沒有延遲,loading 畫面會一閃而過,不太美觀。

此次參考的網頁

程式碼部分

Head 加入以下 style

<style>
        /* Center the loader */
        #loader {
          position: absolute;
          left: 50%;
          top: 50%;
          z-index: 1;
          width: 150px;
          height: 150px;
          margin: -75px 0 0 -75px;
          border: 16px solid #f3f3f3;
          border-radius: 50%;
          border-top: 16px solid #3498db;
          width: 160px;
          height: 160px;
          -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
        }

        @-webkit-keyframes spin {
          0% { -webkit-transform: rotate(0deg); }
          100% { -webkit-transform: rotate(360deg); }
        }

        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }

        /* Add animation to "page content" */
        .animate-bottom {
          position: relative;
          -webkit-animation-name: animatebottom;
          -webkit-animation-duration: 1s;
          animation-name: animatebottom;
          animation-duration: 1.5s
        }

        @-webkit-keyframes animatebottom {
          from { bottom:-100px; opacity:0 } 
          to { bottom:0px; opacity:1 }
        }

        @keyframes animatebottom { 
          from{ bottom:-100px; opacity:0 } 
          to{ bottom:0; opacity:1 }
        }

        #myDiv {
          display: none;
        }
</style>


在 body 加入以下項目

<body style="margin:0;"><body>


加入 loading 的 div 區塊

<div id="loader"></div>


用 div 包住內容

<div style="display:none;" id="myDiv" class="animate-bottom"><div>

body 的最後使用此段程式碼

<script>
    setTimeout(function () {
        $(document).ready(function () {
            document.getElementById("loader").style.display = "none";
            document.getElementById("myDiv").style.display = "block";
        });
     }, 500);
</script>

 


#loading效果#網頁loading

 

留言

這個網誌中的熱門文章

理膚寶水評價、心得 理膚寶水 La Roche-Posay 產品分享

空氣清淨除濕機開箱文|Panasonic國際牌8公升一級能效除濕機F-Y16EN