GIMPER.NET - The Gimp Community

The GIMP Community
It is currently Sun Jul 13, 2014 12:20 am


All times are UTC




Post new topic Reply to topic  [ 5 posts ] 
Author Message
PostPosted: Mon Apr 25, 2011 2:10 am 
Offline
Hero Member
User avatar

Joined: Sat Nov 13, 2010 6:42 pm
Posts: 590
Location: Rockford, IL
Click Here: To View The Demo!

Image

All the divs should all fade in only if you're using -webkit meaning if you're a safari, or chrome user. (I could of easily done it in JQuery, however I wanted to make this entirely in CSS3, except you can't click and drag divs in CSS3 yet, so that was the only thing I used JQuery for)

The background was made in Gimp. Everything else was done in code, besides the images in the divs, and thoughs you can change yourself.

Also feel free to adjust the CSS however you want, like positioning adding more than 10 images, etc:

Attachment:
photogallery-weblayout.zip


NOTE: If you want to takeout the fade in animation you need to takout these codes inside the style.css file.

The code below is located in div.
Code:
   -webkit-animation-name:fade-in;
   -webkit-animation-duration:2s;
   -webkit-animation-timing-function:ease-in;
   -webkit-animation-iteration-count:1;


The code below is located in galleryline.
Code:
   -webkit-animation-name:fade-in;
   -webkit-animation-duration:1s;
   -webkit-animation-timing-function:ease-in;
   -webkit-animation-iteration-count:1;


Also on the very top of the CSS document you'll need to remove this code,
Code:
@-webkit-keyframes fade-in {
   0% {
      opacity: 0;}
   50% {
      opacity: 5;}
   100% {
      opacity: 1;}}


Now if you want all the divs to fade in, but your browser doesn't support it, just put down the following code inside <script type="text/javascript"> (which is located in index.html) which is where the JQuery code below will go.
Code:
   $(document).ready(function() {
      $( "div" ).hide();
      $("div").fadeIn(1000);
   });


You do not have the required permissions to view the files attached to this post.

_________________
Image


Top
 Profile  
 

Free Photo Gallery Web Layout


Sponsor

Sponsor
 

PostPosted: Mon Apr 25, 2011 8:45 pm 
Offline
Global Moderator
User avatar

Joined: Thu Jul 02, 2009 1:00 pm
Posts: 6810
Location: Norway/Norge/Norwegen
Okay... That... was... cool... ;D

_________________
Got möp?
Image
SOTW #1 ^
"Photoshop!? You don't need no stinkin' Photoshop" - We'll show you the power of the Gimp!!!
---
Honest CnC always beats crap CnC
Baum wrote:
I think it doesnt has to be mentioned that self-voters have a small p....hotograph :D


Top
 Profile  
 
PostPosted: Tue Apr 26, 2011 12:09 am 
Offline
Hero Member
User avatar

Joined: Sat Nov 13, 2010 6:42 pm
Posts: 590
Location: Rockford, IL
Thanks

_________________
Image


Top
 Profile  
 
PostPosted: Thu Apr 28, 2011 9:24 pm 
Offline
Global Moderator
User avatar

Joined: Thu Jul 02, 2009 1:00 pm
Posts: 6810
Location: Norway/Norge/Norwegen
Q: Can you make a tutorial about the fade animation ?
I could probably teach myself by looking at the code, but its so versitile and if you made a tut its easier to understand the animation part of css!
I would suggest make a "hover" thingy and then when you hover it animates a smooth trasition over to an image with a soft glow on the text ?
do you get me ?

_________________
Got möp?
Image
SOTW #1 ^
"Photoshop!? You don't need no stinkin' Photoshop" - We'll show you the power of the Gimp!!!
---
Honest CnC always beats crap CnC
Baum wrote:
I think it doesnt has to be mentioned that self-voters have a small p....hotograph :D


Top
 Profile  
 
PostPosted: Sun May 01, 2011 10:55 am 
Offline
Hero Member
User avatar

Joined: Sat Nov 13, 2010 6:42 pm
Posts: 590
Location: Rockford, IL
Yeah I get you. I have a tutorial coming up on the fundamentals on HTML, and another one on CSS that way people can stop asking me the same questions. After that I'll be doing more CSS3 tutorials, and JQuery.

_________________
Image


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
cron


Powered by phpBB® Forum Software © phpBB Group