#Gyro

Use Gyro Data to Make Your React App More Interactive

JavaScript Gyro

Learn JavaScript device orientation API (with react) which might give you some inspirations about building an interactive App.

Jun 25, 2023 Front-End About 15 min read

Lynan

Live Young n Act Now.

54 Posts / 5 Categories / 28 Tags / 2 Series

.hdr-info-wrap { display: none; } #back-to-top { transform: translateY(0); pointer-events: all; opacity: 1; } .lazyload-wrap { display: none; } .post-cover-img-wrap .cover-img { opacity: 1 !important; } #gitalk-container { display: none; } .hdr-switch { display: none; } #toc-toggle { display: none; } .button.rss { margin-right: 0 !important; } .copy-btn { display: none; } #page-donates { display: none; } #post-age-warning { display: none; } #toc .toc-item-wrap:not(.active) { opacity: unset; transition: unset; } #toc:hover .toc-item-wrap:not(.active) { opacity: unset; } #toc .toc-item-wrap.active .toc-item-link { font-weight: normal; color: #333; } #toc .toc-item-wrap.active .toc-item-link::before { display: none; } #toc .toc-item-wrap.active .toc-item-link:not(.active) { opacity: unset; } #toc .toc-item-wrap.active .toc-sub-item-link:not(.active) { opacity: unset; } #post .post-meta #content-switch { display: none; } #post figure.highlight.folded, #raw-markdown-block figure.highlight.folded { max-height: unset; overflow-y: auto; } #post figure.highlight.folded .fold-toggle, #raw-markdown-block figure.highlight.folded .fold-toggle { display: none; } .image-grid.scroll, .image-grid.slider, .image-grid.switcher { display: flex !important; gap: var(--image-grid-gap) !important; overflow-x: auto !important; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; } .image-grid.scroll .grid-item, .image-grid.slider .grid-item, .image-grid.switcher .grid-item { display: block !important; flex: 0 0 min(86%, 760px) !important; width: min(86%, 760px) !important; margin-right: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; scroll-snap-align: center !important; transition: none !important; } .image-grid.scroll .grid-item .lazyload-wrap, .image-grid.slider .grid-item .lazyload-wrap, .image-grid.switcher .grid-item .lazyload-wrap { display: none !important; } .image-grid.scroll .grid-item .caption, .image-grid.slider .grid-item .caption, .image-grid.switcher .grid-item .caption, .image-grid.scroll .grid-item .pswp-caption-content, .image-grid.slider .grid-item .pswp-caption-content, .image-grid.switcher .grid-item .pswp-caption-content { display: block !important; } .image-grid.scroll .grid-item .lazyload-outer-wrap noscript, .image-grid.slider .grid-item .lazyload-outer-wrap noscript, .image-grid.switcher .grid-item .lazyload-outer-wrap noscript { display: block; } .image-grid.scroll .grid-item .lazyload-outer-wrap noscript img, .image-grid.slider .grid-item .lazyload-outer-wrap noscript img, .image-grid.switcher .grid-item .lazyload-outer-wrap noscript img { display: block; width: 100%; height: auto !important; margin: 0 auto !important; } .image-grid.switcher .image-grid-switcher-controls { display: none !important; }