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 that we will add as options to the menu item.The content area will custom scroll for which we will be using the really awesome jScrollPane Plugin by Kevin Luck. We will also use the jQuery 2d transformation plugin by Grady in order to rotate the little boxes while we animate them, and the the jQuery Easing Plugin for some spice.
The beautiful photos are by Jin. Visit his Flickr photostream at www.flickr.com/photos/jinthai/
So, let’s start!
tympanus.net/codrops/2011/03/28/moving-boxes-co...
Интересный эффект =))
14:55
Доступ к записи ограничен
Закрытая запись, не предназначенная для публичного просмотра
Сайты с таким типом прокрутки:
www.iai-jp.com
www.visualrepublic.net
www.teamfannypack.com
morphix.si
grzegorzkozak.pl
Туториалы:
trevordavis.net/blog/jquery-one-page-navigation... - jQuery One Page Navigation Plugin
webdesignerwall.com/tutorials/animated-scroll-t... - Animated Scroll to Top
www.iai-jp.com
www.visualrepublic.net
www.teamfannypack.com
morphix.si
grzegorzkozak.pl
Туториалы:
trevordavis.net/blog/jquery-one-page-navigation... - jQuery One Page Navigation Plugin
webdesignerwall.com/tutorials/animated-scroll-t... - Animated Scroll to Top
вторник, 12 апреля 2011
10:52
Доступ к записи ограничен
Закрытая запись, не предназначенная для публичного просмотра
gomockingbird.com/ - online wireframes constructor
понедельник, 11 апреля 2011
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
Sven Lennartz
CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects.Читать статью дальше
Creating & Using CSS Sprites
David Walsh
The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are:
Fewer images for the browser to download, which means fewer requests to the server.
Total images size is generally smaller, so less download time for the user and less bandwidth consumption.
No ugly mouseover code. No Javasсript -- only CSS!
Читать статью далее
Backgrounds In CSS: Everything You Need To Know
Backgrounds are a core part of CSS. They are one of the fundamentals that you simply need to know. In this article, we will cover the basics of using CSS backgrounds, including properties such as background-attachment. We’ll show some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties
www.smashingmagazine.com/2009/09/02/backgrounds...
Animated Drop Down Menu with jQuery
Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.www.clarklab.net/blog/posts/animated-drop-down-...
webdev.stephband.info/parallax.html - двигающиеся картинки =)
buildinternet.com/2009/03/sliding-boxes-and-cap... - двигающиеся блоки и подписи
code.google.com/p/jquery-content-panel-switcher... - jQuery Content Panel Switcher
buildinternet.com/2009/03/sliding-boxes-and-cap... - двигающиеся блоки и подписи
code.google.com/p/jquery-content-panel-switcher... - jQuery Content Panel Switcher
browsershots.org/ - проверка кроссбраузерности
css-tricks.com/examples/ButtonMaker/ - для кнопок CSS3
sixrevisions.com/resources/favicon_generators_r... - Web-based Favicon Generators and Favicon Resources
sixrevisions.com/resources/favicon_generators_r... - Web-based Favicon Generators and Favicon Resources
пятница, 08 апреля 2011
While Webkit-based browsers have had CSS Transitions since Safari 3.1.2, other browsers are only just now coming out with nightly builds supporting this exciting new part of the CSS3 specification.
With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.
Читать статью дальше
With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.
Читать статью дальше
westciv.com/tools/transforms/index.html - создание онлайн CSS3 градиентов и прочих примочек CSS3
Anatomy of Colors in Web Design: Green and Environmental Concept
Terrance
This article is the first of our upcoming series, Anatomy of Colors in Web Design. Over the next few months, we'll be covering different colors, featuring web designs from around the world with particular to one specific color theme. We start today with an article about the use of the color Green in Web design and related Environmental Concept. Please stay tuned as we will continue with other colors in upcoming weeks.
Читать статью дальше
Anatomy of Colors in Web Design: Blue and the Cool Look
Aidan
This is the second article of our series, Anatomy of Colors in Web Design. Over the next few months, we’ll be covering a spectrum of colors. And one color at a time, we will be featuring web design from around the world. If you missed the first of this series, you may want to catch up and read our article Green and Environmental Concept. Today’s article will explore the use of the color Blue in Web design. Please remember to continue watching this space, as we take a closer look at other colors in upcoming months.
Читать статью дальше
Anatomy of Colors in Web Design: Yellow and the Sunshine Feel
Aidan
This is the third article of our series, Anatomy of Colors in Web Design. Over the next few months, we’ll continue to cover a spectrum of colors. And one color at a time, we will be featuring web design from around the world. If you have missed past articles in the series, you may want to catch up and read our articles on the colors Green and Blue. Today’s article will explore the use of the color yellow in Web design. Please remember to continue watching this space, as we take a closer look at other colors in upcoming months.
Читать статью дальше
Anatomy of Colors in Web Design: Black – A Representation of Style & Mysteryl
Aidan
This series Anatomy of Colors in Web Design is back! One color at a time, we look at web designs from around the world. Over the past few months, in the series, we’ve looked at various colors like Green, Blue and Yellow. Our fourth installment of the series will look at the darkest end of the spectrum of colors – Black.
Читать статью дальше
Modern CSS Layouts: The Essential Characteristics
Zoe Mickley Gillenwater
Now is an exciting time to be creating CSS layouts. After years of what felt like the same old techniques for the same old browsers, we’re finally seeing browsers implement CSS 3, HTML 5 and other technologies that give us cool new tools and tricks for our designs.
But all of this change can be stressful, too. How do you keep up with all of the new techniques and make sure your Web pages look great on the increasing number of browsers and devices out there? In part 1 of this article, you’ll learn the five essential characteristics of successful modern CSS websites. In part 2 of this article, you’ll learn about the techniques and tools that you need to achieve these characteristics.
We won’t talk about design trends and styles that characterize modern CSS-based layouts. These styles are always changing. Instead, we’ll focus on the broad underlying concepts that you need to know to create the most successful CSS layouts using the latest techniques. For instance, separating content and presentation is still a fundamental concept of CSS Web pages. But other characteristics of modern CSS Web pages are new or more important than ever. A modern CSS-based website is: progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich.
Читать статью дальше
Modern CSS Layouts, Part 2: The Essential Techniques
Zoe Mickley Gillenwater
In Modern CSS Layouts, Part 1: The Essential Characteristics, you learned that modern, CSS-based web sites should be progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich. Now that you know what characterizes a modern CSS web site, how do you build one? Here are dozens of essential techniques and tools to learn and use to achieve the characteristics of today’s most successful CSS-based web pages.
Just as in the previous article, we’re not going to be talking about design trends and styles; these styles are always changing. Instead, we’re focusing on the specific techniques that you need to know to create modern CSS-based web pages of any style. For each technique or tool, we’ll indicate which of the five characteristics it helps meet. To keep this shorter than an encyclopedia, we’ll also just cover the basics of each technique, then point you to some useful, hand-picked resources to learn the full details.
Читать статью дальше