scroll down hint (a0c72e0d) · Commits · github_fork / Clip

fnordmetric-doc/TODO

+0 −3

Original line number	Diff line number	Diff line

		[ doc ]
		- html5 api references
		- pictures in getting started server
		- chart 2d/3d signature doc
		- all the doc links

		[ frontend ]
		- embed popup

+66 −0

Original line number	Diff line number	Diff line
		@@ -730,3 +730,69 @@ p + .fancybutton {
		.fm_preview.show_output .input {
		display: none;
		}

		.scroll_hint {
		text-align: center;
		font-weight: 500;
		color: #fff;
		font-size: 120%;
		text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
		position: relative;
		top: -15px;
		-webkit-transition: opacity 0.6s;
		transition: opacity 0.6s;
		}

		.scroll_hint .ico {
		margin: 0 auto 15px auto;
		border-radius: 50%;
		width: 36px;
		height: 36px;
		border: 2px solid #fff;
		position: relative;
		-webkit-animation: scrolldownanim 1s infinite ease-in-out;
		animation: scrolldownanim 1s infinite ease-in-out;
		}

		.scroll_hint .ico .tri {
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 13px solid #fff;
		margin: 14px auto;
		}

		.scroll_hint.hidden {
		opacity: 0;
		}

		@media (min-height: 920px) {
		.scroll_hint {
		opacity: 0;
		}
		}

		@-webkit-keyframes scrolldownanim {
		0% {
		top: 2px;
		}
		50% {
		top: -5px;
		}
		100% {
		top: 2px
		}
		}

		@keyframes scrolldownanim {
		0% {
		top: 2px;
		}
		50% {
		top: -5px;
		}
		100% {
		top: 2px
		}
		}

+14 −0

Original line number	Diff line number	Diff line
		@@ -18,6 +18,20 @@
		<a class="fancybutton-light" href="/documentation">Read the Documentation →</a>
		</div>

		<div class="scroll_hint">
		<div class="ico"><div class="tri"></div></div>
		Scroll Down
		</div>
		<script type="text/javascript">
		window.onscroll = function (e) {
		var elem = document.body.querySelector(".scroll_hint");
		if (window.pageYOffset + window.innerHeight > 900) {
		elem.className = "scroll_hint hidden";
		} else {
		elem.className = "scroll_hint";
		}
		}
		</script>
		<br style="clear:both;" />
		</div>
		</div>