Post Reply 

Free Photo Gallery Web Layout

Apr 25, 2011, 02:31 (This post was last modified: Apr 25, 2011 06:44 by mikethedj4.)
Post: #1
Free Photo Gallery Web Layout
Click Here: To View The Demo!

   

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:

.zip  photogallery-weblayout.zip (Size: 183.63 KB / Downloads: 82)

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);
    });

[Image: gimppimp_forum_sig_by_mikethedj4-d39msp7.png]
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Photo BloodArt-Gallery WDHellS 3 403 Jun 27, 2014 15:53
Last Post: WDHellS
  My Signature Gallery MissSilverfish 4 989 Jul 27, 2012 12:11
Last Post: ofnuts
  xMisplaced Gallery~ xMisplaced 0 597 Nov 5, 2011 06:16
Last Post: xMisplaced
  Free Video Intro For You Guys! mikethedj4 0 1,248 Jun 2, 2011 03:22
Last Post: mikethedj4
  Another Free Web Layout mikethedj4 0 834 Jun 1, 2011 13:59
Last Post: mikethedj4

Forum Jump:


GIMP ForumPortalArchiveContactTermsRSS