recentpopularlog in

piperh : javascript   547

« earlier  
Snap.svg - Home
they say: SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
svg  animation  animate  animated  js  javascript  script  vector  webdesign  web  design  webdev 
4 days ago by piperh
Simple Image Placeholders with SVG - Cloud Four
author says: a tiny, dependency-free library called Simple SVG Placeholder. It generates data URIs for placeholder img elements. (uses js)
You get a grey rectangle with image size written in middle.
webdesign  web  design  image  placeholder  generator  svg  js  javascript  script 
7 days ago by piperh
Accessible Dropdown Menu Component In Vanilla JavaScript - a11y-dropdown-component | CSS Script
heading: Accessible Dropdown Menu Component In Vanilla JavaScript – a11y-dropdown-component, with code
webdesign  web  design  menu  dropdown  accessible  accessibility  a11y  js  javascript  script 
21 days ago by piperh
Library Detector - Chrome Web Store
Chrome extension: detects and shows js libraries functioning in a site
webdesign  web  design  webdev  js  javascript  script  library  tool  extension  chrome 
29 days ago by piperh
Material design style click effects with pointer events and CSS Custom Properties – Ben Frain
a howto build a 'material design' type of click effect (works also on touch). Useful to see the js and explanation of the construction and how you can pass classes from js to css
webdesign  web  design  code  coding  js  javascript  script  css  animation  click 
29 days ago by piperh
A11y Toggle
edenspiekermann page that explains how to use their accessible js toggle
webdesign  web  design  ally  toggle  accessible  accessibility  js  javascript  script  vanilla 
4 weeks ago by piperh
Smooth Scrolling Sticky ScrollSpy Navigation – Bram.us
article showing how to code for 'scroll spy' - effect that highlights your scroll position on a permanent sticky menu. Sort of a tail wagging the dog thing.
webdesign  web  design  scroll  spy  navigation  position  effect  css  js  javascript  script 
5 weeks ago by piperh
ken-burns-slideshow Demo
copy and paste library for a ken burns carousel
webdesign  web  design  kenburns  ken  burns  slideshow  carousel  css  transform  js  javascript  script 
6 weeks ago by piperh
Conditional operators: if, '?'
javascript.info pages about if/else and else/if
learning  learn  js  javascript  script  if  else 
7 weeks ago by piperh
SortableJS
js library for making reorderable drag-and-drop lists
webdesign  web  design  webdev  development  js  javascript  script  list  reorder  reorderable  drag  drop  drag-and-drop  sort 
11 weeks ago by piperh
The Typed Object Model
about using typed object model to access both css value and unit separately instead of as a string like '10px'. When I know js maybe this will be handy!?
webdesign  web  design  webdev  js  javascript  script  css  development  code  coding  typed  object  model  om  api 
11 weeks ago by piperh
GitHub - terwanerik/ScrollTrigger: Let your page react to scroll changes.
script that allows class toggle when object enters viewport, to trigger transitions or animations. Simplest most basic would be fade in on entering window but allows for more sophisticated use that I wouldn't be able to do until I learn more js.
webdesign  web  design  js  javascript  script  scroll  window  trigger  position  viewport  visible  toggle  library  animation  animate 
11 weeks ago by piperh
Swiper - Most Modern Mobile Touch Slider
free mobile touch slider with hardware accelerated transitions and native behaviour. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. lots of demos to show possibilities
webdesign  web  design  slider  touch  mobile  js  javascript  script 
12 weeks ago by piperh
JAMstack | JavaScript, APIs, and Markup
A modern architecture —
Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.
Sites depend on js running on the client.
webdesign  web  design  webdev  js  javascript  script  api  static  jamstack  stack  architecture 
november 2019 by piperh
GitHub - niksy/x-autosuggest: Autosuggest results based on input.
I think this auto suggests countries or maps in a form input when user begins typing. Triggers when 2 or more characters. Useful for Bcnprints cart?
webdesign  web  design  webdev  js  javascript  script  autosuggest  auto  suggest  form  input  query  country  map 
november 2019 by piperh
simpleParallax - a JavaScript library for parallax effects
check this out carefully before use - the scroll effect in their examples on my laptop was horrible
webdesign  web  design  parallax  effect  js  javascript  script 
november 2019 by piperh
The perfect responsive menu (2019) | Polypane responsive browser
lean css + vanilla js responsive nav menu with toggle for hamburger/menu. Haven't tested it ...
webdesign  web  design  nav  navigation  menu  css  js  javascript  script  responsive  toggle  html 
october 2019 by piperh
The Modern JavaScript Tutorial
js from scratch, starting with the programme itself and later its use with browsers and web pages
js  javascript  script  learn  learning  course  programme  programming  program  browser  web 
october 2019 by piperh
JavaScript Foundations | Gymnasium
they say: JavaScript Foundations will teach you the fundamentals of programming with JavaScript and get started on the road to its mastery. Prior experience with HTML & CSS is recommended.
js  javascript  script  learn  learning  course  tutorials 
october 2019 by piperh
Practical JavaScript | Watch and Code®
they say: Practical JavaScript
Build a strong JavaScript foundation for web development
Free to enrol
js  javascript  script  programming  learn  learning  webdev  web  development  free 
october 2019 by piperh
Eloquent JavaScript
a book about js - about the programme rather than with tutorials
js  javascript  script  book  program  programme  programming 
october 2019 by piperh
How To Code in JavaScript | DigitalOcean
JavaScript is a high-level, object-based, dynamic scripting language popular as a tool for making webpages interactive. Basic and not-so-basic js tutorials, for beginners I think
webdev  js  javascript  script  tutorial  teaching  learn  learning 
october 2019 by piperh
Avoid 100vh On Mobile Web | chanind.github.io
Explains that 100vh on mobile sets vh to height of window with address panel hidden, so that when address bar is visible then window is smaller but vh won't update itself.
See comments at bottom for workarounds
webdesign  web  design  webdev  mobile  css  100vh  vh  100  height  screen  viewport  js  javascript  script  window  innerheight 
october 2019 by piperh
Swapping Out Text, Five Different Ways | CSS-Tricks
5 ways to toggle text content of a button on click, using js only or jQuery or css only (hacky)
webdesign  web  design  toggle  swap  css  js  javascript  script  content  coding  code  button 
october 2019 by piperh
Efficiently load third-party JavaScript  |  web.dev
advice about 3rd party js script loading, to optimise performance
webdesign  web  design  webdev  code  coding  js  javascript  script  defer  async  load  loading  performance  speed  optimise 
october 2019 by piperh
GitHub - scottaohara/accessible_components: Listing of accessible components & patterns
a library of usable components, some vanilla, some with jquery.
Accordions, Disclosure widgets, Modal dialogues, Tab widgets, Switch toggles, Tooltips, Links, Buttons, Breadcrumbs, and maybe more
webdesign  web  design  accessible  components  js  javascript  script  jquery 
september 2019 by piperh
Guide | Splitting.js
splitting.js Allows you to split text into words or chars so as to target them individually - you can then apply, say, animations in js or in css.
webdesign  web  design  animation  animate  js  javascript  script  splitting.js  effect  word  character  letters 
september 2019 by piperh
A Pen by Captain Anonymous
demo of splitting.js Allows you to split text into words or chars so as to target them individually - you can then apply, say, animations in js or in css.
webdesign  web  design  animation  animate  js  javascript  script  splitting.js  effect  word  character  letters 
september 2019 by piperh
GitHub - malchata/yall.js: A fast, flexible, and small SEO-friendly lazy loader.
yall.js This is written by person writing a google devs page about lazy loading. Using it on artworkers site possibly
webdesign  web  design  js  javascript  script  lazy  load  loading  lazyload  performance  img  image 
august 2019 by piperh
Lazy Loading Images and Video  |  Web Fundamentals  |  Google Developers
Google developers page about lazy loading, with links to some popular js-only libraries.
webdesign  web  design  webdev  img  image  lazy  load  lazyload  loading  performance  speed  js  javascript  script 
august 2019 by piperh
How to Add Smooth Scrolling with Inner Image Animations to a Web Page | Codrops
the scrolling really is smoother than normal, but looks like a bit of a hassle to implement. There's a following article about applying effects while smooth scrolling (sort of parallaxy effects)
webdesign  web  design  js  javascript  script  smooth  scroll  effect 
august 2019 by piperh
Smooth Scrolling Image Effects | Codrops
about some effects applicable while using smoothScroll. It seems to depend on some js
webdesign  web  design  animation  animate  smooth  scroll  effect  js  javascript  script 
august 2019 by piperh
Chart.xkcd | xkcd styled chart lib
Chart.xkcd is a chart library plots “sketchy”, “cartoony” or “hand-drawn” styled charts.
webdesign  web  design  graphic  sketchy  cartoony  charts  plot  line  bar  pie  js  javascript  script 
august 2019 by piperh
GitHub - russellgoldenberg/scrollama: Scrollytelling with IntersectionObserver.
Scrollama is a modern & lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events. - difficult to categorise, but effects are cool, possibly useful somewhere
webdesign  web  design  scroll  effect  scrollytelling  scrolly  js  javascript  script  sticky  overlay  position  detection  detect  intersection  observer 
august 2019 by piperh
8 DOM features you didn’t know existed - LogRocket Blog
intro: take a closer look at some pure DOM and Web API features that work in modern browsers with no dependencies.
Some of this I may never need, but vanilla js smoothScroll tip is handy
webdesign  web  design  webdev  development  js  javascript  script  dom  smooth  scroll 
august 2019 by piperh
Classic Dad Joke
handy bit of js showing how to use a submitted value. Also shows you can write a css style within the document.write output
js  javascript  script  snippet  variable  get 
july 2019 by piperh
Prevent Page Scrolling When a Modal is Open
quite a fiddly faffy solution to the problem of scrolling page behind modal, but presumably does work.
webdesign  web  design  modal  scroll  window  js  javascript  script  css  ui 
july 2019 by piperh
Parallax scrolling - CSS Animation
a paralllax solution using a vanilla js script. Good breakdown of how it works. Also has a link to a pure css parallax effect
webdesign  web  design  parallax  scroll  animation  js  javascript  script  rallax  effect 
june 2019 by piperh
GitHub - tomhodgins/computed-variables: Easy to use event-driven CSS variables
a js plugin that can change css variable values based on events in the window or on indiv tags. Could be handy sometime, if I could figure out how to apply it.
webdesign  web  design  css  variables  custom  properties  js  javascript  script 
may 2019 by piperh
fullPage.js | One Page Scroll sections Site Plugin
vanilla js for creating pages with snapping vertical scroll, and also allows horizontal scrolling slideshow type. Lots of extensions, including with continuous and with bullet position markers. Responsive.
webdesign  web  design  js  javascript  script  vanilla  css  fullpage  single  page  scroll  vertical  horizontal 
may 2019 by piperh
Styling Based on Scroll Position | CSS-Tricks
js for modifying css depending on scroll position, by Chris Coyier. Starts with Rik Schennink js (that I've pinboarded separately) then recommends IntersectionObserver and presents another js solution.
webdesign  web  design  scroll  css  js  javascript  script  position  add  modify  class  change  style  data-scroll  styling 
may 2019 by piperh
GitHub - scaleflex/js-cloudimage-360-view: Engage your customers with a stunning 360 view of your products
they say: A simple, interactive resource that can be used to provide a virtual tour of your product. Their demo is impressive.
Effect is useful - I don't know how you generate the necessary images.
webdesign  web  design  graphic  360  view  spin  turn  image  degree  panorama  js  javascript  script 
may 2019 by piperh
simple popover — week 16/52
nice design for popover card on hover, like a tooltip. Uses css and vanilla js
webdesign  web  design  popover  pop  over  css  js  javascript  script  tooltip  hover  popup  card 
may 2019 by piperh
[no title]
scroll effects - OK on touchscreen but rather dull on desktop with mouse
webdesign  web  design  scroll  effects  js  javascript  script  animation  library 
april 2019 by piperh
GitHub - github/details-menu-element: A menu opened with a <details> button.
using <details> and <summary> html tags to open a menu of radio buttons. The selected text then appears in the <detail> text when the menu is collapsed.
Could be handy sometime
webdesign  web  design  js  javascript  script  html  detail  summary  button  radio  tag 
march 2019 by piperh
instant.page
js that triggers preload of the html of a linked page when you hover the link. Seems dubious to me, but what do I know?
webdesign  web  design  webdev  development  js  javascript  script  speed  performance  instant  page  preload  preloading  html  hover  click 
march 2019 by piperh
GitHub - transloadit/uppy: The next open source file uploader for web browsers
they say: "Uppy is a modular JavaScript file uploader that integrates seamlessly with any application ... fast, easy to use"
webdesign  web  design  js  javascript  script  file  upload  uploader  interface 
february 2019 by piperh
Applying Styles Based on the User Scroll Position with Smart CSS • PQINA
title: Applying Styles Based on the User Scroll Position with Smart CSS
webdesign  web  design  scroll  position  style  css  page  offset  html  js  javascript  script 
february 2019 by piperh
The developer’s guide to native web animation - Heart Internet Blog - Focusing on all aspects of the web
9.2.19 Outline of methods for achieving native animation in a site - css, web animations api (waapi), javascript
webdesign  web  design  animation  animate  methods  techniques  native  tools  css  api  waapi  js  javascript  script 
february 2019 by piperh
wiv.js
js library for animated wavy borders
webdesign  web  design  js  javascript  script  border  wavy  animated  animate 
february 2019 by piperh
TOAST UI :: Make Your Web Delicious!
service that renders charts and graphs on your site. Don't know how it works or how it draws in the data, but looks v interesting.
webdesign  web  design  chart  graph  graphic  bar  pie  line  js  javascript  script  column  data 
january 2019 by piperh
SortableJS
JavaScript library for reorderable drag-and-drop lists
webdesign  web  design  js  javascript  script  reorder  reorderable  list  shared 
january 2019 by piperh
jquery - JavaScript EU cookie law banner not removing - Stack Overflow
an important mod for the cookie consent code found at
https://gist.github.com/bavington/6727776
This mod solves the problem on tria site where it prevented the onload script in body tag from adding the .loaded class.
cookie  law  eu  gdpr  consent  privacy  comply  compliance  code  modification  modify  stackoverflow  user  js  javascript  script 
january 2019 by piperh
Simple EU Cookie Law Banner JavaScript · GitHub
cookie consent code that I used on barcelonaprints and tria.
It clashes with some js "onload add class" code I wanted in the tria body tag.
This stackoverflow page solved the problem on tria: https://stackoverflow.com/questions/32573965/javascript-eu-cookie-law-banner-not-removing
webdesign  web  design  webdev  development  code  privacy  gdpr  consent  cookie  js  javascript  script 
january 2019 by piperh
LazyLoad (vanilla-lazyload) | LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images only as they enter the viewport. LazyLoad supports responsive images.
they say: LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images only as they enter the viewport. LazyLoad supports responsive images
webdesign  web  design  js  javascript  script  lazyload  image  speed  performance 
december 2018 by piperh
Glider.js - A fast, lightweight carousel alternative
a sort of substitute for a carousel (they say). Doesn't have infinite loop. Manual image change slider with touch feature
webdesign  web  design  slider  carousel  glider  js  javascript  script  slideshow 
december 2018 by piperh
Should I Use JavaScript to Load My Web Fonts? | Filament Group, Inc., Boston, MA
dec 2018 article comparing current font loading with css-only and with js. Seems like css only is good but js can enhance it a bit.
webdesign  web  design  font  loading  js  javascript  script  css  foit  fout  webfont 
december 2018 by piperh
howler.js - JavaScript audio library for the modern web
vanilla js library for running audio on the web. Supports many audio formats. I might conceivably find this useful sometime
webdesign  web  design  webdev  development  audio  html5  library  js  javascript  vanilla  sound 
november 2018 by piperh
CheckboxRadio
Styled checkbox and radio buttons from Filament but dependent on jQuery or Showstring (another js lib). Very nicely done but look like a fair amount of faff ( too much faff in fact for Amantaní ). The css file is long
webdesign  web  design  accessible  checkbox  radio  button  custom  filament  styled  css  js  javascript  script 
october 2018 by piperh
T-Writer Demo
demo of type writing effect script, with link to its github
webdesign  web  design  effect  writing  typewriter  typewriting  keying  library  js  javascript  script 
october 2018 by piperh
The Complete Guide to Lazy Loading Images | CSS-Tricks
Various methods for implementing lazy - js, intersection observer API. Some resource links at end
webdesign  web  design  images  lazy  load  loading  speed  performance  js  javascript  script  api 
october 2018 by piperh
GitHub - Paul-Browne/lazyestload.js: load images only when they are in (and remain in) the viewport
load images only when they are in the viewport or 100px beneath. There's also a version that waits until user has stopped scrolling
lazyload  lazy  images  js  javascript  load  speed  performance  scroll  viewport 
october 2018 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read