Tag Archives: CSS

A Fun Experiment with Swirling Text

Share this:  
Leave a comment

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.

Entity Render Experiment in CodePen

Share this:  
Leave a comment

Here is a little something that I’ve been messing around with in @CodePen. It renders the block diagram of a “data model.”  If you’ve ever used a modeling tool like Erwin this will look familiar…

Screen Shot of Model Render Demo

This is an experiment in rendering a lot of UI elements (entities) without having poor performance. In that, it will only render to the DOM entities that can currently be seen in the view port.

Right now, by default, it generates 200 entities. Try 2000 or 20000, or any other positive integer value, and see how it performs!

There are still a few bugs in it (its rendering too many entities at a time for example), but I think it proves its certainly possible.

You can try it yourself on CodePen here:     https://codepen.io/orvilleChomer/pen/NyXppd

Let me know what you think.

Web Page Resize Event Experiments

Share this:  
Leave a comment

I’ve got some specific JavaScript-based widgets that I want to develop. And I thought I’d share some of my design experiments with you.

This article delves into the idea of capturing the resize event of a DOM element to help create a better custom web page control using JavaScript and CSS. Then it discusses how these controls work, gives a few examples of commercially available controls, and then finally gives a suggested way to handle things when a custom control (that you have designed) is resized on your web page!

Read more

Thinking About a Redesign… Again

Share this:  
Leave a comment

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! 😛

The Look of the Site

Share this:  
Leave a comment

In the latest iteration of the look of Chomer.com and it’s blog, I was pretty satisfied. Now I feel a subtle discontent that is steadily growing. For one thing, the blog doesn’t render perfectly (I need to delve deeper into the CSS HTML machinations of WordPress). Even if I did get that straightened out, it’s just not quite what I’m looking for.

For starters, I want something that has a cleaner look. A bit more professional. But I also want it to be beautiful. A site that if someone appreciates beauty, they will come to the site just to look at it regardless of the content. I know, that sounds crazy, but I want something that I would just want to look at. A web site that is Art. Something you might think about putting in an art museum.

Of course that doesn’t mean that I don’t want to have content, and good content at that, but I want to strike that perfect blend of beauty and content.

It would be nice if the site layout/look were COMPLETELY separate from the content. Not just as far as files i.e. CSS, but something more dynamic, something where I can change the look on the fly and see what it will look like before I apply it. No, I’m not talking about canned blog Themes.

In the past I’ve kind of done a random, gut feel build-as-I-go type of design. I’m planning on doing some more thorough research on this subject. I do what to look at allot of blog themes, and allot of different web sites to see their page layouts/styles. I want to note down the ones that I find appealing.

There is a need to focus in on color. I am striving for a calm, relaxed, sort of zen feeling to the site.

Some of the ideas I want to do I’ve not seen anywhere. Many of these ideas I’ve partially proved as technically feasible. What I DON’T want to do is take a great idea and implement it in a sloppy manner.

Allot of thought needs to go into how the navigation works on the site. How the pages are laid out.

I’m also thinking about using my Renegade web framework on my own site. This would give it some credibility as well as improve the overall user experience on Chomer.com.

Do you have any ideas, do you know of any examples I might like? Point them out to me. Any constructive criticism is greatly appreciated.