Keyword

TOPIC:

Webdesign and coding 9 years 5 months ago #31838

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
Wow, check this out - text that seems to write itself. Pretty awesome :

codepen.io/ghep.../pen/xnezB

Got the code working as well and can now animate writing for pretty much any font with Inkscape.

:woohoo:

It's a bit of a learning curve again but this sort of svg animation (supported IE9+) is quite excellent.

Please Log in to join the conversation.

Last edit: by Edou.

Webdesign and coding 9 years 5 months ago #31915

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
Made my own scribble on Codepen as well, after noticing CSS animation was having difficulties on IE.
This version's based on jQuery animate so should be have broad browser support.

B)

codepen.io/Shik...pen/wBwVVJ

Didn't realise so many people were browsing that site, 700 views in a day. :blink:

Please Log in to join the conversation.

Last edit: by Edou.

Webdesign and coding 9 years 5 months ago #31935

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
More coding fun - and some Inkscape creativity :

codepen.io/Shik...pen/yyLEBp

:)

Please Log in to join the conversation.

Webdesign and coding 9 years 4 months ago #32065

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
A first CSS 3D transformation experiment - shadows originally look the same as the other text but are then rotated around the x-axis (in 3D space perspective), stretched and blurred (the latter only if you're not using IE) :

codepen.io/Shik...pen/RNPRBL

:cheer:

Pretty great stuff, CSS3...
The jQuery fun part is that any text can be directly created by changing a single variable at the top of the script.

Please Log in to join the conversation.

Last edit: by Edou.

Webdesign and coding 9 years 4 months ago #32090

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
Not to blow my own horn or anything but this one turned out quite spectacular. Comes down to png images (the outer particles) being guided along a vector path (the ellipses, created with Inkscape) to resemble orbit.

codepen.io/Shik...ll/myJNaQ/

B)

Please Log in to join the conversation.

Last edit: by Edou.

Webdesign and coding 9 years 4 months ago #32133

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
Hey guys,

Some feedback on this one would be great.
I'm trying to make a lightweight jQuery draggable plugin that is compatible with touch events as well.
But not having a similar gadget, I can't check if it works.
So if anyone has an Android or iOS tablet, could you check if the square can be dragged around?

codepen.io/Shik...ditors=011

I don't think Codepen works very well on mobile (yet), otherwise that would have been interesting too.
Thanks in advance.

:)

Please Log in to join the conversation.

Last edit: by Edou.

Webdesign and coding 9 years 4 months ago #32154

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
Tested (and working) on Windows Phone and iPad. :cheer:

Please Log in to join the conversation.

Webdesign and coding 9 years 4 months ago #32358

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
The ultimate page magnifier - got nice tricks to it :

codepen.io/Shik...ll/GgZZab/

Definitely worth a look!

Please Log in to join the conversation.

Last edit: by Edou.

Webdesign and coding 9 years 2 months ago #33117

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
Ever spent way too much time searching for what font is used exactly (on a scanned object for example)?
Might be worth trying this one first when the next time comes :

www.myfonts.com/WhatTheFont/

B)

Please Log in to join the conversation.

Webdesign and coding 9 years 1 month ago #33793

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
Gave my main domain site a pretty good overhaul :

ataredo.com

Swipe and instantaneous mousewheel scroll are coded for navigation. Plus some other neat tricks...

B)

Oh yeah, completely responsive to all screen size (which seems to be the thing these days).

Please Log in to join the conversation.

Last edit: by Edou.
Moderators: caprinutstingray-63AndyAus
Time to create page: 0.179 seconds
Cookies are required to make this site work. If you continue to use this site you permit us to use cookies.