recentpopularlog in

piperh : slide   44

Slide an Image to Reveal Text with CSS Animations | CSS-Tricks
code howto: Slide an Image to Reveal Text with CSS Animations
webdesign  web  design  css  animation  animate  slide  reveal 
february 2019 by piperh
Creating sliding effects using sticky positioning | CSS-Tricks
Using position: sticky to show and hide elements within a container. A sort-of poor man's parallax. No support in IE but otherwise good.
webdesign  web  design  css  sticky  position  fixed  show  hide  slide 
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
Swiper - Most Modern Mobile Touch Slider
swipe capable slider - their own webpage is NOT responsive, though maybe the slider itself is, I don't know. Sliding action has a nice transition effect but not as great as they claim.
webdesign  web  design  swipe  touch  carousel  gallery  slide  slider  framework  js  javascript  script 
january 2018 by piperh
library of css animations for buttons, modals, scrolls, nav, transitions, captions, tooltips, tabs. Useful, if the code is good. They claim to be performant, no janks
webdesign  web  design  css  transition  animation  effect  tab  button  slide  fade  modal 
november 2017 by piperh
vanilla ES6, expanding accessible (a11y) drop down accordion for expand/contract texts. Options for open by default, only one div open at a time, and togglable/not togglable. Looks simple and neat
webdesign  web  design  accordion  slide  expand  expandable  accessibility  accessible  js  javascript  script  a11y  css  html  markup 
october 2017 by piperh
WebSlides: Create Beautiful HTML Presentations
ready-made pack (templates?) for making slide presentations using html and css. Some pre-made templates available. Customisable.
html  css  slide  presentation  webslides  present 
august 2017 by piperh
CSS sidebar toggle - SB
css-only slide-in sidebar (eg, for a menu) using translateX and checkbox. Smooth action (google recommend this type of transition and say don't use width 0 to 100 cos it causes redraws). Actually it isn't css only - there's some js for changed checkbox state
web  design  webdesign  code  css-only  css  checkbox  accessible  menu  sidebar  toggle  slide  slider 
april 2017 by piperh
CSS-only Sliding Panels using transforms
css-only sliding panels. Haven't studied this closely but initially I don't understand the css - why use :before ?
At StaE the images were incredibly slow to load, so was difficult to understand purpose of effect
webdesign  web  design  css  css-only  sliding  panel  transition  slide  transform 
november 2016 by piperh
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
Repaintless.css demo page
A lightweight css animation library that incorporates smooth animations.
webdesign  web  design  css  animation  animate  slide  tremble  loop  library 
april 2016 by piperh
slidr.js - add some slide effects.
no dependencies. Slides can be any html, inline, inline-block, block
webdesign  web  design  js  javascript  carousel  slideshow  slide  transition 
january 2015 by piperh
Sticky Captions Concept
possible for Mary's site, instead of current sliding code (which isn't touch-screen friendly)
webdesign  web  design  effect  slide  sliding  caption  transition  touch  screen  touchscreen  animation 
october 2014 by piperh
Implementing Off-Canvas Navigation For A Responsive Website | Smashing Magazine
"... by transitioning elements with 3-D transforms, the browser can generate render layers that are hardware-accelerated. There’s no need for JavaScript to worry about style or m-q breakpoints. JavaScript need only interpret user interaction and apply classes to maintain states - CSS defines the visual changes." Smooth on mobile.
webdesign  web  design  navigation  responsive  off-canvas  menu  css  nav  slide  slider 
august 2014 by piperh

Copy this bookmark:

to read