recentpopularlog in

piperh : effect   98

« earlier  
How to create clipped, blurred background images in CSS | CodyHouse
How to apply blur effects to images using CSS filters, and how to confine these effects to specific image areas.
webdesign  web  design  css  filter  clip  blur  effect  image  img  background  bg 
20 hours ago by piperh
SVG Filters
Playground for fiddling with and getting code for SVG filters.
graphic  design  image  text  effect  svg  tester  code  filter  playground 
november 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
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
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
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
CSS Duotone Generator
playground for css image blend effects. Photoshop-like blending modes. Give duotone-like effects. Generate the html and css
webdesign  web  design  css  blend  duotone  generator  effect  colour  html 
september 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
Using CSS Clip Path to Create Interactive Effects, Part II | CSS-Tricks
transition effects using svg clip path. Support better than css clip path, says author.
webdesign  web  design  clip-path  clip  path  svg  css  effect  transition  clipping 
september 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
Wicked CSS3 Animations
collection of css animations with code to copy
webdesign  web  design  css  animation  animate  effect 
june 2018 by piperh
Managing SVG Interaction With The Pointer Events Property — Smashing Magazine
about using pointer-events (the svg property) to control where clicks matter and where not
webdesign  web  design  pointer  events  click  touch  svg  ux  ui  effect 
may 2018 by piperh
Particle Effects for Buttons | Codrops
a disintegrate-to-particles effect on buttons. Didn't check to see if it's css or js
webdesign  web  design  animation  effect  button  particle  disintegrate 
may 2018 by piperh
Origami Studio — Design Prototyping
an interaction design app from facebook, for Mac. Free
graphic  webdesign  web  design  origami  facebook  app  software  mac  ios  android  animate  animation  ui  ux  effect  tool 
may 2018 by piperh
Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion | CSS-Tricks
Very easy to get a fold out / drop down type text with native css. Check compatibility on caniuse. Not very stylable but almost zero work to achieve.
webdesign  web  design  css  accordion  effect  fold  out  details  summary 
april 2018 by piperh
Bigs & Littles
interesting demo of transparency effect of overlaid characters using css opacity
webdesign  web  design  type  effect  character  alphabet  letters  opacity  overlay  transparent  transparency 
march 2018 by piperh
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 site if you were to do one, Peter!
webdesign  web  design  js  javascript  script  scroll  effect  animation  css 
march 2018 by piperh
CSS Techniques and Effects for Knockout Text | CSS-Tricks
words are clipped out of an element and reveal the background
webdesign  web  design  css  text  type  effect  knockout  overlay  blend  pierce  multiply  transition  mask 
march 2018 by piperh
Slice Revealer | Codrops
nice reveal effects on images, using slices that uncover image in animated way
webdesign  web  design  animate  animation  effect  reveal  slices  css  transition 
march 2018 by piperh
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
SVG Animation Creator - Animate and Export SVG | SVGator
title says: Animate SVG easily. Import, animate and export. online tool lets you import a graphic, choose animation and will export the code
webdesign  web  design  animate  animation  svg  illustration  graphic  effect  import  export  online  tool 
february 2018 by piperh
pagePiling.js plugin - Horizontal scroll
script that uses vertical scroll to give effect of horizontal pages sliding in. Rather elegant though can't right now see a use for it.
webdesign  web  design  js  javascript  script  jquery  scroll  horizontal  overlay  effect 
february 2018 by piperh
Fancy Loading
curious drop shadow animation effect on lettering
webdesign  web  design  animation  css  effect  shadow 
january 2018 by piperh
Sticky Slider Navigation (Responsive)
moving underline effect on menu as you scroll, to show current active part of list
webdesign  web  design  menu  navigation  effect  sticky  underline  scroll 
january 2018 by piperh
Progress Nav
interesting effect on menu as you scroll - highlights to current active part of list
webdesign  web  design  scroll  effect  menu  navigation 
january 2018 by piperh
CSS-only shimmering neon text
ingenious css-only neonish (sort of) animated effect on text
webdesign  web  design  css  neon  effect  colour  animate  animation 
january 2018 by piperh
Untitled Slider
nice slider change effect for images
webdesign  web  design  slider  carousel  effect  css  animate  animation  image 
january 2018 by piperh
Morphing Hamburger Menu with CSS
nice 'growing' effect for a hamburger menu. Author calls it morphing
webdesign  web  design  menu  navigation  effect  css 
january 2018 by piperh
Simple CSS text animation
simple effect of text sliding down, all css
webdesign  web  design  text  effect  animation  css 
january 2018 by piperh
Motion blur effect using SVG filters
nice blur effect on slide change in a carousel
webdesign  web  design  slideshow  carousel  motion  blur  svg  effect 
january 2018 by piperh
CSS grid meets Bauhaus
interesting underline effect for links
webdesign  web  design  css  hover  link  effect  transition  animation 
january 2018 by piperh
You searched for comparison - CSS Script
Interactive Diagonal Image Comparison With JavaScript
webdesign  web  design  image  comparison  js  javascript  script  effect 
december 2017 by piperh
CodePen - Image loading effects [background-size: 0, :before, :after]
Michal Niewitala says: Image loading effects [background-size: 0, :before, :after]
webdesign  web  design  effect  image  background  load  loading 
december 2017 by piperh
Text input highlight, TripAdvisor style – freeCodeCamp
they say: create a text input style like the search input on TripAdvisor.
webdesign  web  design  effect  underline  type  text  input  style 
november 2017 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
javascript library for obfuscating and revealing text in DOM elements. Nice unscrambling effect on letters to reveal a text
webdesign  web  design  effect  obfuscate  scramble  unscramble  reveal  type  text  letters  phrase 
september 2017 by piperh
explosion effect behind the appearance of modal window
webdesign  web  design  css  js  javascript  script  modal  explosion  effect  window  popup 
june 2017 by piperh
Tilt.js - A tiny parallax tilt effect for jQuery
jquery plugin to allow a hover tilt effect on an element. If you place another element above it produces a kind of parallax effect.
webdesign  web  design  effect  tilt  jquery  js  javascript  script  parallax  hover  angle  animation 
june 2017 by piperh
Mixfont | A modern font generator
a selection of text shadow examples with their css - handy maybe for quick copying
webdesign  web  design  css  colour  text  shadow  text-shadow  syntax  example  type  h1  headline  heading  effect 
june 2017 by piperh
Create Element Transitions with Vue.js by Christopher Murphy on CodePen
a js library for transitions. The case explained here is absurd - you can do the same with css only. But maybe vue.js has a use in more complex cases
webdesign  web  design  js  javascript  script  vue  transition  css  state  transform  effect 
may 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
GSAP, the standard for JavaScript HTML5 animation | GreenSock
Greensock, a free and paid js library for animations. There's a nice lib for animating text - some great effects possible. Has a morphing plugin
webdesign  web  design  js  javascript  script  animate  animation  tween  effect  transform  css  greensock  splittext  text  morph 
april 2017 by piperh
Building performant expand & collapse animations  |  Web  |  Google Developers
google article about performant and non-performant techniques for expand and collapse (eg, on Menu panels)
webdesign  web  design  expand  contract  animate  animation  effect  css  performant  transform  collapse  performance 
march 2017 by piperh
neat site showing css animations, with feature to change components and see the effect. Then generate the code and download
webdesign  web  design  animate  animation  css  code  playground  tool  generate  generator  experiment  live  effect  test 
march 2017 by piperh
they say: A set of UI interactions, effects and utilities components library
webdesign  web  design  js  javascript  script  flick  visible  scroll  ui  interaction  effect  component  library 
january 2017 by piperh
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
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
Performant Parallaxing  |  Web  |  Google Developers
handy article explaining best construction of parallax scrolling, with code examples. Done with css. Seems like one could just copy and paste and go - worth a try one day
webdesign  web  design  effect  parallax  scroll  css  html  code  coding  perspective  fancy 
december 2016 by piperh
CSSPIN - CSS Spinners and Loaders
some pre-coded css spinning and loading effects for shapes
webdesign  web  design  spinner  loader  css  effect  animation  transition 
december 2016 by piperh
myNoise™ • Focus@Work • Relax@Home • Sleep@Night
site with lots of different background sounds. Sliders let you control and mix components. V impressive.
noise  sound  relax  relaxing  audio  effect  background  resource 
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
Bouncy Ball - Compare Web Animation Techniques
round up of code and techniques for achieving bounce
webdesign  web  design  css  js  jquery  script  bounce  effect  animation  bouncey  ball 
august 2016 by piperh
The box-shadow Property
good reference for using box-shadow - shows order of values
webdesign  web  design  box-shadow  shadow  css  offset  blur  spread  color  position  effect  reference 
may 2016 by piperh
jQuery CollagePlus - an image gallery plugin by Ed Lea
will arrange your images to fit exactly within a container. Quite slow if you don't know image sizes. Can't see when I'd need this - but still, you never know
webdesign  web  design  jquery  effect  collage  stack  masonry  images  layout  gallery  plugin 
may 2016 by piperh
Animated Transition Effects in CSS and jQuery | CodyHouse
library of about 10 css animation effects.A couple of possibles but several feeble, too
webdesign  web  design  css  animation  animate  effect  transition  code  library 
may 2016 by piperh
Easing Functions Cheat Sheet
ingenious simple page to graphically show different easing effects. also describes plainly how to add
webdesign  web  design  easing  effect  function  js  javascript  css  code  coding  webdev  animation  animate  guide  reference 
april 2016 by piperh
GitHub - ademilter/bricklayer: Lightweight cascading grid layout library
They say: "Lightweight & independent cascading grid layout library. Inspired by and a lighter alternative to Masonry."
webdesign  web  design  css  js  javascript  masonry  alternative  cascade  floating  boxes  grid  effect 
april 2016 by piperh
library of css animations, for slidey, bouncey, rotatey effects. Could come in handy to save time figuring out the calculations for transforms. Can be used with jQuery, too. Code is on github at
webdesign  web  design  animation  animate  code  library  css  effect 
march 2016 by piperh
CodePen - StickyStack.js
makes pages look like they're stacking up as you scroll down. Needs long scrollable pages. Probably works best with photos that cover page. requires jquery.
webdesign  web  design  jquery  js  javascript  stack  effect 
december 2015 by piperh
demonstration of css animation using nth-child or nth-of-type in a numbered order on a grid of divs. Could be a useful effect for the AOPC logo (which would 100% constructable solely in css).
webdesign  web  design  css  animation  animate  effect  tool  nth-child  nth-of-type  demo  sample  demonstration 
september 2015 by piperh
jQuery Popdown Plugin Demo
like a popup but pops down from top of screen. You can click anywhere to dismiss the window
webdesign  web  design  effect  jquery  popdown  popup  window  js  script 
september 2015 by piperh
Hover.css - A collection of CSS3 powered hover effects
some nice effects, some naff. they don't all work very well on touch screen - check before using any of these
webdesign  web  design  hover  effect  css  button  link  transition 
june 2015 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:

to read