recentpopularlog in

piperh : animated   46

CSS Animation Libraries | CSS-Tricks
look at loads of sites offering pre-made css animations
webdesign  web  design  css  animation  effect  animated 
9 weeks ago by piperh
3 logical alternatives to animated GIFs - Builtvisible
alternatives to animated gif explained: html5 <video>, css only, background-image sprite
gif  animated  animation  video  html5  css  sprite  webdesign  web  design 
10 weeks ago by piperh
Create an animated scroll cue - CSS Animation
animated scrollability indicator - eg arrow at bottom of page pointing downwards
webdesign  web  design  css  animated  animation  arrow  scroll  scrollability  scrollable  indicator 
june 2019 by piperh
How to Create and Animate Rotated Overlays | Codrops
A tutorial on how to create and animate rotated overlays, or "reveal" elements, for interesting page transition effects.
webdesign  web  design  reveal  hide  transition  page  effect  rotate  overlay  animated 
june 2019 by piperh
Hamburger 3D CSS Switch animation
codepen example of an animated hamburger icon with a 3D turn effect
webdesign  web  design  css  code  hamburger  menu  icon  animation  animated 
may 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
Cool Backgrounds
interesting backgrounds: trianglify etc plus the web code for installing on a site
webdesign  web  design  graphic  background  image  colour  gradient  animated  generator  code 
january 2019 by piperh
Improve Animated GIF Performance With HTML5 Video — Smashing Magazine
shows how to use html5 native video instead of animated gif. Also shows how to convert gifs to webm or mp4
webdesign  web  design  animated  gif  webm  mp4  video  html5  animation 
november 2018 by piperh
SVG Marching Ants | CSS-Tricks
marching ants effect on outlines using svg
webdesign  web  design  graphic  svg  css  code  coding  marching  ants  animation  animated 
october 2018 by piperh
Having fun with link hover effects | CSS-Tricks
a couple of OK hover effects, and some terrible ones
webdesign  web  design  hover  effect  link  css  animated 
october 2018 by piperh
Principle - Animated Design
they say: Principle makes it easy to design animated and interactive user interfaces.
$129 app for Mac, for creating animated interactions and flows
webdesign  web  design  animate  animated  interaction  flow  ui  effect  app  mac  tool  animation 
september 2018 by piperh
Introducing F2 – Sima – Medium
they say: An elegant, interactive and flexible charting library for mobile.
I've no idea how this works ("based on html5 Canvas") but might be worth finding out if I need charts and graphs. Some nice interactive effects.
webdesign  web  design  mobile  chart  library  interactive  animated  graph 
september 2018 by piperh
Animated SVG Icons - Lordicon - created for web and mobile projects
animated icons free for download. I think they depend on hover, so don't do anything on touchscreen
web  graphic  design  svg  icons  animated  hover 
august 2018 by piperh
Tappy loader
humorous loader icon of tapping fingers
webdesign  web  design  css  codepen  loader  symbol  animation  animated 
june 2018 by piperh
Stylized Buttons
codepen of button css animations. Possibly useful how-to ref, using position absolute and :before :after
webdesign  web  design  css  hover  animation  animated 
march 2018 by piperh
gifski — highest-quality GIF converter
converts video frames to gif. Author says: This is a GIF. It's hugely inefficient like any GIF, but now at least looks fine!
webdesign  web  design  video  motion  animation  animate  gif  performance  image  animated 
march 2018 by piperh
Introducing SpinKit | Tobias Ahlin
animated loading symbols. Quite classy and makes unusual change from default. CSS only
webdesign  web  design  animate  animated  animation  spinner  loader  symbol  css  css-only 
october 2017 by piperh
Animating Link Underlines | Tobias Ahlin
animated link underline - the underline appears and draws outwards from centre. V easy to apply, uses a transform.
webdesign  web  design  animated  animate  animation  link  underline  hover  transform 
october 2017 by piperh
Animated handwriting effect (part 1) by Craig Roblewsky on CodePen
tutorial, progressively drawing a handwriting-type line - actually it's a path I think. Uses Greensock plugins - check out greensock 'cos it has ton of effects, very smooth and slick
webdesign  web  design  animate  animated  animation  effect  handwriting  script  draw  javascript  js 
april 2017 by piperh
Recambios coche baratos: Repuestos de coches online y Recambios de Automóvil viaweb, Piezas para vehículos descuento
online spares shop. Bookmarked for ecommerce design sample as well as usefulness for spares. Interesting use of slideshow - some slides fade in and then also have animation
car  parts  coche  recambios  animate  gif  animated  animation  slideshow  ecommerce  online  shop  store 
march 2017 by piperh
styles for Nicolas Hoffman simple modal animated
within styles search for: STYLES FOR MODAL WINDOWS, EXAMPLES. Shows his css styles for animating his modal window examples. The page about his modal is here: https://a11y.nicolas-hoffmann.net/modal/
nicolas  hoffman  css  modal  simple  animated  styles  examples  window 
january 2017 by piperh
Using CSS to animate border-radius Chris Ruppel
explanation of some effects achievable with css on borders - give a sort-of hand drawn look
webdesign  web  design  css  technique  effect  animate  animation  border  radius  animated 
december 2016 by piperh
The Coming Revolution in Email Design · An A List Apart Article
24.11.16. roundup of current and soon-to-be email design possibilities, though rather general and short of specific references
email  design  graphic  client  technique  css  html  animated 
november 2016 by piperh
Creating the Invisible Pen Effect in SVG using Vivus.js
tutorial on using a js tool for creating animated path drawing of svg's
web  graphic  design  animation  svg  animate  animated  path  vector  drawing  illustration  draw  invisible  pen  inline  js  javascript 
november 2016 by piperh
Animated CSS Underline Hover Examples
css-only animated underline. Rather neat, no js, but on touch screen (iOS, haven't tried Android) makes links require 2 taps - don't know why.
This is copied to a html page on my disc - see code samples
webdesign  web  design  css  html  underline  effect  transition  css-only  animated  hover 
november 2016 by piperh
text-spinners – tawian
code for applying rather retro loading animations (spinners, he calls them)
webdesign  web  design  spinner  load  loading  indicator  animation  animated  css  html  motion 
october 2016 by piperh
wrk - French Creative Web Studio
v nice small french design studio website with nice use of animation.
webdesign  web  design  graphic  animation  ideas  inspiration  studio  animated  illustration  css 
october 2016 by piperh
Animating Vectors with SVG ◆ 24 ways
good resource with tips about using svg's for older browsers, and how to animate
webdesign  web  design  svg  vector  animate  animation  animated  illustration  illustrate  draw  drawing  line 
september 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
html5tooltips.js - Tooltips with smooth 3D animation
a js tooltip with ready-made attributes and colour collection. No jQuery
webdesign  web  design  tooltip  animated  animation  animate  javascript  js 
october 2015 by piperh
We Be Scrolln' | by Stephen Scaff
a jquery scroller for one-page sites using attributes as targets
webdesign  web  design  scroll  scroller  jquery  js  one-page  single-page  website  target  attribute  animate  animated 
july 2015 by piperh

Copy this bookmark:





to read