Skip to content

Commit c67f49c

Browse files
steelydylansteelydylan
committed
fix icon animation
1 parent cb32c4c commit c67f49c

7 files changed

Lines changed: 55 additions & 27 deletions

File tree

‎assets/icon_scroll_hint_black.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/icon_scroll_hint_white.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎css/scroll-hint.css‎

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,17 @@
11
@keyframes scroll-hint-appear {
2-
0% {
3-
transform: translateX(0);
4-
opacity: 1
5-
}
62

7-
25% {
3+
0% {
84
transform: translateX(40px);
9-
opacity: 1
5+
opacity: 0;
106
}
117

12-
75% {
13-
transform: translateX(-40px);
14-
opacity: 1
8+
10% {
9+
opacity: 1;
1510
}
1611

17-
to {
18-
transform: translateX(0);
19-
opacity: .8
12+
50%, 100% {
13+
transform: translateX(-40px);
14+
opacity: 0;
2015
}
2116
}
2217

@@ -35,16 +30,16 @@
3530
.scroll-hint-icon {
3631
position: absolute;
3732
top: calc(50% - 25px);
38-
left: calc(50% - 25px);
33+
left: calc(50% - 60px);
3934
box-sizing: border-box;
40-
width: 50px;
41-
height: 50px;
35+
width: 120px;
36+
height: 80px;
4237
border-radius: 5px;
4338
transition: opacity .3s;
4439
opacity: 0;
4540
background: rgba(0, 0, 0, .7);
46-
line-height: 50px;
4741
text-align: center;
42+
padding: 10px;
4843
}
4944

5045
.scroll-hint-icon-wrap {
@@ -57,12 +52,19 @@
5752
pointer-events: none;
5853
}
5954

55+
.scroll-hint-text {
56+
font-size: 10px;
57+
color: #FFF;
58+
margin-top: 5px;
59+
}
60+
6061
.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
6162
opacity: .8;
62-
animation: scroll-hint-appear 1s linear;
6363
}
6464

6565
.scroll-hint-icon:before {
66+
animation: scroll-hint-appear 1.2s linear;
67+
animation-iteration-count: 2;
6668
display: inline-block;
6769
width: 40px;
6870
height: 40px;
@@ -73,5 +75,14 @@
7375
background-size: contain;
7476
background-position: center center;
7577
background-repeat: no-repeat;
76-
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQ0OXB4IiBoZWlnaHQ9IjQ5MnB4IiB2aWV3Qm94PSIwIDAgNDQ5IDQ5MiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMzkuMSAoMzE3MjApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlNsaWNlIDE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ic3dpcGUiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNNDE2LjMyOCw0My42NTEgTDI4OC4zMjgsNDMuNjUxIEMyODIuNDQsNDMuNjUxIDI3Ny42NjEsNDguNDMgMjc3LjY2MSw1NC4zMTggQzI3Ny42NjEsNjAuMjA2IDI4Mi40NCw2NC45ODUgMjg4LjMyOCw2NC45ODUgTDQxNi4zMjgsNjQuOTg1IEM0MjIuMjE2LDY0Ljk4NSA0MjYuOTk1LDYwLjIwNiA0MjYuOTk1LDU0LjMxOCBDNDI2Ljk5NSw0OC40MyA0MjIuMjE2LDQzLjY1MSA0MTYuMzI4LDQzLjY1MSBMNDE2LjMyOCw0My42NTEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00MjMuODgsNDYuNzg3IEwzODEuMjEzLDQuMTIgQzM3Ny4wNTMsLTAuMDQgMzcwLjI5LC0wLjA0IDM2Ni4xMyw0LjEyIEMzNjEuOTcsOC4yOCAzNjEuOTcsMTUuMDQzIDM2Ni4xMywxOS4yMDMgTDQwMS4yNDUsNTQuMzE4IEwzNjYuMTA5LDg5LjQ1NCBDMzYxLjk0OSw5My42MTQgMzYxLjk0OSwxMDAuMzc3IDM2Ni4xMDksMTA0LjUzNyBDMzY4LjIsMTA2LjYwNiAzNzAuOTMsMTA3LjY1MiAzNzMuNjYxLDEwNy42NTIgQzM3Ni4zOTIsMTA3LjY1MiAzNzkuMTIyLDEwNi42MDcgMzgxLjIxMywxMDQuNTM3IEw0MjMuODgsNjEuODcgQzQyOC4wNCw1Ny43MDkgNDI4LjA0LDUwLjk0NyA0MjMuODgsNDYuNzg3IEw0MjMuODgsNDYuNzg3IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNMTM4Ljk5NSw0My42NTEgTDEwLjk5NSw0My42NTEgQzUuMTA3LDQzLjY1MSAwLjMyOCw0OC40MyAwLjMyOCw1NC4zMTggQzAuMzI4LDYwLjIwNiA1LjEwNyw2NC45ODUgMTAuOTk1LDY0Ljk4NSBMMTM4Ljk5NSw2NC45ODUgQzE0NC44ODMsNjQuOTg1IDE0OS42NjIsNjAuMjA2IDE0OS42NjIsNTQuMzE4IEMxNDkuNjYyLDQ4LjQzIDE0NC44ODMsNDMuNjUxIDEzOC45OTUsNDMuNjUxIEwxMzguOTk1LDQzLjY1MSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTI2LjA3Nyw1NC4zMTcgTDYxLjE5MiwxOS4yMDIgQzY1LjM1MiwxNS4wNDIgNjUuMzUyLDguMjc5IDYxLjE5Miw0LjExOSBDNTcuMDMyLC0wLjA0MSA1MC4yNjksLTAuMDQxIDQ2LjEwOSw0LjExOSBMMy40NDMsNDYuNzg3IEMtMC43MTcsNTAuOTQ3IC0wLjcxNyw1Ny43MSAzLjQ0Myw2MS44NyBMNDYuMTEsMTA0LjUzNyBDNDguMjAxLDEwNi42MDYgNTAuOTMxLDEwNy42NTIgNTMuNjYyLDEwNy42NTIgQzU2LjM5MywxMDcuNjUyIDU5LjEyMywxMDYuNjA3IDYxLjE5MywxMDQuNTE2IEM2NS4zNTMsMTAwLjM1NiA2NS4zNTMsOTMuNTkzIDYxLjE5Myw4OS40MzMgTDI2LjA3Nyw1NC4zMTcgTDI2LjA3Nyw1NC4zMTcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00MDUuNjYxLDIxNC4zMTcgQzM5Ni44OTMsMjE0LjMxNyAzODguNzIyLDIxNi45ODQgMzgxLjkzOCwyMjEuNTI4IEMzNzYuMDkzLDIwNC45MzEgMzYwLjI0MiwxOTIuOTg0IDM0MS42NjEsMTkyLjk4NCBDMzMyLjg5MywxOTIuOTg0IDMyNC43MjIsMTk1LjY1MSAzMTcuOTM4LDIwMC4xOTUgQzMxMi4wOTMsMTgzLjU5OCAyOTYuMjQyLDE3MS42NTEgMjc3LjY2MSwxNzEuNjUxIEMyNjkuODk2LDE3MS42NTEgMjYyLjYsMTczLjc0MiAyNTYuMzI4LDE3Ny4zOSBMMjU2LjMyOCwxMDcuNjUxIEMyNTYuMzI4LDg0LjEyIDIzNy4xOTIsNjQuOTg0IDIxMy42NjEsNjQuOTg0IEMxOTAuMTMsNjQuOTg0IDE3MC45OTQsODQuMTIgMTcwLjk5NCwxMDcuNjUxIEwxNzAuOTk0LDI4OC45ODQgTDEzMy45MTcsMjYxLjE4NyBDMTExLjk0NCwyNDQuNjk2IDgwLjY2OSwyNDYuODk0IDYxLjE5MiwyNjYuMzUgQzQ4LjcxMiwyNzguODMgNDguNzEyLDI5OS4xMTggNjEuMTkyLDMxMS41OTggTDIxMy4xMDcsNDYzLjUzNCBDMjMxLjI0LDQ4MS42NjcgMjU1LjM2OCw0OTEuNjUxIDI4MS4wMTEsNDkxLjY1MSBMMzMwLjk5NSw0OTEuNjUxIEMzOTUuNjc4LDQ5MS42NTEgNDQ4LjMyOCw0MzkuMDIyIDQ0OC4zMjgsMzc0LjMxOCBMNDQ4LjMyOCwyNTYuOTg0IEM0NDguMzI4LDIzMy40NTMgNDI5LjE5MiwyMTQuMzE3IDQwNS42NjEsMjE0LjMxNyBMNDA1LjY2MSwyMTQuMzE3IFogTTQyNi45OTUsMzc0LjMxNyBDNDI2Ljk5NSw0MjcuMjQ1IDM4My45MjMsNDcwLjMxNyAzMzAuOTk1LDQ3MC4zMTcgTDI4MS4wMTEsNDcwLjMxNyBDMjYxLjA0Myw0NzAuMzE3IDI0Mi4yOTEsNDYyLjU1MiAyMjguMTksNDQ4LjQ1IEw3Ni4yNzUsMjk2LjUxNSBDNzIuMTE1LDI5Mi4zNTUgNzIuMTE1LDI4NS41OTIgNzYuMjc1LDI4MS40MzIgQzgyLjg4OCwyNzQuODQgOTEuNzIsMjcxLjQ0OCAxMDAuNTk1LDI3MS40NDggQzEwNy44MDYsMjcxLjQ0OCAxMTUuMDU5LDI3My42ODggMTIxLjEzOSwyNzguMjUzIEwxNzUuMjYyLDMxOC44NSBDMTc4LjUwNSwzMjEuMjgyIDE4Mi44NTcsMzIxLjY0NSAxODYuNDQxLDMxOS44NTMgQzE5MC4wNDYsMzE4LjA0IDE5Mi4zMjksMzE0LjM0OSAxOTIuMzI5LDMxMC4zMTcgTDE5Mi4zMjksMTA3LjY1MSBDMTkyLjMyOSw5NS44OTYgMjAxLjg4Niw4Ni4zMTggMjEzLjY2Miw4Ni4zMTggQzIyNS40MzgsODYuMzE4IDIzNC45OTUsOTUuODk3IDIzNC45OTUsMTA3LjY1MSBMMjM0Ljk5NSwyNjcuNjUxIEMyMzQuOTk1LDI3My41MzkgMjM5Ljc3NCwyNzguMzE4IDI0NS42NjIsMjc4LjMxOCBDMjUxLjU1LDI3OC4zMTggMjU2LjMyOSwyNzMuNTM5IDI1Ni4zMjksMjY3LjY1MSBMMjU2LjMyOSwyMTQuMzE4IEMyNTYuMzI5LDIwMi41NjMgMjY1Ljg4NiwxOTIuOTg1IDI3Ny42NjIsMTkyLjk4NSBDMjg5LjQzOCwxOTIuOTg1IDI5OC45OTUsMjAyLjU2NCAyOTguOTk1LDIxNC4zMTggTDI5OC45OTUsMjY3LjY1MSBDMjk4Ljk5NSwyNzMuNTM5IDMwMy43NzQsMjc4LjMxOCAzMDkuNjYyLDI3OC4zMTggQzMxNS41NSwyNzguMzE4IDMyMC4zMjksMjczLjUzOSAzMjAuMzI5LDI2Ny42NTEgTDMyMC4zMjksMjM1LjY1MSBDMzIwLjMyOSwyMjMuODk2IDMyOS44ODYsMjE0LjMxOCAzNDEuNjYyLDIxNC4zMTggQzM1My40MzgsMjE0LjMxOCAzNjIuOTk1LDIyMy44OTcgMzYyLjk5NSwyMzUuNjUxIEwzNjIuOTk1LDI2Ny42NTEgQzM2Mi45OTUsMjczLjUzOSAzNjcuNzc0LDI3OC4zMTggMzczLjY2MiwyNzguMzE4IEMzNzkuNTUsMjc4LjMxOCAzODQuMzI5LDI3My41MzkgMzg0LjMyOSwyNjcuNjUxIEwzODQuMzI5LDI1Ni45ODQgQzM4NC4zMjksMjQ1LjIyOSAzOTMuODg2LDIzNS42NTEgNDA1LjY2MiwyMzUuNjUxIEM0MTcuNDM4LDIzNS42NTEgNDI2Ljk5NSwyNDUuMjMgNDI2Ljk5NSwyNTYuOTg0IEw0MjYuOTk1LDM3NC4zMTcgTDQyNi45OTUsMzc0LjMxNyBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
78+
background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiPjx0aXRsZT7jgqLjg7zjg4jjg5zjg7zjg4kgMjwvdGl0bGU+PHBhdGggZD0iTTMxLjA4LDQwSDE3LjU5YTEuNTQsMS41NCwwLDAsMS0xLjU0LTEuNTVBMTIuMjQsMTIuMjQsMCwwLDAsMTUuNDEsMzRhMjUuMDcsMjUuMDcsMCwwLDAtNC4yNC01TDExLjExLDI5YTUsNSwwLDAsMS0xLjM2LTMuNjMsMy43LDMuNywwLDAsMSw2LjMxLTIuNTVWMTMuMjVhMy43NywzLjc3LDAsMCwxLDcuNTQsMHY0LjU2YTMuMzUsMy4zNSwwLDAsMSwxLjI2LDAsMywzLDAsMCwxLDIsMS4yMiwzLjUzLDMuNTMsMCwwLDEsMi0uMDYsMy4yNCwzLjI0LDAsMCwxLDIsMS41NCwzLjc1LDMuNzUsMCwwLDEsMywuNDcsNC4yMyw0LjIzLDAsMCwxLDEuNjYsMy40NmMwLC4xMSwwLC4yNywwLC40NmExOS4zMSwxOS4zMSwwLDAsMS0uODUsNywxMCwxMCwwLDAsMS0uNTYsMS4yMmwtLjExLjIyYTIuMzksMi4zOSwwLDAsMS0uMTMuMjEsNy4xMyw3LjEzLDAsMCwwLTEuMTcsMi4xN2MtLjA3LjU2LS4wNiwyLjE0LDAsMi43MUExLjU1LDEuNTUsMCwwLDEsMzEuMDgsNDBaTTE4LjM1LDM3LjY5aDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzQTguNzQsOC43NCwwLDAsMSwzMiwzMi4yMWwuMDYtLjEyYTEwLjcxLDEwLjcxLDAsMCwwLC40NS0xLDE2LjgsMTYuOCwwLDAsMCwuNy02LjEyYzAtLjIzLDAtLjQxLDAtLjU0aDBhMS45MywxLjkzLDAsMCwwLS42My0xLjUyQTEuMzMsMS4zMywwLDAsMCwzMSwyM2ExLjE1LDEuMTUsMCwwLDEtMi0uNjZjLS4wNy0uNDgtLjMyLTEtLjc2LTEuMTFhMSwxLDAsMCwwLTEuMTEuMjhsLS4wOS4xYTEuMTUsMS4xNSwwLDAsMS0xLjE5LjI5QTEuMTYsMS4xNiwwLDAsMSwyNS4xLDIxYy0uMDktLjY4LS4yMi0uNzctLjctLjg3YS44My44MywwLDAsMC0xLC40OEExLjE1LDEuMTUsMCwwLDEsMjEuMjgsMjBWMTMuMjVhMS40NiwxLjQ2LDAsMCwwLTIuOTIsMFYyMS4xbDAsNC4zM2ExLjE2LDEuMTYsMCwwLDEtLjgyLDEuMTEsMS4xNywxLjE3LDAsMCwxLTEuMjEtLjM1Yy0uMTMtLjEzLS42NS0uNi0xLS45MXMtLjc0LS42Ni0uODUtLjc3YTEuMzQsMS4zNCwwLDAsMC0yLS4xMmwtLjA4LjA3YTEuMzYsMS4zNiwwLDAsMC0uMzgsMSwyLjYxLDIuNjEsMCwwLDAsLjY4LDEuODhsMCwwQTI3LjU1LDI3LjU1LDAsMCwxLDE3LjQ3LDMzLDEyLjQxLDEyLjQxLDAsMCwxLDE4LjM1LDM3LjY5Wk0zMywzMi44M1pNMTYuMjYsMjYuMDdabTAsMFoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTMuNzYsNy4xN0g1LjJhMS4xNiwxLjE2LDAsMCwxLDAtMi4zMWg4LjU2YTEuMTYsMS4xNiwwLDAsMSwwLDIuMzFaIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjc1LDEyYTEuMTUsMS4xNSwwLDAsMS0uNzItLjI1bC02LjI0LTVhMS4xOCwxLjE4LDAsMCwxLS40NC0uOTJBMS4yLDEuMiwwLDAsMSwzLjgxLDVMMTAuMDUuMjNhMS4xNiwxLjE2LDAsMCwxLDEuNCwxLjg1TDYuMzksNS45MSwxMS40NywxMGExLjE2LDEuMTYsMCwwLDEsLjE4LDEuNjNBMS4xNSwxLjE1LDAsMCwxLDEwLjc1LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzNC44IiB5MT0iNi4wMSIgeDI9IjI2LjI0IiB5Mj0iNi4wMSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0zNC44LDcuMTdIMjYuMjRhMS4xNiwxLjE2LDAsMCwxLDAtMi4zMUgzNC44YTEuMTYsMS4xNiwwLDAsMSwwLDIuMzFaIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTI5LjI1LDEyYTEuMTUsMS4xNSwwLDAsMS0uOS0uNDNBMS4xNiwxLjE2LDAsMCwxLDI4LjUzLDEwbDUuMDgtNC4wNUwyOC41NSwyLjA4QTEuMTYsMS4xNiwwLDAsMSwzMCwuMjNMMzYuMTksNWExLjIsMS4yLDAsMCwxLC40Ni45MSwxLjE4LDEuMTgsMCwwLDEtLjQ0LjkybC02LjI0LDVBMS4xNSwxLjE1LDAsMCwxLDI5LjI1LDEyWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
79+
}
80+
81+
.scroll-hint-icon-wrap.scroll-hint-icon-wrap-white {
82+
box-shadow: 0 4px 5px rgba(0, 0, 0, .4);
83+
}
84+
85+
86+
.scroll-hint-icon-wrap.scroll-hint-icon-wrap-white .scroll-hint-icon:before {
87+
background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiPjx0aXRsZT7jgqLjg7zjg4jjg5zjg7zjg4kgMjwvdGl0bGU+PHBhdGggZD0iTTMxLjA4LDQwSDE3LjU5YTEuNTQsMS41NCwwLDAsMS0xLjU0LTEuNTVBMTIuMjQsMTIuMjQsMCwwLDAsMTUuNDEsMzRhMjUuMDcsMjUuMDcsMCwwLDAtNC4yNC01TDExLjExLDI5YTUsNSwwLDAsMS0xLjM2LTMuNjMsMy43LDMuNywwLDAsMSw2LjMxLTIuNTVWMTMuMjVhMy43NywzLjc3LDAsMCwxLDcuNTQsMHY0LjU2YTMuMzUsMy4zNSwwLDAsMSwxLjI2LDAsMywzLDAsMCwxLDIsMS4yMiwzLjUzLDMuNTMsMCwwLDEsMi0uMDYsMy4yNCwzLjI0LDAsMCwxLDIsMS41NCwzLjc1LDMuNzUsMCwwLDEsMywuNDcsNC4yMyw0LjIzLDAsMCwxLDEuNjYsMy40NmMwLC4xMSwwLC4yNywwLC40NmExOS4zMSwxOS4zMSwwLDAsMS0uODUsNywxMCwxMCwwLDAsMS0uNTYsMS4yMmwtLjExLjIyYTIuMzksMi4zOSwwLDAsMS0uMTMuMjEsNy4xMyw3LjEzLDAsMCwwLTEuMTcsMi4xN2MtLjA3LjU2LS4wNiwyLjE0LDAsMi43MUExLjU1LDEuNTUsMCwwLDEsMzEuMDgsNDBaTTE4LjM1LDM3LjY5aDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzQTguNzQsOC43NCwwLDAsMSwzMiwzMi4yMWwuMDYtLjEyYTEwLjcxLDEwLjcxLDAsMCwwLC40NS0xLDE2LjgsMTYuOCwwLDAsMCwuNy02LjEyYzAtLjIzLDAtLjQxLDAtLjU0aDBhMS45MywxLjkzLDAsMCwwLS42My0xLjUyQTEuMzMsMS4zMywwLDAsMCwzMSwyM2ExLjE1LDEuMTUsMCwwLDEtMi0uNjZjLS4wNy0uNDgtLjMyLTEtLjc2LTEuMTFhMSwxLDAsMCwwLTEuMTEuMjhsLS4wOS4xYTEuMTUsMS4xNSwwLDAsMS0xLjE5LjI5QTEuMTYsMS4xNiwwLDAsMSwyNS4xLDIxYy0uMDktLjY4LS4yMi0uNzctLjctLjg3YS44My44MywwLDAsMC0xLC40OEExLjE1LDEuMTUsMCwwLDEsMjEuMjgsMjBWMTMuMjVhMS40NiwxLjQ2LDAsMCwwLTIuOTIsMFYyMS4xbDAsNC4zM2ExLjE2LDEuMTYsMCwwLDEtLjgyLDEuMTEsMS4xNywxLjE3LDAsMCwxLTEuMjEtLjM1Yy0uMTMtLjEzLS42NS0uNi0xLS45MXMtLjc0LS42Ni0uODUtLjc3YTEuMzQsMS4zNCwwLDAsMC0yLS4xMmwtLjA4LjA3YTEuMzYsMS4zNiwwLDAsMC0uMzgsMSwyLjYxLDIuNjEsMCwwLDAsLjY4LDEuODhsMCwwQTI3LjU1LDI3LjU1LDAsMCwxLDE3LjQ3LDMzLDEyLjQxLDEyLjQxLDAsMCwxLDE4LjM1LDM3LjY5Wk0zMywzMi44M1pNMTYuMjYsMjYuMDdabTAsMFoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTMuNzYsNy4xN0g1LjJhMS4xNiwxLjE2LDAsMCwxLDAtMi4zMWg4LjU2YTEuMTYsMS4xNiwwLDAsMSwwLDIuMzFaIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjc1LDEyYTEuMTUsMS4xNSwwLDAsMS0uNzItLjI1bC02LjI0LTVhMS4xOCwxLjE4LDAsMCwxLS40NC0uOTJBMS4yLDEuMiwwLDAsMSwzLjgxLDVMMTAuMDUuMjNhMS4xNiwxLjE2LDAsMCwxLDEuNCwxLjg1TDYuMzksNS45MSwxMS40NywxMGExLjE2LDEuMTYsMCwwLDEsLjE4LDEuNjNBMS4xNSwxLjE1LDAsMCwxLDEwLjc1LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzNC44IiB5MT0iNi4wMSIgeDI9IjI2LjI0IiB5Mj0iNi4wMSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0zNC44LDcuMTdIMjYuMjRhMS4xNiwxLjE2LDAsMCwxLDAtMi4zMUgzNC44YTEuMTYsMS4xNiwwLDAsMSwwLDIuMzFaIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTI5LjI1LDEyYTEuMTUsMS4xNSwwLDAsMS0uOS0uNDNBMS4xNiwxLjE2LDAsMCwxLDI4LjUzLDEwbDUuMDgtNC4wNUwyOC41NSwyLjA4QTEuMTYsMS4xNiwwLDAsMSwzMCwuMjNMMzYuMTksNWExLjIsMS4yLDAsMCwxLC40Ni45MSwxLjE4LDEuMTgsMCwwLDEtLjQ0LjkybC02LjI0LDVBMS4xNSwxLjE1LDAsMCwxLDI5LjI1LDEyWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
7788
}

‎js/scroll-hint.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* scroll-hint:
66
* license: MIT (http://opensource.org/licenses/MIT)
77
* author: steelydylan
8-
* version: 0.0.3
8+
* version: 0.0.4
99
*
1010
* es6-object-assign:
1111
* license: MIT (http://opensource.org/licenses/MIT)
@@ -86,10 +86,15 @@ var defaults = {
8686
scrollableLeftClass: 'is-left-scrollable',
8787
scrollHintClass: 'scroll-hint',
8888
scrollHintIconClass: 'scroll-hint-icon',
89+
// scrollHintIconAppendClass: 'scroll-hint-icon-white',
8990
scrollHintIconWrapClass: 'scroll-hint-icon-wrap',
91+
scrollHintText: 'scroll-hint-text',
9092
scrollHintBorderWidth: 10,
9193
enableOverflowScrolling: true,
92-
applyToParents: false
94+
applyToParents: false,
95+
i18n: {
96+
scrollable: 'scrollable'
97+
}
9398
};
9499

95100
var ScrollHint = function () {
@@ -126,7 +131,7 @@ var ScrollHint = function () {
126131
_this.updateItem(item);
127132
});
128133
(0, _util.addClass)(element, _this.opt.scrollHintClass);
129-
(0, _util.append)(element, '<div class="' + _this.opt.scrollHintIconWrapClass + '" data-target="scrollable-icon">\n <span class="' + _this.opt.scrollHintIconClass + '"></span>\n </div>');
134+
(0, _util.append)(element, '<div class="' + _this.opt.scrollHintIconWrapClass + '" data-target="scrollable-icon">\n <span class="' + _this.opt.scrollHintIconClass + '"><div class="' + _this.opt.scrollHintText + '">\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u304D\u307E\u3059</div></span>\n </div>');
130135
_this.items.push(item);
131136
});
132137
window.addEventListener('scroll', function () {

0 commit comments

Comments
 (0)