Allen850413 (Talk | contribs) |
Allen850413 (Talk | contribs) |
||
Line 253: | Line 253: | ||
height: 0%; | height: 0%; | ||
} | } | ||
+ | section{ | ||
+ | display :flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | color :rgba(0, 0, 0, 0.5); | ||
+ | font-size: 2rem; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | .Quick-navigation { | ||
+ | position: fixed; | ||
+ | text-align:left; | ||
+ | margin: 0; | ||
+ | top: 50vh; | ||
+ | left: 3vw; | ||
+ | transform: translateY(-50%); | ||
+ | z-index:1; | ||
+ | } | ||
+ | |||
+ | |||
+ | .Quick-navigation a { | ||
+ | padding:3vh; | ||
+ | } | ||
+ | |||
+ | .Quick-navigation-item { | ||
+ | color: red; | ||
+ | text-decoration: none; | ||
+ | font-size: 1.3em; | ||
+ | transition: color 0.5s; | ||
+ | padding: 1em; | ||
+ | display: block; | ||
+ | } | ||
+ | .Quick-navigation-item:hover{ | ||
+ | color :#FFF; | ||
+ | } | ||
+ | .Quick-navigation-item.current { | ||
+ | color :#FFF; | ||
+ | } | ||
+ | .Scroll-progress-indicator { | ||
+ | transition: all 0.5s; | ||
+ | left: -10px; | ||
+ | border-radius :2px; | ||
+ | position :absolute; | ||
+ | top :50%; | ||
+ | opacity: 0; | ||
+ | padding: 2em; | ||
+ | transform :translateX(200%) translateY(-50%); | ||
+ | background-color: blue; | ||
+ | |||
+ | } | ||
+ | .Scroll-progress-indicator.visible { | ||
+ | transform: translateX(-100%) translateY(-50%); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | /*#A { | ||
+ | background-color: crimson; | ||
+ | height:100vh; | ||
+ | } | ||
+ | #B{ | ||
+ | background-color: purple; | ||
+ | height: 100vh; | ||
+ | } | ||
+ | #C{ | ||
+ | background-color: green; | ||
+ | height:50vh; | ||
+ | } | ||
+ | #D{ | ||
+ | background-color: red; | ||
+ | height: 150vh; | ||
+ | } | ||
+ | #E{ | ||
+ | background-color: white; | ||
+ | height: 120vh; | ||
+ | }*/ | ||
+ | .Scroll-to-top { | ||
+ | position: fixed; | ||
+ | right: 20px; | ||
+ | bottom: 0; | ||
+ | background-color: rgba(0, 0, 0, 0.2); | ||
+ | border: none; | ||
+ | color: rgba(255, 255, 255, 0.5); | ||
+ | font-size: 1.5rem; | ||
+ | padding: 0.5em; | ||
+ | cursor: pointer; | ||
+ | opacity: 0; | ||
+ | transform: translateY(100%); | ||
+ | transition: all 0.3s; | ||
+ | outline: none; | ||
+ | } | ||
+ | .Scroll-to-top.visible { | ||
+ | opacity :1; | ||
+ | transform: translateY(0); | ||
+ | } | ||
+ | |||
+ | .Scroll-to-top:hover { | ||
+ | color :rgba(255, 255, 255, 0.9); | ||
+ | } | ||
+ | |||
</style> | </style> | ||
</html> | </html> |
Revision as of 09:26, 20 August 2018