Skip to main content
100%

designer

✓ Published0🌍 Public
Aac1714
Last edited Oct 23, 2014
Created on Oct 23, 2014

This example demonstrates a mobile-style scrollable interface using Polymer’s custom element and material design components. It shows a tall content section with a gradient background, while a toolbar condenses as the user scrolls. The code relies on `core-scroll-header-panel`, `core-toolbar`, and `core-icon-button` from Polymer’s core set, with a static `section` of 5000 pixels height. The toolbar includes back, search, and overflow icons, plus a title, but no data binding or interactive behavior beyond the scrolling header effect.

AI-generated description

Similar vizzes

Loading thumbnail…

designer

This example shows a web page overlaying a Google Map with a floating card containing a toolbar and a slider control, designed as a Polymer custom element. The map is rendered via a Google Maps iframe, while the interactive card uses Polymer’s `core-card`, `core-toolbar`, `core-icon-button`, and `paper-slider` components. The code imports these components as HTML imports and defines the layout with absolute positioning and CSS styling inside a `<template>` tag. No data source or dynamic behavior is present; the visualization simply demonstrates a static dashboard layout using Polymer’s material design components.

TTBD
73% match
Loading thumbnail…

designer

This example presents a quiz demo interface built with Polymer, using a grid of colored category tiles. Each tile contains a large icon from the `category-icons` import and a labeled bottom section, with categories like Food, General Knowledge, History, and Geography. The layout is defined through Polymer’s `<polymer-element>` template, CSS styling, and flexbox-based attributes (`layout`, `horizontal`, `center-justified`) to position tiles within a 420×582 pixel section. The toolbar displays the title “Quiz Demo,” and the code uses core-icon elements to render the icons, with no external data source or interaction logic included.

Aali-bugdayci
70% match
Loading thumbnail…

Sample_Leaflet_scrollytelling

This example demonstrates a scrollytelling layout where scrolling through text sections triggers changes in a fixed visual panel. The page uses a two-column design: a scrollable column containing narrative content and a fixed column that updates its displayed information based on the visible section. The code leverages HTML, CSS, and JavaScript to implement the scroll-driven interaction, with `addEventListener('scroll', ...)` detecting visibility changes. It includes the Leaflet and D3 libraries as dependencies, though the core functionality focuses on DOM manipulation for content swapping rather than map rendering. The visible logic handles two content sections, with conditional checks to toggle between corresponding fixed content panels.

FFrancesco Di Filippo
60% match
Loading thumbnail…

Untitled Document

This example presents a sports news interface styled as a dark-themed mobile app layout, built with React and CSS Grid. It includes a header with user controls, a horizontally scrollable scores bar displaying team logos and match results, and a filter bar for content categories. The main content area renders articles with full-width images, gradient overlays, and overlaid text using absolute positioning, alongside an audio item grid. The interface relies on Google Fonts (League Gothic and Spartan) for typography and custom CSS classes to manage layout and interactive states.

Llupica.matthew@gmail.com
60% match
Loading thumbnail…

Sample for FCC user

This example demonstrates a sticky navigation bar that changes its position based on user scrolling. The page features a hero image with a portfolio introduction, followed by sections for an "About Me" bio and a "Concepts" grid showcasing three project thumbnails (Google Search Page, Pixel Maker, and JavaScript Documentation). The navbar starts at the bottom of the hero section and becomes fixed at the top of the viewport once the user scrolls past the about section, using a scroll event listener and class toggling in JavaScript. The design uses a clean, responsive layout with CSS positioning and hover effects on project cards. Built with React, this example illustrates how to implement a sticky navigation bar that transitions from an absolute to a fixed position based on scroll behavior.

Aandrewbt
59% match
Loading thumbnail…

scroll-unfixed

This example demonstrates a scrollytelling technique using an internal scrolling container instead of fixing a graphic to the viewport. A large orange div with `overflowY: scroll` contains an SVG of randomly generated line paths, and as the user scrolls, each line’s opacity changes based on its associated scroll position. The visualization uses D3v4 for DOM manipulation and SVG generation, and listens to the container’s `scroll` event to update line opacity dynamically, with layout handled through simple inline styles.

11wheel
58% match
Loading thumbnail…

polymer 1.0 d3 bar chart

This example shows a bar chart of letter frequencies, where each bar’s height is proportional to its frequency value. The visualization is built as a reusable Polymer 1.0 custom element, using D3.js to handle scales, axes, and the bar geometry. The code explicitly sets up an ordinal x-scale and linear y-scale, formats the y-axis as percentages, and appends SVG rectangles for each data point. Data is passed as a JSON string property and parsed into the chart, with the SVG rendered inside a `<div>` within the element’s shadow DOM. The axes and bars are styled via Polymer’s scoped CSS, and the chart updates when the data property changes.

HHypercubed
58% match
Loading thumbnail…

Gist 70b6d2687f7832a6ef333872bb170b2d

This example demonstrates a responsive application layout with a collapsible sidebar navigation, built using React and Tailwind CSS. The sidebar includes a logo, search input, and navigation items with icons from the Untitled UI icon library. It uses Headless UI’s `Transition` and `Dialog` components to animate a slide-in mobile menu with overlay backdrop, while desktop layout relies on conditional `clsx` classes for active states. The code shows a `Sidebar` component that accepts navigation items as props, with default items for Home, Simulations, Feedback, and Resources.

EErnestoR
57% match