recentpopularlog in

piperh : vanilla   50

Awesome accordion menu using only HTML & CSS
nice expanding/collapsing menu with no js. Has an extra 'accordion' effect which is daft, ignore it, the main expanding feature seems good (but test it thoroughly)
webdesign  web  design  menu  expand  collapse  css  vanilla  code 
4 weeks ago by piperh
Building a modern carousel with CSS scroll snap, smooth scrolling, and pinch-zoom | Read the Tea Leaves
css/html only carousel. Be careful, doesn't work in any browser on my iPad (feb 2019). Hacky. No continuous scroll - you have to go back when you reach final image. Authors blog design is horrible.
webdesign  web  design  scroll  carousel  vanilla  css-only  snap  pinch  zoom 
12 weeks ago by piperh
autoComplete.js - Vanilla Javascript library
they say: Simple autocomplete pure vanilla Javascript library.
Not v impressed by demo, but maybe it depends on database/dictionary that it draws from.
webdev  web  development  js  vanilla  autocomplete  form  search  field 
january 2019 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
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
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
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
How To Make A Drag-and-Drop File Uploader With Vanilla JavaScript — Smashing Magazine
Smashing article: How To Make A Drag-and-Drop File Uploader With Vanilla JavaScript
webdesign  web  design  upload  drag  drop  file  interaction  js  javascript  script  vanilla 
february 2018 by piperh
zoom-vanilla.js 2.0.5 on npm - Libraries.io
a js zoomer. They say: A simple library for image zooming; as seen on Medium.
webdesign  web  design  js  javascript  script  zoom  vanilla  image  enlarge 
january 2018 by piperh
How To Create a Slideshow
great vanilla js slideshow at w3schools, with captions and dots and poss to put anything in the dot divs (eg, numbers, thumbnails. Returns to beginning at the end, and vice versa. Used it for MediCarrera logo presentation. Also, automatic version.
webdesign  web  design  slideshow  js  javascript  script  vanilla  image  gallery  slider 
june 2017 by piperh
Toggleclass with pure Javascript | Snippet Repo
vanilla js snippet for toggling a class on an element. Only worked with getElementById, wouldn't work with getElementsByTagName
Used it on poh template for slide-in menu
webdesign  web  design  js  javascript  script  toggle  vanilla  toggleclass 
may 2017 by piperh
Demo | MoveTo.js
they say: A lightweight scroll animation javascript library without any dependency
webdesign  web  design  scroll  js  javascript  script  vanilla  animation  animate 
march 2017 by piperh
GitHub - stutrek/scrollMonitor: A simple and fast API to monitor elements as you scroll
The scroll monitor allows you to receive events when elements enter or exit a viewport. Vanilla js
webdesign  web  design  plugin  javascript  vanilla  js  scroll  scrolling  viewport  monitor  watch  event  element 
january 2017 by piperh
Force.js
vanilla js script for page scrolling effects. can be linked to jquery if you know what you're doing. Full suite of easing effects.
webdesign  web  design  js  javascript  vanilla  scroll  jump  hash  link  page  effect  step  ease  move  animate  animation  css 
december 2016 by piperh
A11y Dialog
accessible js-only modal window, no dependencies. Frend modal is developed from this I think. Freedom to style the css
Webdesign  web  design  css  modal  html  code  coding  window  popup  js  javascript  script  vanilla 
november 2016 by piperh
Carousels Don't Have to be Complicated - The Media Temple Blog
roundup of simple carousels, mostly vanilla js, one with jquery, a couple with no script at all.
webdesign  web  design  css  carousel  html  javascript  js  vanilla  chris  coyier  slideshow  slider 
november 2016 by piperh
CSSslidy
vanilla js and css slideshow. Allows for captions.
webdesign  web  design  js  javascript  vanilla  slider  slideshow  carousel  image  css 
october 2016 by piperh
lory
vanilla js slideshow. Can also use jQuery. Can accommodate multiple width slides.
They say: Touch enabled minimalistic slider, Hardware accelerated transitions.
webdesign  web  design  slider  slideshow  js  javascript  vanilla  touchscreen  touch  carousel  image  slide 
october 2016 by piperh
Quick Tip: Add or Remove a CSS Class with Vanilla JavaScript
article explaining 2 mthods for using vanilla js to and remove classes to elements
webdesign  web  design  code  coding  vanilla  js  javascript  class  name  add  remove  apply  user  action  browser 
october 2016 by piperh
GitHub - jshjohnson/Animate: A tiny (5KB) vanilla JS script to trigger animations on elements when they are within the viewport 👓
vanilla js to animate elements when they appear in viewport.
Seems to work not only on the first appearance. Their demo is quite annoying, but if the animations were simpler it could be usable.
webdesign  web  design  js  javascript  script  vanilla  viewport  animate  animation  scroll  element  div  view  screen 
august 2016 by piperh
67 Open Source Modal Window Plugins Made with jQuery, JavaScript, CSS, and more!
a selection of modal window solutions. Includes fancybox (currently on Tria site) and some css only solutions.
A vanilla-js or css-only would be ideal for ph bookmarks
webdesign  web  design  modal  popup  window  jquery  js  javascript  css  selection  plugin  vanilla 
august 2016 by piperh
Simple JavaScript class toggle using classList
codepen showing use of vanilla js to toggle a class. Shows the html, css and js. In this case the class is toggled on a different element to the clicked one. Play with it!
Instead of 'click' you can use 'mouseover'. Or instead of toggle you can add or remove.
webdesign  web  design  js  javascript  vanilla  code  coding  css  html  toggle  class  add  remove  element 
july 2016 by piperh
ScrollTrigger - Scroll based animations with ease
Triggers classes on html elements based on the scroll position. vanilla js library to enable scroll based animations. Once you've initialised the js the animations happen in html/css
webdesign  web  design  scroll  animation  js  vanilla  javascript  animate  library  trigger 
july 2016 by piperh
Force.js
nice vanilla js to animate page scroll. Could be ideal for a one-page site. jQuery optional. Some of the animations use css, some use js. Lots of options for the effects and possibility to use for moving objects around the page
webdesign  web  design  animate  animation  scroll  snap  anchor  element  move  css  js  javascript  jump  easing  vanilla 
april 2016 by piperh
Intro.js - Step-by-step guide and feature introduction for your website
nice js to make a step by step guide to something on a web page. Progressively highlights the steps you want to show.
webdesign  web  design  js  javascript  vanilla  step-by-step  highlight  guide  feature  show  help  window  tooltip 
march 2016 by piperh
Introducing A11y Toggle
great code snippet for vanilla js toggle script
webdesign  web  design  js  javascript  vanilla  toggle  aria  script  details  summary  style  css 
march 2016 by piperh
mblode/burger · GitHub
vanilla js slide-in, animated three-bar icon menu.
menu items slide in but panel appears via opacity (I think).
Used it on some amantaní pages, december 2018
webdesign  web  design  burger  hamburger  menu  navigation  animation  animated  js  javascript  vanilla 
january 2016 by piperh
Lazy Loading Images on the Web -Telerik Developer Network
roundup of a few lazy loading options, some with jQuery, some vanilla, but all look fairly easy to implement
webdesign  web  design  image  lazy  loading  size  time  weight  page  webpage  load  javascript  jquery  vanilla  howto  comparison 
october 2015 by piperh
desandro/classie · GitHub
lightweight vanilla js for adding removing toggling classes, but could be too nerdy for me. No instructions, no manual of how to apply or what events it could react to.
webdesign  web  design  js  javascript  add  remove  toggle  class  css  vanilla 
may 2015 by piperh
Responsive & Fixed One Page Nav
very nice js functionality for show/hide menu and one-page navigation. the icon transform is css only though the toggle clss needs script. No jQuery needed or other external dependency.
webdesign  web  design  vanilla  js  javascript  navigation  nav  responsive  menu  icon  hamburger  X  transform  transition  css  html 
may 2015 by piperh
Isotope
js package for laying out in blocks which are then arranged together neatly. Blocks can be filtered and sorted. Can be used with jQuery or vanilla js
web  design  webdesign  layout  grid  filter  sort  js  javascript  vanilla  jquery  effects 
april 2015 by piperh
Masonry
js (jQuery or vanilla) grid layout library, similar to isotope. They say: "It works by placing elements in optimal position based on available vertical space"
webdesign  web  design  js  javascipt  vanilla  cascading  grid  library  jquery 
april 2015 by piperh
Responsive Nav — Responsive Navigation Plugin
on git-hub there's a multiple-levels branch but has two niggles. You can't dismiss opened dropdown on touch screen, and you can't swipe if you touch on a menu item with sublink in it.
I'm not sure if above is still true (10.5.15) - in any case seems to work nice on menu without submenu
Rec'd by Philippe Wittenbergh on css list.
webdesign  web  design  responsive  mobile  menu  js  javascript  navigation  nav  code  coding  toggle  three-line  script  vanilla 
may 2014 by piperh

Copy this bookmark:





to read