Category Archives: CSS

A Fun Experiment with Swirling Text

Share this:  

I’ve had, for awhile, various ideas for doing the animation of text. Imagine (if you will), your user clicks on something on the page, and this cool animation of swirling letters happens, and the letters come together to for some paragraphs of text.

Then your user clicks a DONE button, let’s say, and those same paragraphs explode into a swirl of letters which now fly apart and disappear off the edge of the screen.

A few months back I started working on some code to do this. What I got done was JavaScript code that takes the text in the paragraphs and puts a special SPAN tag around each character in these paragraphs, gives them a special class name, and a unique id.

That is as far as I got.

Well yesterday, I decided to pick up this little project again and I surprisingly got a working example! Usually stuff like this takes a bit of debugging before it starts to cooperate with me!

Below, embedded on this blog post is the Pen that I created in Code Pen to do this.

It is just an experiment. But I think a successful one! Try clicking the buttons in it to see it in action. I designed it on my iMac and made no attempt to make it work perfectly on a mobile device. Again, it is just an experiment.

Anyways, enjoy!

See the Pen Formatting a Paragraph for Text Animation by Orville Chomer (@orvilleChomer) on CodePen.0

Note that the DIV with the red border has overflow set to hidden. This is to keep crazy scroll bars from appearing while letters are flying around.

Thinking About a Redesign… Again

Share this:  

I am getting thoroughly dissatisfied with the design of my web site again. I’m looking for that right balance of nice presentation, easy updating, good navigation, etc.

I’ve not found it yet.

Simplify. Simplify. Simplify!

More and more lately I’m out trolling the Net looking for some good site design examples that capture the essence of what I’m looking for. I’ve been tweeking around with some CSS and HTML locally on my computer trying to find that magic something or other.

It shouldn’t have to be this hard!

I’ve been pondering just making my whole site a blog. One thing is for sure, I’d really like it to be some sort of complete content management system (one that would run on my web host and not cost allot, and has the features I want).

Of course this has gotten me back to thinking about writing my own CMS. I’ve started and abandoned this idea several times! I have written simple CMSes before. I used to have a site: “vbmaster.net” It used a CMS I wrote in ASP/MS Access. It worked pretty well. I got sick of running it and so I stopped. I lost ownership of the domain due to letting it expire and some spammer has the domain now.

That CMS was primitive. Too primitive for what I want to do now.

And, naturally, that got me thinking about the Movieland Directory. This site has a CMS that I wrote. Well, I started working on a newer, better design for this site months ago. I left off working on it quite awhile back though. Well, allot of what I need is already done. So I started thinking about picking up work on this project again. The point though: thinking only! No actual work on it yet!

I think that I have software constipation right now! 😛

More about the Site’s Look

Share this:  

I started doing some investigating on what I would like as far as my site’s appearance. This is not going to be something that changes over night. More and more I’m realizing that to capture what I’m looking for is going to take a lot of thought, research, and testing. Ah well.

One of the ideas floating around in my mind is having videos on every page that are ambient. That is stuff automatically playing when the page comes up, little or no sound, and displaying in a subtle way that contributes to the “feeling” I’m trying to capture.

I did a first experiment here and found as I suspected, that the flash video player I used is an actual “window” as far as Microsoft architecture goes. What that means is that I cannot overlap it with a layer… i.e. DIV tags, etc. This rules out allot of concepts (unless I learned to use Flash).

There is still allot to look into. Allot about using color, layout, etc.