PDA

View Full Version : Special Effect Using CSS & Other Stuff


kremo5le
06-25-2012, 11:51 PM
Hey guys,

I have a personal project I am working on and, for now, I want to display just my logo. That is it. http://elliumeffect.com/

I will use an HTML5 skeleton to make it a responsive site and then what I want to accomplish is this:

1. I will separate the text from the rest. I also want the red cloud to be a single layer.

2. As users shrink their screen (if they do it anyhow) these 3 layers sort of move in a way they feel separate. Perhaps use jQuery or something to add some fade in or something.

3. As you see, if you shrink the window it doesn't quite re-size in a cool way. I just made it so the image would always be shown but what I want is to use the responsive features to play around with positioning of the 3 elements (space, cloud, logo).

Let me know what you think.

domedia
06-26-2012, 12:50 PM
2. As users shrink their screen (if they do it anyhow) these 3 layers sort of move in a way they feel separate. Perhaps use jQuery or something to add some fade in or something.

I would not worry about this. When a user looks at your web site on a desktop and then on their phone or tablet it looks fine. The resizing of the browser is just what you're doing during development. Very few is going to also do that, and it's not really the point of responsive design.

Next step is probably for you to look into media queries so you can get the design to adapt.

gentleone
06-26-2012, 02:05 PM
Domedia is right. The only ones that are resizing there browser windows are web designers/developers.

However for smartphone or tablet users you can make use of CSS3 transitions/animations on your media queries. You can create nice effects on elements with that if they rotate their device from portrait to landscape and vice versa.

kremo5le
06-28-2012, 04:53 PM
I would not worry about this. When a user looks at your web site on a desktop and then on their phone or tablet it looks fine. The resizing of the browser is just what you're doing during development. Very few is going to also do that, and it's not really the point of responsive design.

Next step is probably for you to look into media queries so you can get the design to adapt.

Hi Domedia,

Thank you for you post. I actually want to do it to practice. This is more of an exercise than anything else. Correct, media queries and modify the layout is one thing I want to do.

I have designed responsive sites already and I am working my way up by doing more complicated stuff. I am a bit tired of being so marketing, what-works oriented; I want to be artistic and come up with something different. This is why I want to do this. :wink:

kremo5le
06-28-2012, 04:53 PM
Domedia is right. The only ones that are resizing there browser windows are web designers/developers.

However for smartphone or tablet users you can make use of CSS3 transitions/animations on your media queries. You can create nice effects on elements with that if they rotate their device from portrait to landscape and vice versa.

Thank you Gentleone. My response to Domedia applies to your comment too.

domedia
07-02-2012, 12:50 PM
I think you're talking about a parallax effect kremo5le.

There are some jQuery plugins available for this. http://stephband.info/jparallax/

kremo5le
07-03-2012, 01:36 AM
I think you're talking about a parallax effect kremo5le.

There are some jQuery plugins available for this. http://stephband.info/jparallax/

One word defines exactly what I am looking for: THANKS DOMEDIA! :mrgreen:

blanchard
07-13-2012, 01:38 PM
Hello,
That JQuery parallax effect is impressive, I'm going to have to have a bash at that me thinks.

kremo5le
07-13-2012, 06:54 PM
Hello,
That JQuery parallax effect is impressive, I'm going to have to have a bash at that me thinks.

Aye! Me thinks too. Nice avatar! :p