recentpopularlog in

piperh : script   256

« earlier  
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 
yesterday 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 
14 days ago by piperh
Efficiently load JavaScript with defer and async
about using 'defer' and 'async' with script tag, and the position of the script.
webdesign  web  design  webdev  development  speed  performance  render  rendering  script  blocking 
26 days ago 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 
5 weeks ago 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 
7 weeks ago 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 
9 weeks ago 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 
11 weeks ago 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 
12 weeks ago 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 
12 weeks ago 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
Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
1st para: This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019.
webdesign  web  design  frontend  front-end  html  css  script  js  education  resources  learning  developer 
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
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 - pehaa/beerslider: A vanilla JS keyboard accessible plugin for any before-after comparison
vanilla js script for making an over-image slider to compare two different overlaid images, "before and after" type
webdesign  web  design  image  comparison  slider  before  after  compare  js  javascript  script 
october 2018 by piperh
GitHub - stutrek/scrollmonitor-parallax: A simple parallax API
not sure if this is useful for me, but pinning it anyway in case
webdesign  web  design  parallax  scroll  effect  js  javascript  script  api 
september 2018 by piperh
Siema - Lightweight and simple carousel with no dependencies
nice simple vanilla js slideshow - 3k gzipped he says. Don't know about unequal photos - needs checking if you use this
webdesign  web  design  js  javascript  script  carousel  slideshow  vanilla  swipe 
september 2018 by piperh
Guide | ScrollOut
scroll animation library. Allows you to assign css as an element comes into/out of view. Works in both directions of vertical scroll.
Nice on the first view but could get to be annoying
webdesign  web  design  js  javascript  script  scroll  animation  effect 
september 2018 by piperh
Beer Slider Responsive & Accessible Before-After Slider – Demo – PEPSized
js (vanilla or jQuery) code to make a sliding image reveal, for comparing two overlaid images.
webdesign  web  design  slider  comparator  compare  slide  image  photo  split  comparison  reveal  overlay  js  javascript  script 
september 2018 by piperh
Pushbar.js demo
Pushbar.js is a tiny javascript plugin for creating sliding drawers in web apps
It is fully customizable and dependency free.You can use it as sidebar menus or option drawers. With option to blur background content. Vanilla js
webdesign  web  design  menu  sliding  panel  door  overlay  js  javascript  script  vanilla  modal 
august 2018 by piperh
GitHub - RevillWeb/img-2: Replace <img /> elements with <img-2> to automatically pre-cache images and improve page performance.
they say: Img2 will automatically:
• Only render initial images which are visible to the user
• Pre-cache all other images off the main thread with a Web Worker
• Lazy load images as they enter the user's viewport instantly from the cache
• Display a blurred preview image while the user waits for initial images
webdesign  web  design  img  performance  speed  optimise  pre-load  cache  images  js  javascript  script 
july 2018 by piperh
Priority Nav Scroller - Priority+ navigation in a horizontal scrollable container with controls
Priority Nav Scroller is a plugin for the priority+ navigation pattern. When the navigation items don’t fit on screen they are hidden in a horizontal scrollable container with controls.
Responsive - when window is wide enough, the arrows disappear.
webdesign  web  design  navigation  horizontal  scroll  priority  scroller  nav  js  javascript  script 
july 2018 by piperh
GitHub - hodgef/simple-keyboard: Javascript On-screen Virtual Keyboard - Customizable, responsive and lightweight
The easily customisable and responsive on-screen virtual keyboard for Javascript projects.
I wonder why you'd want this
webdev  development  virtual  online  keyboard  js  javascript  script 
july 2018 by piperh
UI composition & animation in pure HTML | layerJS
interesting library for constructing pages and transitions, using frames and layers
webdesign  web  design  transition  js  javascript  script  frame  layer  effect  animation  animate  ui  ux  pattern  library 
july 2018 by piperh
7 essential free tools for web animation | Creative Bloq
a short list of js and css tools and libraries for animating
webdesign  web  design  css  animate  animation  js  javascript  script 
june 2018 by piperh
Responsive Table | Jeremy Church
A mobile-friendly table solution, which persists headers for each table-cell on mobile devices.
webdesign  web  design  css  js  javascript  script  table  cell  header  responsive 
june 2018 by piperh
Hyphenopoly.js | Hyphenopoly
Hyphenopoly.js is a JavaScript-polyfill for hyphenation in HTML: it hyphenates text if the user agent does not support CSS-hyphenation at all or not for the required languages.
Maybe handy for non-supported language or old browser?
webdesign  web  design  text  hyphen  hyphenate  polyfill  js  javascript  script  hyphenation 
june 2018 by piperh
GitHub - Simonwep/event: Very small and simple utility to bind Event-listeners to elements.
Very small and simple utility to bind Event-listeners to elements. I don't know enough js to understand what you'd use this for, but I might need to know one of these days
webdesign  web  design  js  javascript  script  event  listener  webdev  library 
june 2018 by piperh
Timeline Line
A tiny library to draw a line around DOM elements. It's beta for now and only works on vertical timelines.
Makes an svg line around stuff if you need a timeline type of layout
webdesign  web  design  line  vertical  timeline  js  javascript  script 
june 2018 by piperh
Easy Toggle State
a js library to enable typical ui toggle effects and needs, like dropdowns, accordion, collapsible panel, switch, and more. With code examples and with added ARIA.
They say: Only set a few HTML attributes, and code the rest with your CSS skills.
3.6k compressed
webdesign  web  design  js  javascript  script  library  toggle  dropdown  navigation  button  tooltip  collapse  collapsible  modal  popup  switch  checkbox  radio 
june 2018 by piperh
GitHub - snipsco/yett: 🔐A small webpage library to control the execution of (third party) scripts
A small webpage library to control the execution of (third party) scripts like analytics. You can then ask user to accept cookies and collection of analytics.
webdesign  web  design  webdev  development  gdpr  privacy  data  collection  analytics  cookie  control  js  javascript  script 
june 2018 by piperh
GitHub - mnater/Hyphenopoly: JavaScript polyfill for client-side hyphenation
author says: Hyphenopoly.js is a JavaScript-polyfill for hyphenation in HTML: it hyphenates text if the user agent does not support CSS-hyphenation at all or not for the required languages.
webdesign  web  design  hyphenate  hyphenation  js  javascript  script  polyfill 
june 2018 by piperh
GitHub - pqina/filepond: 🌊 A flexible and fun JavaScript file upload library
they say: A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
webdesign  web  design  upload  js  javascript  script  library 
may 2018 by piperh
What is JSON? An Introduction and Guide for Beginners
1st para: If you’re new to web development and have some basic knowledge of HTML, CSS, and possibly a little bit of JavaScript, a practical area in which to expand your front-end skills is JSON.
from the Web Tools newsletter guy, Louis Lazaris
webdesign  web  design  code  coding  json  guide  introduction  js  javascript  script  object  notation 
may 2018 by piperh
Launchy! – An Accessible Modal Window
tabbing stays within modal window when it's invoked - needs the js file (not jquery)
webdesign  web  design  modal  launchy  window  popup  accessible  accessibility  js  javascript  script 
may 2018 by piperh
GitHub - lmgonzalves/path-slider: Animating Elements Along SVG Paths with Javascript
Animating Elements Along SVG Paths with Javascript.
they say: Sliding elements along SVG paths
webdesign  web  design  animate  animation  svg  js  javascript  script  path 
may 2018 by piperh
Peekaboo
they say: Fires a one-time event whenever elements of your choice are about to scroll into the viewport. Perfect for triggering animations or for just-in-time asset loading
webdesign  web  design  js  javascript  script  scroll  viewport  animation  jit  load  loading  just-in-time  lazy  window 
april 2018 by piperh
Introduction · Front-End Developer Handbook 2018
Front-End Developer Handbook 2018. Lots of links and reference to learning, tools, advice, lists, front end, back end, js and lots more
webdesign  web  design  css  html  learn  learning  code  coding  tools  js  javascript  script 
april 2018 by piperh
Tippy.js - Vanilla JS Tooltip and Popover Library
Tippy.js they say: A highly customizable vanilla JS tooltip & popover library
webdesign  web  design  js  javascript  script  tooltip  popover  library  vanilla 
april 2018 by piperh
Micron.js - Webkul
micro animations for click interactions. Requires js lib. Possibly useful for quick gimmick but a bit naff and adds bloat
webdesign  web  design  js  javascript  script  css  animation  micro  library  ui 
april 2018 by piperh
TOAST UI :: Make Your Web Delicious!
they say: TOAST UI Chart supports an easy way to draw various and essential charts on your web service. Open-source JavaScript library.
Looks v interesting and doable even by me. Data can be taken from a db or not.
webdesign  web  design  webdev  development  chart  browser  pie  graph  line  js  javascript  script 
march 2018 by piperh
Delighters
js library for animating layout effects on page scroll. You can control when they begin and end. They do happen again if you go back to top and scroll down anew. Could be good for an artworkers.net site if you were to do one, Peter!
webdesign  web  design  js  javascript  script  scroll  effect  animation  css 
march 2018 by piperh
Swapping Images with the Sizes Attribute | Filament Group, Inc., Boston, MA
brilliant use of css and js with srcset and size to achieve zoom effect or magnifying glass on hover. Requires jQuery
Consider this for barcelonaprints instead of fancybox
webdesign  web  design  js  javascript  script  jquery  enlarge  zoom  lupe  magnifier  magnify  glass  image  srcset  size  attribute  css 
march 2018 by piperh
Loading Third-Party JavaScript  |  Web Fundamentals  |  Google Developers
developers.google article about loading 3rd party js.
examples: social sharing buttons, video embeds, ad iframes, analytics, a/b testing scripts, helper libraries
webdesign  web  design  js  javascript  script  external  load  security  performance  privacy  tracking 
march 2018 by piperh
Metafizzy
makers of js plugins (need jQuery I think) for swiping, dragging, layout, carousel. Flickity could be useful.
webdesign  web  design  isotope  flickity  metafizzy  effect  js  javascript  script  jquery  plugin  swipe  infinite  scroll  layout  carousel  slideshow  draggable  drag 
february 2018 by piperh
Hammer.JS - Hammer.js
They say: add touch gestures to your webapp.
webdesign  web  design  mobile  touch  screen  gesture  tap  swipe  press  js  javascript  script 
february 2018 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read