Free Photo Gallery Web Layout

Discussion in 'Other' started by mikethedj4, Apr 25, 2011.

  1. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    Click Here: To View The Demo!

    [​IMG]

    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:



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

    Attached Files:

  2. Maffe811

    Maffe811 The forum pet Staff Member

    Joined:
    Jul 2, 2009
    Messages:
    6,811
    Likes Received:
    1
    Trophy Points:
    38
    Location:
    Norway/Norge/Norwegen
    Okay... That... was... cool... ;D
     
  3. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
  4. Maffe811

    Maffe811 The forum pet Staff Member

    Joined:
    Jul 2, 2009
    Messages:
    6,811
    Likes Received:
    1
    Trophy Points:
    38
    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 ?
     
  5. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    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.
     

Share This Page