webdev.stephband.info Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events
Moving Boxes Content with jQuery Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects […] View demoDownload source Today we will create a website template with some really sweet animations using jQuery. The content area will custom scroll for which we will be using the really awesome jScrollPane Plugin by Kevin Luck. The beautiful photos are by Jin. So, let’s start! The Markup First, we want to place the background image with the grid overlay: The next div element will be used to add the little boxes with their random position and rotation degree We will place a total of 16 boxes (div elements) into this container. As you can see, we will add two “data-” attributes that we’ll use to define the speed and the easing effect that will be associated to the animation of the boxes. The CSS
Main Page Portfolio Image Navigation with jQuery Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate. View demo Download source The beautiful photography is by Angelo González. The Markup For the markup, we’ll have a main wrapper div with the background, the arrows and the gallery containers inside: Now, let’s take a look at the style. The CSS First, let’s define the style for the main container. The background will also be fixed and we’ll add a background image that creates the spotlight effect: The gallery will be positioned absolutely, just like it’s inner div: The gallery will also occupy all the space of the portfolio: We’ll fix the z-index of the inside div in order for keeping the stacking right: Now, we’ll style the arrows. And then we’ll style all the single arrows: Each image will be centered.
jQuery: The Write Less, Do More, JavaScript Library Fun With CSS Shapes I bet a bunch of you don't realize that we can create the illusion of shapes by using 100% CSS. By utilizing the border property in creative ways, we can make some really interesting polygons. In this week's screencast, we'll figure out a way to create speech-bubbles without resorting to background images. Most of us, by now, are familiar with using the "-moz-border-radius" and "-webkit-border-radius" properties to create rounded corners - or even complete circles - but there are other techniques to create more complicated shapes. Traditional Speech-Bubble Note how the "bottom" property is the reciprocal of the "border-top" property. Alternate Yet Another Interesting Note I'm typing this paragraph minutes before posting the tutorial. Pretty Nifty I'm really eager to see how you guys have implemented this unique trick into your own projects.
960 Grid System 8 Things You Need to Master to Call Yourself a Professional Web Designer » Edmonton and Sherwood Park Area Web Design, Graphic Design, Social Media, Software Development – Microtek Corporation Just like with print design, there is a set of skills and knowledge you need to master to become a professional web designer who designs functional, successful websites. Understand how the web works and realize users visit websites because they are looking for information. Users visit websites because they seek answers or need a service—this is what matters most to them. The only people interested in the design of your website are other designers.Realize that usability is the most important thing in web design. If your users can easily access information in your website, they will come back. Ensure that the pages within your website are as accessible as possible.Learn the technology behind the web. Mastering this knowledge will build confidence in your web design skills and make your websites work well for your clients. Summarized from and modified.
30 Creative And Eye-Catching Web Designer Portfolio This time I wanted to showcase and promote web design companies or web designers with extremely creative portfolios as well as own showcase sites. With Internet possibilities now many designers showcase their works on their online portfolios, I could never stop to list portfolios. There are tons more creative sites available, but I tried to select the best picks of my own choice. I also believe these sites and screenshots can present also current design trends. Note: If you are looking for fresh inspiration from year 2012, we suggest you to check out new article we just publish with 40 creative web designer portfolios. 1. 2. 3. Creative web&design and corporate identity works from designer Joseph Szilagyi. 4. Pikaboo is a Brussels based motion graphic studio. 5. This portfolio site has got a lot of design awards, displaying finished works in eye-caching business card way. 6. 7. 8. 9. 10. 11. 24-7MediaStudios Web Designer Portfolio 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26.
Using the DIV Tag with CSS and XHTML+CSS If you've been designing Web pages for a while, chances are you've built a page that uses tables to define how the page layout will look. This works fine at first, but six months later, when you're asked to redesign the page (or site) you have to struggle to figure out what the table is doing on the page. And you have to rip it all apart to do your redesign. This can be slow. Enter the DIV Tag If you use the <div> tag combined with CSS, you will create a page that is easy to manage and manipulate later. Be sure to use semantic markup to style the divisions that have specific semantic meanings with the appropriate tags. A typical Web page has one or more of the following divisions: header: defining the top banner and possibly navigation of the page - as it's a header, a header tag is appropriate <h1>... Once you've defined the <div> elements of your page, you can then use CSS to style them however you'd like.
Intermediate HTML/XHTML Tutorials Intermediate tutorials on HTML detail some of the more complex tasks in a Web page such as frames and tables. If you can master these tutorials, you will have a strong understanding of HTML. How Do You Use Tabs in Web Pages? Whitespace characters like tabs can be hard to use in Web pages because the browsers collapse them by default. Thoughts on HTML Email HTML email is misleading because most email clients send email as HTML by default - in fact in many clients you have to specify if you want the email to be sent as plain text. Frames Tutorial Frames may seem difficult, but this basic tutorial will get you started. How to Open a Link in a New Window: Things to Think About Learn how to open a link in a new window. Super-Size Your Graphics to Create Visual Impact - About Desktop Publi Using images to create visual impact on your pages is important. Pretty HTML Even if you use a WYSIWYG editor to write your Web pages, it can be a good idea to look at the code once in a while.