logo-dw

Go Back   Dreamweaver Club Forums > Graphic Design > Web Design
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 06-25-2012, 11:51 PM   #1
kremo5le
kremo5le's Avatar
 
Join Date: Nov 2008
Location: San Diego, California
Posts: 112
Exclamation Special Effect Using CSS & Other Stuff

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.
__________________
Otter Creative Studio
San Diego Web Design, SEO, & Graphic Design
kremo5le is offline   Reply With Quote
Old 06-26-2012, 12:50 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Quote:
Originally Posted by kremo5le View Post

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.
domedia is offline   Reply With Quote
Old 06-26-2012, 02:05 PM   #3
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 06-28-2012, 04:53 PM   #4
kremo5le
kremo5le's Avatar
 
Join Date: Nov 2008
Location: San Diego, California
Posts: 112
Exclamation Responsive Web Design & Media Queries

Quote:
Originally Posted by domedia View Post
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.
__________________
Otter Creative Studio
San Diego Web Design, SEO, & Graphic Design
kremo5le is offline   Reply With Quote
Old 06-28-2012, 04:53 PM   #5
kremo5le
kremo5le's Avatar
 
Join Date: Nov 2008
Location: San Diego, California
Posts: 112
Exclamation

Quote:
Originally Posted by gentleone View Post
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.
__________________
Otter Creative Studio
San Diego Web Design, SEO, & Graphic Design
kremo5le is offline   Reply With Quote
Old 07-02-2012, 12:50 PM   #6
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

I think you're talking about a parallax effect kremo5le.

There are some jQuery plugins available for this. http://stephband.info/jparallax/
domedia is offline   Reply With Quote
Old 07-03-2012, 01:36 AM   #7
kremo5le
kremo5le's Avatar
 
Join Date: Nov 2008
Location: San Diego, California
Posts: 112
Arrow jQuery Parallax

Quote:
Originally Posted by domedia View Post
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!
__________________
Otter Creative Studio
San Diego Web Design, SEO, & Graphic Design
kremo5le is offline   Reply With Quote
Old 07-13-2012, 01:38 PM   #8
blanchard
blanchard's Avatar
 
Join Date: Dec 2004
Location: Preston, Lancashire. UK
Posts: 216
Default

Hello,
That JQuery parallax effect is impressive, I'm going to have to have a bash at that me thinks.
__________________
What's Brown And Sticky............A Stick
blanchard is offline   Reply With Quote
Old 07-13-2012, 06:54 PM   #9
kremo5le
kremo5le's Avatar
 
Join Date: Nov 2008
Location: San Diego, California
Posts: 112
Lightbulb

Quote:
Originally Posted by blanchard View Post
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!
__________________
Otter Creative Studio
San Diego Web Design, SEO, & Graphic Design
kremo5le is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:46 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com